Fix selection height

tremorlabs · Nov 7, 2023 · ba9fc67 · ba9fc67
1 parent 444d8eb
commit ba9fc67
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 23 deletions.
diff --git a/src/components/input-elements/MultiSelect/MultiSelect.tsx b/src/components/input-elements/MultiSelect/MultiSelect.tsx
@@ -229,7 +229,7 @@ const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>((props, r
             </button>
           ) : null}
           <Transition
-            className="absolute z-10 max-h-[228px] w-full left-0 "
+            className="absolute z-10 w-full"
             enter="transition ease duration-100 transform"
             enterFrom="opacity-0 -translate-y-4"
             enterTo="opacity-100 translate-y-0"
@@ -240,7 +240,7 @@ const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>((props, r
             <Listbox.Options
               className={tremorTwMerge(
                 // common
-                "divide-y overflow-y-auto outline-none rounded-tremor-default",
+                "divide-y overflow-y-auto outline-none rounded-tremor-default max-h-[228px] left-0",
                 // light
                 "bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown",
                 // dark

diff --git a/src/components/input-elements/SearchSelect/SearchSelect.tsx b/src/components/input-elements/SearchSelect/SearchSelect.tsx
@@ -174,7 +174,7 @@ const SearchSelect = React.forwardRef<HTMLDivElement, SearchSelectProps>((props,
           ) : null}
           {filteredOptions.length > 0 && (
             <Transition
-              className="absolute z-10 max-h-[228px] w-full left-0"
+              className="absolute z-10 w-full"
               enter="transition ease duration-100 transform"
               enterFrom="opacity-0 -translate-y-4"
               enterTo="opacity-100 translate-y-0"
@@ -185,7 +185,7 @@ const SearchSelect = React.forwardRef<HTMLDivElement, SearchSelectProps>((props,
               <Combobox.Options
                 className={tremorTwMerge(
                   // common
-                  "divide-y overflow-y-auto outline-none rounded-tremor-default text-tremor-default",
+                  "divide-y overflow-y-auto outline-none rounded-tremor-default text-tremor-default max-h-[228px] left-0",
                   // light
                   "bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown",
                   // dark

diff --git a/src/components/input-elements/Select/Select.tsx b/src/components/input-elements/Select/Select.tsx
@@ -156,7 +156,7 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
             </button>
           ) : null}
           <Transition
-            className="absolute z-10 max-h-[228px] w-full left-0"
+            className="absolute z-10 w-full"
             enter="transition ease duration-100 transform"
             enterFrom="opacity-0 -translate-y-4"
             enterTo="opacity-100 translate-y-0"
@@ -167,7 +167,7 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
             <Listbox.Options
               className={tremorTwMerge(
                 // common
-                "divide-y overflow-y-auto outline-none rounded-tremor-default",
+                "divide-y overflow-y-auto outline-none rounded-tremor-default max-h-[228px] left-0",
                 // light
                 "bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown",
                 // dark

diff --git a/src/stories/input-elements/helpers/SimpleMultiSelect.tsx b/src/stories/input-elements/helpers/SimpleMultiSelect.tsx
@@ -27,24 +27,38 @@ export const SimpleMultiSelectControlled = () => {
   };
 
   return (
-    <div>
+    <div className="space-y-2">
       <MultiSelect
         value={value}
         onValueChange={handleValueChange}
         // Add any other props you need
       >
-        <MultiSelectItem value={"5"}>Five</MultiSelectItem>
-        <MultiSelectItem value={"3"}>Three</MultiSelectItem>
-        <MultiSelectItem value={"1"}>One</MultiSelectItem>
+        <MultiSelectItem value="1">One</MultiSelectItem>
+        <MultiSelectItem value="2">Two</MultiSelectItem>
+        <MultiSelectItem value="3">Three</MultiSelectItem>
+        <MultiSelectItem value="4">Four</MultiSelectItem>
+        <MultiSelectItem value="5">Five</MultiSelectItem>
+        <MultiSelectItem value="6">Six</MultiSelectItem>
+        <MultiSelectItem value="7">Seven</MultiSelectItem>
+        <MultiSelectItem value="8">Eight</MultiSelectItem>
+        <MultiSelectItem value="9">Nine</MultiSelectItem>
+        <MultiSelectItem value="10">Ten</MultiSelectItem>
       </MultiSelect>
       <MultiSelect
         value={value}
         onValueChange={handleValueChange}
         // Add any other props you need
       >
-        <MultiSelectItem value={"5"}>Five</MultiSelectItem>
-        <MultiSelectItem value={"3"}>Three</MultiSelectItem>
-        <MultiSelectItem value={"1"}>One</MultiSelectItem>
+        <MultiSelectItem value="1">One</MultiSelectItem>
+        <MultiSelectItem value="2">Two</MultiSelectItem>
+        <MultiSelectItem value="3">Three</MultiSelectItem>
+        <MultiSelectItem value="4">Four</MultiSelectItem>
+        <MultiSelectItem value="5">Five</MultiSelectItem>
+        <MultiSelectItem value="6">Six</MultiSelectItem>
+        <MultiSelectItem value="7">Seven</MultiSelectItem>
+        <MultiSelectItem value="8">Eight</MultiSelectItem>
+        <MultiSelectItem value="9">Nine</MultiSelectItem>
+        <MultiSelectItem value="10">Ten</MultiSelectItem>
       </MultiSelect>
       <Button onClick={handleReset}>Reset</Button>
       <Button onClick={handleSetToOne}>Set to One</Button>

diff --git a/src/stories/input-elements/helpers/SimpleSearchSelect.tsx b/src/stories/input-elements/helpers/SimpleSearchSelect.tsx
@@ -27,11 +27,16 @@ export const SimpleSearchSelectControlled = (args: any) => {
         }}
         {...args}
       >
-        <SearchSelectItem value={"5"}>Five</SearchSelectItem>
-        <SearchSelectItem value={"3"}>Three</SearchSelectItem>
-        <SearchSelectItem value={"1"}>One</SearchSelectItem>
-        <SearchSelectItem value={"30"}>Thirty</SearchSelectItem>
-        <SearchSelectItem value={"33"}>Thirtythree</SearchSelectItem>
+        <SearchSelectItem value="1">One</SearchSelectItem>
+        <SearchSelectItem value="2">Two</SearchSelectItem>
+        <SearchSelectItem value="3">Three</SearchSelectItem>
+        <SearchSelectItem value="4">Four</SearchSelectItem>
+        <SearchSelectItem value="5">Five</SearchSelectItem>
+        <SearchSelectItem value="6">Six</SearchSelectItem>
+        <SearchSelectItem value="7">Seven</SearchSelectItem>
+        <SearchSelectItem value="8">Eight</SearchSelectItem>
+        <SearchSelectItem value="9">Nine</SearchSelectItem>
+        <SearchSelectItem value="10">Ten</SearchSelectItem>
       </SearchSelect>
       <SearchSelect
         value={value}
@@ -41,11 +46,16 @@ export const SimpleSearchSelectControlled = (args: any) => {
         }}
         {...args}
       >
-        <SearchSelectItem value={"5"}>Five</SearchSelectItem>
-        <SearchSelectItem value={"3"}>Three</SearchSelectItem>
-        <SearchSelectItem value={"1"}>One</SearchSelectItem>
-        <SearchSelectItem value={"30"}>Thirty</SearchSelectItem>
-        <SearchSelectItem value={"33"}>Thirtythree</SearchSelectItem>
+        <SearchSelectItem value="1">One</SearchSelectItem>
+        <SearchSelectItem value="2">Two</SearchSelectItem>
+        <SearchSelectItem value="3">Three</SearchSelectItem>
+        <SearchSelectItem value="4">Four</SearchSelectItem>
+        <SearchSelectItem value="5">Five</SearchSelectItem>
+        <SearchSelectItem value="6">Six</SearchSelectItem>
+        <SearchSelectItem value="7">Seven</SearchSelectItem>
+        <SearchSelectItem value="8">Eight</SearchSelectItem>
+        <SearchSelectItem value="9">Nine</SearchSelectItem>
+        <SearchSelectItem value="10">Ten</SearchSelectItem>
       </SearchSelect>
       <Button onClick={() => setValue("")}>Reset</Button>
       <Button onClick={() => setValue("1")}>One</Button>