fix(Modal): remove unecessary stop propagation

.changeset/gorgeous-jokes-give.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Fix `<Modal />` stop propagation so you can close `<SelectInputV2 />` within it

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.',
+    },
+  },
+}

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'

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 => {
@@ -201,10 +196,16 @@ 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)
+      ) {
+        event.stopPropagation()
         onCloseRef.current()
       } else {
+        event.stopPropagation()
         // Because overlay is not focusable we can't handle hideOnEsc properly
         dialogRef.current?.focus()
       }
@@ -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}