diff --git a/.changeset/nervous-geckos-visit.md b/.changeset/nervous-geckos-visit.md new file mode 100644 index 0000000000..3cc441f7fa --- /dev/null +++ b/.changeset/nervous-geckos-visit.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/select": patch +--- + +Fixed Disabled Select Allows Changes Using Blur + Keyboard (#2345) diff --git a/packages/components/select/__tests__/select.test.tsx b/packages/components/select/__tests__/select.test.tsx index e648f800bf..654a58e484 100644 --- a/packages/components/select/__tests__/select.test.tsx +++ b/packages/components/select/__tests__/select.test.tsx @@ -361,4 +361,39 @@ describe("Select", () => { // assert that the select is closed expect(select).toHaveAttribute("aria-expanded", "false"); }); + + it("disabled select shouldn't update by keyboard", async () => { + let onSelectionChange = jest.fn(); + + const wrapper = render( + , + ); + const select = wrapper.getByTestId("test-select"); + + await act(async () => { + await userEvent.click(document.body); + await userEvent.tab(); + await userEvent.type(select, "z", {skipClick: true}); + + expect(onSelectionChange).toBeCalledTimes(0); + }); + }); }); diff --git a/packages/components/select/src/use-select.ts b/packages/components/select/src/use-select.ts index 0ee0caeb70..9597f77d21 100644 --- a/packages/components/select/src/use-select.ts +++ b/packages/components/select/src/use-select.ts @@ -204,7 +204,7 @@ export function useSelect(originalProps: UseSelectProps) { const listBoxRef = useRef(null); const popoverRef = useRef(null); - const state = useMultiSelectState({ + let state = useMultiSelectState({ ...props, isOpen, selectionMode, @@ -235,6 +235,13 @@ export function useSelect(originalProps: UseSelectProps) { }, }); + state = { + ...state, + ...(originalProps?.isDisabled && { + disabledKeys: new Set([...state.collection.getKeys()]), + }), + }; + const {labelProps, triggerProps, valueProps, menuProps, descriptionProps, errorMessageProps} = useMultiSelect( {...props, disallowEmptySelection, isDisabled: originalProps?.isDisabled},