Skip to content

Commit 6a145c0

Browse files
authored
fix: stopped onChange throwing undefined (#18452)
* fix: restricted onchange calls * fix: added new story and reverted default story * test: added tests to check for undefined * test removal * chore: format fix
1 parent 9cf96c5 commit 6a145c0

File tree

2 files changed

+37
-2
lines changed

2 files changed

+37
-2
lines changed

packages/react/src/components/ComboBox/ComboBox-test.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -621,6 +621,40 @@ describe('ComboBox', () => {
621621
'cds--list-box__menu-item--highlighted'
622622
);
623623
});
624+
625+
it('should pass defined selectedItem to onChange when item is selected', async () => {
626+
render(<ComboBox {...mockProps} />);
627+
628+
expect(mockProps.onChange).not.toHaveBeenCalled();
629+
630+
await openMenu();
631+
await userEvent.click(screen.getAllByRole('option')[0]);
632+
633+
expect(mockProps.onChange).toHaveBeenCalledTimes(1);
634+
expect(mockProps.onChange).toHaveBeenCalledWith(
635+
expect.objectContaining({
636+
selectedItem: expect.anything(),
637+
})
638+
);
639+
640+
const call = mockProps.onChange.mock.calls[0][0];
641+
expect(call.selectedItem).toBeDefined();
642+
expect(call.selectedItem).toEqual(mockProps.items[0]);
643+
});
644+
645+
it('should never pass undefined as selectedItem to onChange', async () => {
646+
render(<ComboBox {...mockProps} />);
647+
648+
for (let i = 0; i < mockProps.items.length; i++) {
649+
await openMenu();
650+
await userEvent.click(screen.getAllByRole('option')[i]);
651+
652+
const call = mockProps.onChange.mock.calls[i][0];
653+
expect(call.selectedItem).toBeDefined();
654+
expect(call.selectedItem).not.toBeUndefined();
655+
expect(call.selectedItem).toEqual(mockProps.items[i]);
656+
}
657+
});
624658
});
625659

626660
describe('ComboBox autocomplete', () => {

packages/react/src/components/ComboBox/ComboBox.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -783,8 +783,9 @@ const ComboBox = forwardRef(
783783
onChange({ selectedItem: newSelectedItem });
784784
}
785785
if (
786-
type === useCombobox.stateChangeTypes.FunctionSelectItem ||
787-
type === useCombobox.stateChangeTypes.InputKeyDownEnter
786+
(type === useCombobox.stateChangeTypes.FunctionSelectItem ||
787+
type === useCombobox.stateChangeTypes.InputKeyDownEnter) &&
788+
!isEqual(selectedItemProp, newSelectedItem) // Only fire if there's an actual change
788789
) {
789790
onChange({ selectedItem: newSelectedItem });
790791
}

0 commit comments

Comments
 (0)