feat(Select): add closeOnSelect property

gravity-ui · Oct 25, 2024 · 8b3bc5a · 8b3bc5a
1 parent b6516f4
commit 8b3bc5a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -97,6 +97,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
         onClose,
         id,
         hasCounter,
+        closeOnSelect,
         renderCounter,
         title,
     } = props;
@@ -116,6 +117,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
         defaultValue,
         defaultOpen,
         multiple,
+        closeOnSelect,
         open: propsOpen,
         onClose,
         onOpenChange,

diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts
@@ -158,8 +158,10 @@ export type SelectProps<T = any> = QAProps &
             | React.ReactElement<SelectOptionGroup<T>, typeof OptionGroup>
             | React.ReactElement<SelectOptionGroup<T>, typeof OptionGroup>[];
         id?: string;
-        /**Shows selected options count if multiple selection is avalable */
+        /** Shows selected options count if multiple selection is avalable */
         hasCounter?: boolean;
+        /** Close popup when value changed */
+        closeOnSelect?: boolean;
         title?: string;
         name?: string;
         form?: string;

diff --git a/src/hooks/useSelect/types.ts b/src/hooks/useSelect/types.ts
@@ -11,6 +11,7 @@ export type UseSelectProps = {
     value?: string[];
     defaultValue?: string[];
     multiple?: boolean;
+    closeOnSelect?: boolean;
     onUpdate?: (value: string[]) => void;
     disabled?: boolean;
 } & UseOpenProps;

diff --git a/src/hooks/useSelect/useSelect.ts b/src/hooks/useSelect/useSelect.ts
@@ -13,6 +13,7 @@ export const useSelect = <T extends unknown>({
     value: valueProps,
     defaultValue = [],
     multiple,
+    closeOnSelect: propsCloseOnSelect,
     onUpdate,
     disabled,
 }: UseSelectProps): UseSelectResult<T> => {
@@ -25,6 +26,13 @@ export const useSelect = <T extends unknown>({
         open,
     });
 
+    /**
+     * Old behaviour backward compatibility.
+     * For multiple select - false.
+     * For single select - true.
+     */
+    const closeOnSelect = typeof propsCloseOnSelect === 'boolean' ? propsCloseOnSelect : !multiple;
+
     const setValue = React.useCallback(
         (v: string[]) => {
             if (!disabled) {
@@ -34,16 +42,22 @@ export const useSelect = <T extends unknown>({
         [setValueInner, disabled],
     );
 
+    const handleCloseOnSelect = React.useCallback(() => {
+        if (closeOnSelect) {
+            toggleOpen(false);
+        }
+    }, [closeOnSelect, toggleOpen]);
+
     const handleSingleSelection = React.useCallback(
         (option: UseSelectOption<T>) => {
             if (!value.includes(option.value)) {
                 const nextValue = [option.value];
                 setValue(nextValue);
             }
 
-            toggleOpen(false);
+            handleCloseOnSelect();
         },
-        [value, setValue, toggleOpen],
+        [value, setValue, handleCloseOnSelect],
     );
 
     const handleMultipleSelection = React.useCallback(
@@ -54,8 +68,10 @@ export const useSelect = <T extends unknown>({
                 : [...value, option.value];
 
             setValue(nextValue);
+
+            handleCloseOnSelect();
         },
-        [value, setValue],
+        [value, setValue, handleCloseOnSelect],
     );
 
     const handleSelection = React.useCallback(