diff --git a/packages/ui/src/components/form/controls/Select/Select.test.tsx b/packages/ui/src/components/form/controls/Select/Select.test.tsx
index 0490725..224ee52 100644
--- a/packages/ui/src/components/form/controls/Select/Select.test.tsx
+++ b/packages/ui/src/components/form/controls/Select/Select.test.tsx
@@ -33,4 +33,18 @@ describe('Select', () => {
expect(onChange).toHaveBeenCalledWith('2')
})
+
+ it('calls onNativeChange with the select change event', async () => {
+ const user = userEvent.setup()
+ const onNativeChange = vi.fn()
+
+ const { getByRole } = render(
+ ,
+ )
+
+ await user.selectOptions(getByRole('combobox', { name: 'Native select' }), '2')
+
+ expect(onNativeChange).toHaveBeenCalledTimes(1)
+ expect(onNativeChange.mock.calls[0][0].target).toHaveValue('2')
+ })
})
diff --git a/packages/ui/src/components/form/controls/Select/Select.tsx b/packages/ui/src/components/form/controls/Select/Select.tsx
index 7a4e7e3..086fbff 100644
--- a/packages/ui/src/components/form/controls/Select/Select.tsx
+++ b/packages/ui/src/components/form/controls/Select/Select.tsx
@@ -25,6 +25,7 @@ export interface SelectProps
defaultValue?: string
size?: ComponentSize
onChange?: (value: string) => void
+ onNativeChange?: (event: ChangeEvent) => void
slotClassNames?: SlotClassNames
}
@@ -39,6 +40,7 @@ export const Select = forwardRef(function Select
size = 'md',
id,
onChange,
+ onNativeChange,
disabled,
slotClassNames,
...props
@@ -57,6 +59,7 @@ export const Select = forwardRef(function Select
const handleChange = (event: ChangeEvent) => {
setInnerValue(event.target.value)
+ onNativeChange?.(event)
}
return (