refactor(console): use overlay scrollbar in dropdown (#3035)

packages/console/src/components/Dropdown/DropdownItem.module.scss

@@ -3,7 +3,6 @@
 .item {
   padding: _.unit(2);
   border-radius: _.unit(2);
-  list-style: none;
   font: var(--font-body-medium);
   cursor: pointer;
   display: flex;

packages/console/src/components/Dropdown/DropdownItem.tsx

@@ -6,7 +6,7 @@ import { onKeyDownHandler } from '@/utilities/a11y';
 import * as styles from './DropdownItem.module.scss';
 
 type Props = {
-  onClick?: (event: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>) => void;
+  onClick?: (event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => void;
   className?: string;
   children: ReactNode | Record<string, unknown>;
   icon?: ReactNode;
@@ -22,16 +22,16 @@ const DropdownItem = ({
   iconClassName,
   type = 'default',
 }: Props) => (
-  <li
+  <div
+    className={classNames(styles.item, styles[type], className)}
     role="menuitem"
     tabIndex={0}
-    className={classNames(styles.item, styles[type], className)}
     onKeyDown={onKeyDownHandler(onClick)}
     onClick={onClick}
   >
     {icon && <span className={classNames(styles.icon, iconClassName)}>{icon}</span>}
     {children}
-  </li>
+  </div>
 );
 
 export default DropdownItem;

packages/console/src/components/Dropdown/index.module.scss

@@ -29,8 +29,3 @@
   position: fixed;
   inset: 0;
 }
-
-.list {
-  margin: 0;
-  overflow-y: auto;
-}

packages/console/src/components/Dropdown/index.tsx

@@ -7,6 +7,7 @@ import usePosition from '@/hooks/use-position';
 import type { HorizontalAlignment } from '@/types/positioning';
 import { onKeyDownHandler } from '@/utilities/a11y';
 
+import OverlayScrollbar from '../OverlayScrollbar';
 import * as styles from './index.module.scss';
 
 export { default as DropdownItem } from './DropdownItem';
@@ -65,15 +66,15 @@ const Dropdown = ({
     >
       <div ref={overlayRef} className={styles.dropdownContainer}>
         {title && <div className={classNames(styles.title, titleClassName)}>{title}</div>}
-        <ul
-          className={classNames(styles.list, className)}
+        <OverlayScrollbar
+          className={className}
           role="menu"
           tabIndex={0}
           onClick={onClose}
           onKeyDown={onKeyDownHandler({ Enter: onClose, Esc: onClose })}
         >
           {children}
-        </ul>
+        </OverlayScrollbar>
       </div>
     </ReactModal>
   );

packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/AddLanguageSelector.module.scss

@@ -27,12 +27,10 @@
     overflow-y: auto;
     box-shadow: var(--shadow-2);
 
-
     .dropDownItem {
       width: 100%;
       border-radius: _.unit(2);
       padding: _.unit(2);
-      list-style: none;
       cursor: pointer;
       font: var(--font-body-medium);
 

packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/AddLanguageSelector.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 import Plus from '@/assets/images/plus.svg';
 import SearchIcon from '@/assets/images/search.svg';
 import Button from '@/components/Button';
+import OverlayScrollbar from '@/components/OverlayScrollbar';
 import TextInput from '@/components/TextInput';
 import { onKeyDownHandler } from '@/utilities/a11y';
 
@@ -89,9 +90,9 @@ const AddLanguageSelector = ({ options, onSelect }: Props) => {
         )}
       </div>
       {isDropDownOpen && filteredOptions.length > 0 && (
-        <ul className={style.dropDown}>
+        <OverlayScrollbar className={style.dropDown}>
           {filteredOptions.map((languageTag) => (
-            <li
+            <div
               key={languageTag}
               role="tab"
               tabIndex={0}
@@ -105,9 +106,9 @@ const AddLanguageSelector = ({ options, onSelect }: Props) => {
             >
               <div className={style.languageName}>{uiLanguageNameMapping[languageTag]}</div>
               <div className={style.languageTag}>{languageTag}</div>
-            </li>
+            </div>
           ))}
-        </ul>
+        </OverlayScrollbar>
       )}
     </div>
   );

packages/integration-tests/src/tests/ui/smoke.test.ts

@@ -55,7 +55,9 @@ describe('smoke testing', () => {
     // Try awaiting for 500ms before clicking sign-out button
     await page.waitForTimeout(500);
 
-    const signOutButton = await page.waitForSelector('.ReactModalPortal ul li');
+    const signOutButton = await page.waitForSelector(
+      '.ReactModalPortal div[class$=dropdownContainer] div[class$=dropdownItem]'
+    );
     const navigation = page.waitForNavigation({ waitUntil: 'networkidle0' });
     await signOutButton.click();
     await navigation;