@rc-component/select 1.6.2 → 1.6.4

package/es/BaseSelect/index.js

@@ -135,7 +135,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   // ============================== Open ==============================
   // Not trigger `open` when `notFoundContent` is empty
   const emptyListContent = !notFoundContent && emptyOptions;
-  const [mergedOpen, triggerOpen, lockOptions] = useOpen(defaultOpen || false, open, onPopupVisibleChange, nextOpen => disabled || emptyListContent ? false : nextOpen);
+  const [rawOpen, mergedOpen, triggerOpen, lockOptions] = useOpen(defaultOpen || false, open, onPopupVisibleChange, nextOpen => disabled || emptyListContent ? false : nextOpen);
 
   // ============================= Search =============================
   const tokenWithEnter = React.useMemo(() => (tokenSeparators || []).some(tokenSeparator => ['\n', '\r\n'].includes(tokenSeparator)), [tokenSeparators]);
@@ -188,12 +188,15 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     });
   };
 
-  // Close will clean up single mode search text
+  // Clean up search value when the dropdown is closed.
+  // We use `rawOpen` here to avoid clearing the search input when the dropdown is
+  // programmatically closed due to `notFoundContent={null}` and no matching options.
+  // This allows the user to continue typing their search query.
   React.useEffect(() => {
-    if (!mergedOpen && !multiple && mode !== 'combobox') {
+    if (!rawOpen && !multiple && mode !== 'combobox') {
       onInternalSearch('', false, false);
     }
-  }, [mergedOpen]);
+  }, [rawOpen]);
 
   // ============================ Disabled ============================
   // Close dropdown & remove focus state when disabled change
@@ -222,8 +225,11 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       key
     } = event;
     const isEnterKey = key === 'Enter';
-    if (isEnterKey) {
-      // Do not submit form when type in the input
+    const isSpaceKey = key === ' ';
+
+    // Enter or Space opens dropdown (ARIA combobox: spacebar should open)
+    if (isEnterKey || isSpaceKey) {
+      // Do not submit form when type in the input; prevent Space from scrolling page
       if (mode !== 'combobox') {
         event.preventDefault();
       }
@@ -254,7 +260,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
         });
       }
     }
-    if (mergedOpen && (!isEnterKey || !keyLockRef.current)) {
+    if (mergedOpen && (!isEnterKey || !keyLockRef.current) && !isSpaceKey) {
       // Lock the Enter key after it is pressed to avoid repeated triggering of the onChange event.
       if (isEnterKey) {
         keyLockRef.current = true;

package/es/hooks/useOpen.d.ts

@@ -15,4 +15,4 @@ export type TriggerOpenType = (nextOpen?: boolean, config?: {
  * SSR handling: During SSR, `open` is always false to avoid Portal issues.
  * On client-side hydration, it syncs with the actual open state.
  */
-export default function useOpen(defaultOpen: boolean, propOpen: boolean, onOpen: (nextOpen: boolean) => void, postOpen: (nextOpen: boolean) => boolean): [open: boolean, toggleOpen: TriggerOpenType, lockOptions: boolean];
+export default function useOpen(defaultOpen: boolean, propOpen: boolean, onOpen: (nextOpen: boolean) => void, postOpen: (nextOpen: boolean) => boolean): [rawOpen: boolean, open: boolean, toggleOpen: TriggerOpenType, lockOptions: boolean];

package/es/hooks/useOpen.js

@@ -78,5 +78,5 @@ export default function useOpen(defaultOpen, propOpen, onOpen, postOpen) {
       });
     }
   });
-  return [mergedOpen, toggleOpen, lock];
+  return [ssrSafeOpen, mergedOpen, toggleOpen, lock];
 }

package/lib/BaseSelect/index.js

@@ -144,7 +144,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   // ============================== Open ==============================
   // Not trigger `open` when `notFoundContent` is empty
   const emptyListContent = !notFoundContent && emptyOptions;
-  const [mergedOpen, triggerOpen, lockOptions] = (0, _useOpen.default)(defaultOpen || false, open, onPopupVisibleChange, nextOpen => disabled || emptyListContent ? false : nextOpen);
+  const [rawOpen, mergedOpen, triggerOpen, lockOptions] = (0, _useOpen.default)(defaultOpen || false, open, onPopupVisibleChange, nextOpen => disabled || emptyListContent ? false : nextOpen);
 
   // ============================= Search =============================
   const tokenWithEnter = React.useMemo(() => (tokenSeparators || []).some(tokenSeparator => ['\n', '\r\n'].includes(tokenSeparator)), [tokenSeparators]);
@@ -197,12 +197,15 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     });
   };
 
-  // Close will clean up single mode search text
+  // Clean up search value when the dropdown is closed.
+  // We use `rawOpen` here to avoid clearing the search input when the dropdown is
+  // programmatically closed due to `notFoundContent={null}` and no matching options.
+  // This allows the user to continue typing their search query.
   React.useEffect(() => {
-    if (!mergedOpen && !multiple && mode !== 'combobox') {
+    if (!rawOpen && !multiple && mode !== 'combobox') {
       onInternalSearch('', false, false);
     }
-  }, [mergedOpen]);
+  }, [rawOpen]);
 
   // ============================ Disabled ============================
   // Close dropdown & remove focus state when disabled change
@@ -231,8 +234,11 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       key
     } = event;
     const isEnterKey = key === 'Enter';
-    if (isEnterKey) {
-      // Do not submit form when type in the input
+    const isSpaceKey = key === ' ';
+
+    // Enter or Space opens dropdown (ARIA combobox: spacebar should open)
+    if (isEnterKey || isSpaceKey) {
+      // Do not submit form when type in the input; prevent Space from scrolling page
       if (mode !== 'combobox') {
         event.preventDefault();
       }
@@ -263,7 +269,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
         });
       }
     }
-    if (mergedOpen && (!isEnterKey || !keyLockRef.current)) {
+    if (mergedOpen && (!isEnterKey || !keyLockRef.current) && !isSpaceKey) {
       // Lock the Enter key after it is pressed to avoid repeated triggering of the onChange event.
       if (isEnterKey) {
         keyLockRef.current = true;

package/lib/hooks/useOpen.d.ts

@@ -15,4 +15,4 @@ export type TriggerOpenType = (nextOpen?: boolean, config?: {
  * SSR handling: During SSR, `open` is always false to avoid Portal issues.
  * On client-side hydration, it syncs with the actual open state.
  */
-export default function useOpen(defaultOpen: boolean, propOpen: boolean, onOpen: (nextOpen: boolean) => void, postOpen: (nextOpen: boolean) => boolean): [open: boolean, toggleOpen: TriggerOpenType, lockOptions: boolean];
+export default function useOpen(defaultOpen: boolean, propOpen: boolean, onOpen: (nextOpen: boolean) => void, postOpen: (nextOpen: boolean) => boolean): [rawOpen: boolean, open: boolean, toggleOpen: TriggerOpenType, lockOptions: boolean];

package/lib/hooks/useOpen.js

@@ -85,5 +85,5 @@ function useOpen(defaultOpen, propOpen, onOpen, postOpen) {
       });
     }
   });
-  return [mergedOpen, toggleOpen, lock];
+  return [ssrSafeOpen, mergedOpen, toggleOpen, lock];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/select",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"