fix(Modal): remove id on modal and select input scrolll (#5391)

Author: matthprost

.changeset/tasty-tables-type.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Fix `<Modal />` and `<SelectInput />` together scroll down not using id but context

packages/ui/src/components/Drawer/__tests__/__snapshots__/index.test.tsx.snap

@@ -912,7 +912,6 @@ exports[`Drawer > renders with disclosure and onClose 1`] = `
       data-open="true"
       data-testid="test-backdrop"
       data-visible="true"
-      id="backdrop-modal"
     >
       <dialog
         aria-label="drawer-test"

packages/ui/src/components/Modal/ModalProvider.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { ReactNode, Ref } from 'react'
+import type { ReactNode, RefObject } from 'react'
 import {
   createContext,
   useCallback,
@@ -11,7 +11,7 @@ import {
 
 type ModalObject = {
   id: string
-  ref: Ref<HTMLDialogElement>
+  ref: RefObject<HTMLDialogElement | null>
 }
 
 type ModalContextValues = {

packages/ui/src/components/Modal/__tests__/__snapshots__/index.test.tsx.snap

@@ -526,7 +526,6 @@ exports[`Modal > renders with disclosure and onClose 1`] = `
       data-open="true"
       data-testid="test-backdrop"
       data-visible="true"
-      id="backdrop-modal"
     >
       <dialog
         aria-label="modal-test"

packages/ui/src/components/Modal/components/Dialog.tsx

@@ -81,7 +81,7 @@ export const StyledDialog = styled('dialog', {
   width: ${MODAL_WIDTH.medium}rem;
   box-shadow: ${({ theme }) =>
     `${theme.shadows.overlay[0]}, ${theme.shadows.overlay[1]}`};
-  
+
 
 
   ${Object.entries(MODAL_WIDTH).map(
@@ -310,7 +310,6 @@ export const Dialog = ({
       data-open
       data-testid={dataTestId ? `${dataTestId}-backdrop` : undefined}
       data-visible={isVisible}
-      id="backdrop-modal"
       onClick={handleClose}
       onFocus={stopFocus}
     >

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

@@ -10,8 +10,16 @@ import type {
   RefObject,
   SetStateAction,
 } from 'react'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import { Checkbox } from '../Checkbox'
+import { ModalContext } from '../Modal/ModalProvider'
 import { Popup } from '../Popup'
 import { Skeleton } from '../Skeleton'
 import { Stack } from '../Stack'
@@ -708,6 +716,7 @@ export const Dropdown = ({
   const ref = useRef<HTMLDivElement>(null)
   const [search, setSearch] = useState<string>('')
   const [maxWidth, setWidth] = useState<string | number>()
+  const modalContext = useContext(ModalContext)
 
   useEffect(() => {
     if (refSelect.current && isDropdownVisible) {
@@ -716,12 +725,19 @@ export const Dropdown = ({
         DROPDOWN_MAX_HEIGHT +
         Number(theme.sizing[INPUT_SIZE_HEIGHT[size]].replace('rem', '')) * 16 +
         Number.parseInt(theme.space['5'], 10)
-      const overflow = position - window.innerHeight
-      if (overflow > 0) {
-        const modalElement = document.getElementById('backdrop-modal')
+      const overflow = position - window.innerHeight + 32
+      if (overflow > 0 && modalContext) {
+        const currentModal = modalContext.openedModals[0]
+        const modalElement = currentModal?.ref.current
 
         if (modalElement) {
-          modalElement.scrollBy({ behavior: 'smooth', top: overflow })
+          const parentElement = modalElement.parentNode as HTMLElement
+          if (parentElement) {
+            parentElement.scrollBy({
+              behavior: 'smooth',
+              top: overflow,
+            })
+          }
         } else window.scrollBy({ behavior: 'smooth', top: overflow })
       }
     }