fix(popup): handle auto scroll and remove useless deps effect

Signed-off-by: aphilibeaux <[email protected]>

Author: philibea

packages/ui/src/components/DateInput/components/Popup.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { Dispatch, ReactNode, RefObject, SetStateAction } from 'react'
-import { useEffect, useRef } from 'react'
+import { useLayoutEffect, useRef } from 'react'
 import { Popup } from '../../Popup'
 import { POPUP_WIDTH } from '../constants'
 import { dateinputPopup } from './styles.css'
@@ -38,7 +38,7 @@ export const CalendarPopup = ({
 }: PopupProps) => {
   const ref = useRef<HTMLDivElement>(null)
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     document.addEventListener('mousedown', event =>
       handleClickOutside(event, ref, setVisible, refInput),
     )

packages/ui/src/components/SelectInput/components/Dropdown.tsx

@@ -2,17 +2,20 @@
 
 import { useTheme } from '@ultraviolet/themes'
 import type {
+  ChangeEvent,
   ComponentProps,
   Dispatch,
   KeyboardEvent,
+  MouseEvent,
   ReactNode,
   RefObject,
   SetStateAction,
 } from 'react'
 import {
+  use,
   useCallback,
-  useContext,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -219,13 +222,26 @@ const CreateDropdown = ({
     )
   }
 
-  const handleClick = (clickedOption: OptionType, group?: string) => {
+  const handleClick = ({
+    clickedOption,
+    group,
+    event,
+  }: {
+    clickedOption: OptionType
+    group?: string
+    event:
+      | MouseEvent<HTMLDivElement>
+      | KeyboardEvent<HTMLDivElement>
+      | ChangeEvent<HTMLDivElement>
+  }) => {
+    event.stopPropagation()
+
     setSelectedData({ clickedOption, group, type: 'selectOption' })
     if (multiselect) {
       if (selectedData.selectedValues.includes(clickedOption.value)) {
         onChange?.(
           selectedData.selectedValues.filter(
-            val => val !== clickedOption.value,
+            value => value !== clickedOption.value,
           ),
         )
       } else {
@@ -420,16 +436,25 @@ const CreateDropdown = ({
                     data-testid={`option-${option.value}`}
                     id={`option-${indexOption}`}
                     key={option.value}
-                    onClick={() => {
+                    onClick={event => {
                       if (!option.disabled) {
-                        handleClick(option, group)
+                        handleClick({
+                          clickedOption: option,
+                          event,
+                          group,
+                        })
+                      }
+                    }}
+                    onKeyDown={event => {
+                      const shouldClick = [' ', 'Enter'].includes(event.key)
+                      if (shouldClick) {
+                        handleClick({
+                          clickedOption: option,
+                          event,
+                          group,
+                        })
                       }
                     }}
-                    onKeyDown={event =>
-                      [' ', 'Enter'].includes(event.key)
-                        ? handleClick(option, group)
-                        : null
-                    }
                     ref={
                       option.value === defaultSearchValue ||
                       option.searchText === defaultSearchValue
@@ -447,9 +472,13 @@ const CreateDropdown = ({
                         }
                         className={dropdownCheckbox}
                         disabled={option.disabled}
-                        onChange={() => {
+                        onChange={event => {
                           if (!option.disabled) {
-                            handleClick(option, group)
+                            handleClick({
+                              clickedOption: option,
+                              event,
+                              group,
+                            })
                           }
                         }}
                         tabIndex={-1}
@@ -548,14 +577,23 @@ const CreateDropdown = ({
               data-testid={`option-${option.value}`}
               id={`option-${index}`}
               key={option.value}
-              onClick={() => {
+              onClick={event => {
                 if (!option.disabled) {
-                  handleClick(option)
+                  handleClick({
+                    clickedOption: option,
+                    event,
+                  })
+                }
+              }}
+              onKeyDown={event => {
+                const shouldClick = [' ', 'Enter'].includes(event.key)
+                if (shouldClick) {
+                  handleClick({
+                    clickedOption: option,
+                    event,
+                  })
                 }
               }}
-              onKeyDown={event =>
-                [' ', 'Enter'].includes(event.key) ? handleClick(option) : null
-              }
               ref={
                 option.value === defaultSearchValue ||
                 option.searchText === defaultSearchValue
@@ -573,9 +611,12 @@ const CreateDropdown = ({
                   }
                   className={dropdownCheckbox}
                   disabled={option.disabled}
-                  onChange={() => {
+                  onChange={event => {
                     if (!option.disabled) {
-                      handleClick(option)
+                      handleClick({
+                        clickedOption: option,
+                        event,
+                      })
                     }
                   }}
                   tabIndex={-1}
@@ -637,35 +678,41 @@ export const Dropdown = ({
   const [maxWidth, setWidth] = useState<string | number>(
     refSelect.current?.offsetWidth ?? '100%',
   )
-  const modalContext = useContext(ModalContext)
+  const modalContext = use(ModalContext)
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (refSelect.current && isDropdownVisible) {
       const position =
         refSelect.current.getBoundingClientRect().bottom +
         DROPDOWN_MAX_HEIGHT +
         Number(theme.sizing[INPUT_SIZE_HEIGHT[size]].replace('rem', '')) * 16 +
         Number.parseInt(theme.space['5'], 10)
       const overflow = position - window.innerHeight + 32
+
       if (overflow > 0 && modalContext) {
         const currentModal = modalContext.openedModals[0]
         const modalElement = currentModal?.ref.current
 
         if (modalElement) {
-          const parentElement = modalElement.parentNode as HTMLElement
-          if (parentElement) {
+          const parentElement = modalElement.parentNode
+
+          if (parentElement instanceof HTMLElement) {
             parentElement.scrollBy({
               behavior: 'smooth',
               top: overflow,
             })
+          } else {
+            modalElement.scrollBy({
+              behavior: 'smooth',
+              top: overflow,
+            })
           }
         } else {
           window.scrollBy({ behavior: 'smooth', top: overflow })
         }
       }
     }
-    // oxlint-disable react/exhaustive-deps
-  }, [isDropdownVisible, refSelect, size, ref.current])
+  }, [isDropdownVisible, refSelect, size, modalContext, theme])
 
   const resizeDropdown = useCallback(() => {
     if (
@@ -696,33 +743,24 @@ export const Dropdown = ({
       setSearch('')
     }
 
-    if (!searchable) {
-      document.addEventListener('keydown', event =>
-        handleKeyDown(
-          event,
-          ref,
-          options,
-          searchBarActive,
-          setSearch,
-          setDefaultSearch,
-          search,
-        ),
+    const eventKeydown = (event: globalThis.KeyboardEvent) =>
+      handleKeyDown(
+        event,
+        ref,
+        options,
+        searchBarActive,
+        setSearch,
+        setDefaultSearch,
+        search,
       )
+
+    if (!searchable) {
+      document.addEventListener('keydown', eventKeydown)
     }
 
     return () => {
       if (!searchable) {
-        document.removeEventListener('keydown', event =>
-          handleKeyDown(
-            event,
-            ref,
-            options,
-            searchBarActive,
-            setSearch,
-            setDefaultSearch,
-            search,
-          ),
-        )
+        document.removeEventListener('keydown', eventKeydown)
       }
     }
   }, [

packages/ui/src/components/TagList/index.tsx

@@ -223,7 +223,7 @@ export const TagList = ({
         const visibleTagsCopy = visibleTags.filter(
           (_, index) => index < visibleTags.length - 1,
         )
-        const tagToMove = visibleTags[visibleTags.length - 1] ?? ''
+        const tagToMove = visibleTags.at(-1) ?? ''
 
         setVisibleTags(visibleTagsCopy)
         setHiddenTags([tagToMove, ...hiddenTags])

packages/ui/src/components/VerificationCode/index.tsx

@@ -133,7 +133,7 @@ export const VerificationCode = ({
       const prevIndex = index - 1
       const nextIndex = index + 1
       const first = inputRefs[0]
-      const last = inputRefs[inputRefs.length - 1]
+      const last = inputRefs.at(-1)
       const prev = inputRefs[prevIndex]
       const next = inputRefs[nextIndex]
       const vals = [...values]