fix(Modal): select input not closing inside modal when clicking outside

.changeset/brave-guests-thank.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Fix `<SelectInputV2 />` within `<Modal />` to correctly close when you click outside

e2e/tests/componentsWithinModal/test.spec.ts

@@ -3,6 +3,8 @@ import { expect, test } from '@playwright/test'
 test('open modal, fill text inputs, close modal', async ({ page, baseURL }) => {
   await page.goto(`${baseURL}/componentsWithinModal`)
   await page.getByRole('button', { name: 'Open Modal' }).click()
+  await expect(page.locator('dialog')).toBeVisible()
+
   await page.getByLabel('First name').click()
   await page.getByLabel('First name').fill('Test First Name')
 
@@ -27,6 +29,7 @@ test('open modal, select an option, open nested modal through select input, clos
 }) => {
   await page.goto(`${baseURL}/componentsWithinModal`)
   await page.getByRole('button', { name: 'Open Modal' }).click()
+  await expect(page.locator('dialog')).toBeVisible()
 
   await page.getByTestId('select-input-color').click()
   await page.getByTestId('option-stack-red').locator('div').click()
@@ -42,3 +45,18 @@ test('open modal, select an option, open nested modal through select input, clos
   await page.getByLabel('close').click()
   await expect(page.locator('dialog')).not.toBeVisible()
 })
+
+test('open modal, click on select input, check that it opens, click outside, check that select input closes and modal is still open', async ({
+  page,
+  baseURL,
+}) => {
+  await page.goto(`${baseURL}/componentsWithinModal`)
+  await page.getByRole('button', { name: 'Open Modal' }).click()
+  await expect(page.locator('dialog')).toBeVisible()
+
+  await page.getByTestId('select-input-color').click()
+  await page.getByTestId('option-stack-red').locator('div').isVisible()
+  await page.getByLabel('First name').click()
+  await page.getByTestId('option-stack-red').locator('div').isHidden()
+  await expect(page.locator('dialog')).toBeVisible()
+})

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

@@ -182,6 +182,16 @@ export const Dialog = ({
     event.stopPropagation()
   }, [])
 
+  // We need to reverse the array as the last opened modal should be the first to be with normal size
+  // while the first opened modal should shrink
+  const realPosition = [...openedModals].findIndex(object => object.id === id)
+  const position = [...openedModals]
+    .reverse()
+    .findIndex(object => object.id === id) // reverse method mutate array so we need to create a new array
+  const modalAbove = openedModals[realPosition + 1]
+  const currentModalHeight = dialogRef.current?.offsetHeight
+  let top = 0
+
   // handle key up : used when having inputs in modals - useful for hideOnEsc
   const handleKeyUp: KeyboardEventHandler = useCallback(
     event => {
@@ -196,18 +206,17 @@ export const Dialog = ({
 
   const handleClose: MouseEventHandler = useCallback(
     event => {
-      event.stopPropagation()
-
       // if the user actually click outside of modal
       if (
         hideOnClickOutside &&
         dialogRef.current &&
-        !dialogRef.current.contains(event.target as Node)
+        !dialogRef.current.contains(event.target as Node) &&
+        position === 0
       ) {
         onCloseRef.current()
       }
     },
-    [hideOnClickOutside],
+    [hideOnClickOutside, position],
   )
 
   // Enable focus trap inside the modal
@@ -254,16 +263,6 @@ export const Dialog = ({
     }
   }, [])
 
-  // We need to reverse the array as the last opened modal should be the first to be with normal size
-  // while the first opened modal should shrink
-  const realPosition = [...openedModals].findIndex(object => object.id === id)
-  const position = [...openedModals]
-    .reverse()
-    .findIndex(object => object.id === id) // reverse method mutate array so we need to create a new array
-  const modalAbove = openedModals[realPosition + 1]
-  const currentModalHeight = dialogRef.current?.offsetHeight
-  let top = 0
-
   if (
     modalAbove?.ref &&
     typeof modalAbove.ref === 'object' &&