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(); + + const input: HTMLInputElement = screen.getByTestId('autosize-input'); + fireEvent.change(input, { target: { value: 'foo' } }); + + expect(onChange).toHaveBeenCalled(); + }); + it('should have default minWidth when empty', () => { render(); 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((props, r minWidth = 10, maxWidth, onCommitChange, + onChange, onKeyDown, onBlur, value: controlledValue, @@ -48,6 +49,9 @@ export const AutoSizeInput = React.forwardRef((props, r ref={ref} value={value.toString()} onChange={(event) => { + if (onChange) { + onChange(event); + } setValue(event.currentTarget.value); }} width={inputWidth}