diff --git a/.changeset/heavy-cats-jog.md b/.changeset/heavy-cats-jog.md new file mode 100644 index 0000000000..1529424e2c --- /dev/null +++ b/.changeset/heavy-cats-jog.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-react": patch +--- + +Trigger Combobox.onChange callback in addition to onClear when clearing the value programmatically diff --git a/@navikt/core/react/src/form/combobox/Input/inputContext.tsx b/@navikt/core/react/src/form/combobox/Input/inputContext.tsx index 35851f7b3c..7d4701135f 100644 --- a/@navikt/core/react/src/form/combobox/Input/inputContext.tsx +++ b/@navikt/core/react/src/form/combobox/Input/inputContext.tsx @@ -81,10 +81,11 @@ export const InputContextProvider = ({ children, value: props }) => { const clearInput = useCallback( (event: React.PointerEvent | React.KeyboardEvent) => { onClear?.(event); + externalOnChange?.(null, ""); setValue(""); setSearchTerm(""); }, - [onClear, setSearchTerm, setValue] + [externalOnChange, onClear, setValue] ); const focusInput = useCallback(() => { diff --git a/@navikt/core/react/src/form/combobox/combobox.stories.tsx b/@navikt/core/react/src/form/combobox/combobox.stories.tsx index 1783f0cd1f..5ff2a51f5f 100644 --- a/@navikt/core/react/src/form/combobox/combobox.stories.tsx +++ b/@navikt/core/react/src/form/combobox/combobox.stories.tsx @@ -506,6 +506,6 @@ export const TestThatCallbacksOnlyFireWhenExpected = { await sleep(250); expect(args.onClear.mock.calls).toHaveLength(1); expect(args.onToggleSelected.mock.calls).toHaveLength(1); - expect(args.onChange.mock.calls).toHaveLength(searchWord.length); + expect(args.onChange.mock.calls).toHaveLength(searchWord.length + 1); }, }; diff --git a/@navikt/core/react/src/form/combobox/types.ts b/@navikt/core/react/src/form/combobox/types.ts index 869ec1d597..7acd4812d9 100644 --- a/@navikt/core/react/src/form/combobox/types.ts +++ b/@navikt/core/react/src/form/combobox/types.ts @@ -66,7 +66,10 @@ export interface ComboboxProps * @param event * @returns */ - onChange?: (event: ChangeEvent) => void; + onChange?: ( + event: ChangeEvent | null, + value?: string + ) => void; /** * Callback function triggered whenever the input field is cleared *