fix(ui:select): make searchable and fix scroll behaviour (#6303)

wireapp · Jun 17, 2024 · 2914431 · 2914431
1 parent 631efe0
commit 2914431
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/packages/react-ui-kit/src/Form/Select.md b/packages/react-ui-kit/src/Form/Select.md
@@ -132,5 +132,34 @@ const [isOpen, setIsOpen] = React.useState(false);
       />
     </Column>
   </Columns>
+
+  <Columns>
+    <Column>Select with many items</Column>
+
+    <Column>
+      <Select
+        label="Many items select"
+        required
+        id="manyItemsSelect"
+        options={[...selectOptions, ...selectOptions, ...selectOptions, ...selectOptions]}
+        dataUieName="required-select"
+      />
+    </Column>
+  </Columns>
+
+  <Columns>
+    <Column>Searcheable Select</Column>
+
+    <Column>
+      <Select
+        label="Searchable select"
+        required
+        id="searchableSelect"
+        options={[...selectOptions]}
+        dataUieName="required-select"
+        isSearchable
+      />
+    </Column>
+  </Columns>
 </Container>;
 ```
diff --git a/packages/react-ui-kit/src/Form/Select.tsx b/packages/react-ui-kit/src/Form/Select.tsx
@@ -58,6 +58,7 @@ interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Option>>
   markInvalid?: boolean;
   required?: boolean;
   isMulti?: IsMulti;
+  isSearchable?: boolean;
 }
 
 export const Select = <IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({
@@ -72,6 +73,7 @@ export const Select = <IsMulti extends boolean = false, Group extends GroupBase<
   wrapperCSS = {},
   markInvalid = false,
   required = false,
+  isSearchable = false,
   ...props
 }: SelectProps<IsMulti, Group>) => {
   const theme = useTheme();
@@ -111,7 +113,7 @@ export const Select = <IsMulti extends boolean = false, Group extends GroupBase<
         tabIndex={TabIndex.UNFOCUSABLE}
         isDisabled={disabled}
         hideSelectedOptions={false}
-        isSearchable={false}
+        isSearchable={isSearchable}
         isClearable={false}
         closeMenuOnSelect={!isMulti}
         isMulti={isMulti}

diff --git a/packages/react-ui-kit/src/Form/SelectStyles.tsx b/packages/react-ui-kit/src/Form/SelectStyles.tsx
@@ -121,7 +121,7 @@ export const customStyles = (theme: Theme, markInvalid = false) => ({
     borderRadius: 12,
     paddingBottom: 0,
     paddingTop: 0,
-    maxHeight: 'fit-content',
+    maxHeight: 400,
   }),
   option: (provided, {isMulti, isDisabled, isFocused, isSelected, options, data}) => ({
     ...provided,