fix: select should have scrollbar (#6452)

* fix: select should have scrollbar

* test: ResizeObserver mock added

---------

Co-authored-by: Caner Akdas <[email protected]>

Author: ovflowd

components/Common/Select/__tests__/index.test.mjs

@@ -10,6 +10,12 @@ describe('Select', () => {
   const label = 'Option label';
   const onChange = jest.fn();
 
+  global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+  }));
+
   it('renders the label when provided', () => {
     const { getByLabelText } = render(
       <Select

components/Common/Select/index.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
-import * as Primitive from '@radix-ui/react-select';
+import * as ScrollPrimitive from '@radix-ui/react-scroll-area';
+import * as SelectPrimitive from '@radix-ui/react-select';
 import classNames from 'classnames';
 import { useId, useMemo } from 'react';
 import type { FC } from 'react';
@@ -77,50 +78,58 @@ const Select: FC<SelectProps> = ({
         </label>
       )}
 
-      <Primitive.Root value={defaultValue} onValueChange={onChange}>
-        <Primitive.Trigger
+      <SelectPrimitive.Root value={defaultValue} onValueChange={onChange}>
+        <SelectPrimitive.Trigger
           className={styles.trigger}
           aria-label={label}
           id={id}
         >
-          <Primitive.Value placeholder={placeholder} />
+          <SelectPrimitive.Value placeholder={placeholder} />
           <ChevronDownIcon className={styles.icon} />
-        </Primitive.Trigger>
-        <Primitive.Portal>
-          <Primitive.Content
+        </SelectPrimitive.Trigger>
+
+        <SelectPrimitive.Portal>
+          <SelectPrimitive.Content
             position={inline ? 'popper' : 'item-aligned'}
             className={classNames(styles.dropdown, { [styles.inline]: inline })}
           >
-            <Primitive.Viewport>
-              {mappedValues.map(({ label, items }, key) => (
-                <Primitive.Group key={label?.toString() || key}>
-                  {label && (
-                    <Primitive.Label
-                      className={classNames(styles.item, styles.label)}
-                    >
-                      {label}
-                    </Primitive.Label>
-                  )}
-
-                  {items.map(({ value, label, iconImage, disabled }) => (
-                    <Primitive.Item
-                      key={value}
-                      value={value}
-                      disabled={disabled}
-                      className={classNames(styles.item, styles.text)}
-                    >
-                      <Primitive.ItemText>
-                        {iconImage}
-                        <span>{label}</span>
-                      </Primitive.ItemText>
-                    </Primitive.Item>
+            <ScrollPrimitive.Root type="auto">
+              <SelectPrimitive.Viewport>
+                <ScrollPrimitive.Viewport>
+                  {mappedValues.map(({ label, items }, key) => (
+                    <SelectPrimitive.Group key={label?.toString() ?? key}>
+                      {label && (
+                        <SelectPrimitive.Label
+                          className={classNames(styles.item, styles.label)}
+                        >
+                          {label}
+                        </SelectPrimitive.Label>
+                      )}
+
+                      {items.map(({ value, label, iconImage, disabled }) => (
+                        <SelectPrimitive.Item
+                          key={value}
+                          value={value}
+                          disabled={disabled}
+                          className={classNames(styles.item, styles.text)}
+                        >
+                          <SelectPrimitive.ItemText>
+                            {iconImage}
+                            <span>{label}</span>
+                          </SelectPrimitive.ItemText>
+                        </SelectPrimitive.Item>
+                      ))}
+                    </SelectPrimitive.Group>
                   ))}
-                </Primitive.Group>
-              ))}
-            </Primitive.Viewport>
-          </Primitive.Content>
-        </Primitive.Portal>
-      </Primitive.Root>
+                </ScrollPrimitive.Viewport>
+              </SelectPrimitive.Viewport>
+              <ScrollPrimitive.Scrollbar orientation="vertical">
+                <ScrollPrimitive.Thumb />
+              </ScrollPrimitive.Scrollbar>
+            </ScrollPrimitive.Root>
+          </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+      </SelectPrimitive.Root>
     </span>
   );
 };

package-lock.json

@@ -47,6 +47,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",