From badeddfa800ffcbcf8d16ffff14c81fd318c8e41 Mon Sep 17 00:00:00 2001
From: Matthias <mprost@scaleway.com>
Date: Fri, 20 Dec 2024 10:03:47 +0100
Subject: [PATCH 1/2] fix(Modal): remove unecessary stop propagation

---
 .changeset/gorgeous-jokes-give.md             |  5 +++
 .../__stories__/WithSelectInput.stories.tsx   | 39 +++++++++++++++++++
 .../Modal/__stories__/index.stories.tsx       |  1 +
 .../components/Modal/components/Dialog.tsx    | 15 ++++---
 4 files changed, 52 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/gorgeous-jokes-give.md
 create mode 100644 packages/ui/src/components/Modal/__stories__/WithSelectInput.stories.tsx

diff --git a/.changeset/gorgeous-jokes-give.md b/.changeset/gorgeous-jokes-give.md
new file mode 100644
index 0000000000..32676782a7
--- /dev/null
+++ b/.changeset/gorgeous-jokes-give.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Fix `<Modal />` stop propagation so you can close `<SelectInputV2 />` within it
diff --git a/packages/ui/src/components/Modal/__stories__/WithSelectInput.stories.tsx b/packages/ui/src/components/Modal/__stories__/WithSelectInput.stories.tsx
new file mode 100644
index 0000000000..f79ff11fc2
--- /dev/null
+++ b/packages/ui/src/components/Modal/__stories__/WithSelectInput.stories.tsx
@@ -0,0 +1,39 @@
+import type { StoryFn } from '@storybook/react'
+import { Modal } from '..'
+import { Button } from '../../Button'
+import { SelectInputV2 } from '../../SelectInputV2'
+
+const OPTIONS = [
+  {
+    label: 'Option 1',
+    value: 'option-1',
+  },
+  {
+    label: 'Option 2',
+    value: 'option-2',
+  },
+  {
+    label: 'Option 3',
+    value: 'option-3',
+  },
+]
+
+export const WithSelectInput: StoryFn = props => (
+  <Modal disclosure={<Button>Open Modal with SelectInput</Button>} {...props}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
+      <SelectInputV2
+        label="Choose an option"
+        name="example"
+        options={OPTIONS}
+      />
+    </div>
+  </Modal>
+)
+WithSelectInput.parameters = {
+  docs: {
+    description: {
+      story:
+        'Having a select input inside a modal is a common use case and shows you how to modal and select input can work together.',
+    },
+  },
+}
diff --git a/packages/ui/src/components/Modal/__stories__/index.stories.tsx b/packages/ui/src/components/Modal/__stories__/index.stories.tsx
index f6b6e5fc7d..50c282032a 100644
--- a/packages/ui/src/components/Modal/__stories__/index.stories.tsx
+++ b/packages/ui/src/components/Modal/__stories__/index.stories.tsx
@@ -17,6 +17,7 @@ export { HideOnEsc } from './HideOnEsc.stories'
 export { IsClosable } from './IsClosable.stories'
 export { WithDisclosureFunction } from './WithDisclosureFunction.stories'
 export { WithDisclosureBeingANativeElement } from './WithDisclosureBeingANativeElement.stories'
+export { WithSelectInput } from './WithSelectInput.stories'
 export { FunctionChildren } from './FunctionChildren.stories'
 export { WithTooltip } from './WithTooltip.stories'
 export { AutoFocus } from './AutoFocus.stories'
diff --git a/packages/ui/src/components/Modal/components/Dialog.tsx b/packages/ui/src/components/Modal/components/Dialog.tsx
index ad90008d1d..7c52f26364 100644
--- a/packages/ui/src/components/Modal/components/Dialog.tsx
+++ b/packages/ui/src/components/Modal/components/Dialog.tsx
@@ -182,11 +182,6 @@ export const Dialog = ({
     event.stopPropagation()
   }, [])
 
-  // Stop click to prevent unexpected dialog close
-  const stopClick: MouseEventHandler = useCallback(event => {
-    event.stopPropagation()
-  }, [])
-
   // handle key up : used when having inputs in modals - useful for hideOnEsc
   const handleKeyUp: KeyboardEventHandler = useCallback(
     event => {
@@ -202,7 +197,13 @@ export const Dialog = ({
   const handleClose: MouseEventHandler = useCallback(
     event => {
       event.stopPropagation()
-      if (hideOnClickOutside) {
+
+      // if the user actually click outside of modal
+      if (
+        hideOnClickOutside &&
+        dialogRef.current &&
+        !dialogRef.current.contains(event.target as Node)
+      ) {
         onCloseRef.current()
       } else {
         // Because overlay is not focusable we can't handle hideOnEsc properly
@@ -306,10 +307,8 @@ export const Dialog = ({
         data-placement={placement}
         data-size={size}
         open
-        onClick={stopClick}
         onCancel={stopCancel}
         onClose={stopCancel}
-        onMouseDown={stopClick}
         aria-modal
         ref={dialogRef}
         tabIndex={0}

From 466039c495ec43c3fdd09895cf52a01381d18a40 Mon Sep 17 00:00:00 2001
From: Matthias <mprost@scaleway.com>
Date: Fri, 20 Dec 2024 10:13:36 +0100
Subject: [PATCH 2/2] docs: add more example in storybook

---
 .../Modal/__stories__/NestedModal.stories.tsx | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/ui/src/components/Modal/__stories__/NestedModal.stories.tsx b/packages/ui/src/components/Modal/__stories__/NestedModal.stories.tsx
index f5202350b6..1d79991447 100644
--- a/packages/ui/src/components/Modal/__stories__/NestedModal.stories.tsx
+++ b/packages/ui/src/components/Modal/__stories__/NestedModal.stories.tsx
@@ -1,8 +1,24 @@
 import type { StoryFn } from '@storybook/react'
 import { Button } from '../../Button'
+import { SelectInputV2 } from '../../SelectInputV2'
 import { Stack } from '../../Stack'
 import { Modal } from '../index'
 
+const OPTIONS = [
+  {
+    label: 'Option 1',
+    value: 'option-1',
+  },
+  {
+    label: 'Option 2',
+    value: 'option-2',
+  },
+  {
+    label: 'Option 3',
+    value: 'option-3',
+  },
+]
+
 export const NestedModal: StoryFn = props => (
   <Modal {...props} disclosure={<Button>Open Parent Modal</Button>}>
     <Stack gap={1}>
@@ -32,6 +48,11 @@ export const NestedModal: StoryFn = props => (
             esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
             cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
+            <SelectInputV2
+              label="Choose an option"
+              name="example"
+              options={OPTIONS}
+            />
           </Modal>
         </Stack>
       </Modal>