Merge pull request #71 from NeuroNexul/fix/scroll

Fix/scroll: Fixed visual glitch in Scrollable Select Component
ruru-m07 · Sep 19, 2024 · bbf4024 · bbf4024
2 parents 4b6070a + 3b8d236
commit bbf4024
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 14 deletions.
diff --git a/apps/www/components/selectLargeData.tsx b/apps/www/components/selectLargeData.tsx
@@ -6,8 +6,6 @@ import {
   SelectGroup,
   SelectItem,
   SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
   SelectSeparator,
 } from "ruru-ui/components/select";
 
@@ -22,13 +20,11 @@ const SelectCountries = () => {
           <SelectGroup>
             <SelectLabel>Fruits</SelectLabel>
             <SelectSeparator />
-            <SelectScrollUpButton />
             {Array.from({ length: 50 }, (_, index) => (
               <SelectItem key={index} value={String(index)}>
                 Ruru-UI-V{index}
               </SelectItem>
             ))}
-            <SelectScrollDownButton />
           </SelectGroup>
         </SelectContent>
       </Select>

diff --git a/apps/www/content/docs/components/select.mdx b/apps/www/content/docs/components/select.mdx
@@ -257,18 +257,16 @@ export function DefaultValueSelect() {
 </Tab>
 </Tabs>
 
-### ScrollDownButton and ScrollUpButton
+### Scrollable
 
-You can add scroll buttons to the `Select` component by using the `SelectScrollDownButton` and `SelectScrollUpButton` components.
+When the content in the Select component exceeds the maximum height, it becomes scrollable, adding `ScrollUpButton` and `ScrollDownButton` to help users easily navigate through the options.
 
 <Tabs items={["Preview", "Code"]}>
 <Tab className={"flex justify-center"} value="Preview">
 <SelectCountries />
 </Tab>
 <Tab className={"-mt-8"} value="Code">
 ```tsx
-// [!code word:SelectScrollDownButton]
-// [!code word:SelectScrollUpButton]
 import {
   Select,
   SelectContent,
@@ -277,8 +275,6 @@ import {
   SelectGroup,
   SelectItem,
   SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
   SelectSeparator,
 } from "ruru-ui/components/select";
 
@@ -293,13 +289,11 @@ const SelectCountries = () => {
           <SelectGroup>
             <SelectLabel>Fruits</SelectLabel>
             <SelectSeparator />
-            <SelectScrollUpButton />
             {Array.from({ length: 50 }, (_, index) => (
               <SelectItem key={index} value={String(index)}>
                 Ruru-UI-V{index}
               </SelectItem>
             ))}
-            <SelectScrollDownButton />
           </SelectGroup>
         </SelectContent>
       </Select>

diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
@@ -121,7 +121,7 @@ const SelectScrollUpButton = React.forwardRef<
   <SelectPrimitive.ScrollUpButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1",
+      "flex cursor-default items-center justify-center py-1 w-full absolute top-0 bg-popover z-10",
       className,
     )}
     {...props}
@@ -138,7 +138,7 @@ const SelectScrollDownButton = React.forwardRef<
   <SelectPrimitive.ScrollDownButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1",
+      "flex cursor-default items-center justify-center py-1 w-full absolute bottom-0 bg-popover z-10",
       className,
     )}
     {...props}