fix(select): disabled select shouldn't get update by keyboard

.changeset/nervous-geckos-visit.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/select": patch
+---
+
+Fixed Disabled Select Allows Changes Using Blur + Keyboard (#2345)

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(
+      <Select
+        isDisabled
+        aria-label="Favorite Animal"
+        data-testid="test-select"
+        label="Favorite Animal"
+        selectionMode="single"
+        value="penguin"
+        onSelectionChange={onSelectionChange}
+      >
+        <SelectItem key="penguin" value="penguin">
+          Penguin
+        </SelectItem>
+        <SelectItem key="zebra" value="zebra">
+          Zebra
+        </SelectItem>
+        <SelectItem key="shark" value="shark">
+          Shark
+        </SelectItem>
+      </Select>,
+    );
+    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);
+    });
+  });
 });

packages/components/select/src/use-select.ts

@@ -204,7 +204,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
   const listBoxRef = useRef<HTMLUListElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
 
-  const state = useMultiSelectState<T>({
+  let state = useMultiSelectState<T>({
     ...props,
     isOpen,
     selectionMode,
@@ -235,6 +235,13 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     },
   });
 
+  state = {
+    ...state,
+    ...(originalProps?.isDisabled && {
+      disabledKeys: new Set([...state.collection.getKeys()]),
+    }),
+  };
+
   const {labelProps, triggerProps, valueProps, menuProps, descriptionProps, errorMessageProps} =
     useMultiSelect(
       {...props, disallowEmptySelection, isDisabled: originalProps?.isDisabled},