fix: select: fixes pills layout and removes redundant options change

The redundant options change was triggering a second onClick event with no value
EightfoldAI · Aug 23, 2022 · 1623136 · 1623136
1 parent bf44706
commit 1623136
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 12 deletions.
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -201,7 +201,7 @@ export const Select: FC<SelectProps> = React.forwardRef(
                     size === SelectSize.Flex && smallScreenActive,
             },
             {
-                [styles.selectSmall]:
+                [styles.selectLarge]:
                     size === SelectSize.Flex && xSmallScreenActive,
             },
             { [styles.selectLarge]: size === SelectSize.Large },
@@ -279,14 +279,6 @@ export const Select: FC<SelectProps> = React.forwardRef(
             );
         };
 
-        const onDropdownVisibilityChange = (isVisible: boolean) => {
-            setDropdownVisibility(isVisible);
-            setSearchQuery('');
-            setOptions(
-                options.map((option) => ({ ...option, hideOption: false }))
-            );
-        };
-
         const OptionMenu = ({ options }: { options: SelectOption[] }) => {
             const filteredOptions = options.filter(
                 (option) => !option.hideOption
@@ -373,7 +365,7 @@ export const Select: FC<SelectProps> = React.forwardRef(
                 <Dropdown
                     {...dropdownProps}
                     onVisibleChange={(isVisible) =>
-                        onDropdownVisibilityChange(isVisible)
+                        setDropdownVisibility(isVisible)
                     }
                     showDropdown={showDropdown}
                     overlay={

diff --git a/src/components/Select/select.module.scss b/src/components/Select/select.module.scss
@@ -8,7 +8,7 @@
         padding: 0;
 
         .select-spinner {
-            margin: 4px auto;
+            margin: 10px auto;
             position: relative;
         }
     }
@@ -81,7 +81,7 @@
 
 .select-menu-empty {
     color: var(--grey-color-60);
-    margin: 10px auto;
+    margin: $space-m;
     position: relative;
 }