From 5f6126693117ef3abbb1bc5b5d50e5739aa95280 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Wed, 9 Oct 2024 14:38:56 +0200
Subject: [PATCH] AutoSizeInput: Forward onChange event (#94459)

Forward onChange event
---
 .../src/components/Input/AutoSizeInput.test.tsx        | 10 ++++++++++
 .../grafana-ui/src/components/Input/AutoSizeInput.tsx  |  4 ++++
 2 files changed, 14 insertions(+)

diff --git a/packages/grafana-ui/src/components/Input/AutoSizeInput.test.tsx b/packages/grafana-ui/src/components/Input/AutoSizeInput.test.tsx
index b47fc7da3d9..b2756e7b2d9 100644
--- a/packages/grafana-ui/src/components/Input/AutoSizeInput.test.tsx
+++ b/packages/grafana-ui/src/components/Input/AutoSizeInput.test.tsx
@@ -15,6 +15,16 @@ jest.mock('../../utils/measureText', () => {
 });
 
 describe('AutoSizeInput', () => {
+  it('should support default Input API', () => {
+    const onChange = jest.fn();
+    render(<AutoSizeInput onChange={onChange} value="" />);
+
+    const input: HTMLInputElement = screen.getByTestId('autosize-input');
+    fireEvent.change(input, { target: { value: 'foo' } });
+
+    expect(onChange).toHaveBeenCalled();
+  });
+
   it('should have default minWidth when empty', () => {
     render(<AutoSizeInput />);
 
diff --git a/packages/grafana-ui/src/components/Input/AutoSizeInput.tsx b/packages/grafana-ui/src/components/Input/AutoSizeInput.tsx
index de855ff5302..d1e61001de3 100644
--- a/packages/grafana-ui/src/components/Input/AutoSizeInput.tsx
+++ b/packages/grafana-ui/src/components/Input/AutoSizeInput.tsx
@@ -20,6 +20,7 @@ export const AutoSizeInput = React.forwardRef<HTMLInputElement, Props>((props, r
     minWidth = 10,
     maxWidth,
     onCommitChange,
+    onChange,
     onKeyDown,
     onBlur,
     value: controlledValue,
@@ -48,6 +49,9 @@ export const AutoSizeInput = React.forwardRef<HTMLInputElement, Props>((props, r
       ref={ref}
       value={value.toString()}
       onChange={(event) => {
+        if (onChange) {
+          onChange(event);
+        }
         setValue(event.currentTarget.value);
       }}
       width={inputWidth}