fix: remove modal exception for outside click

scaleway · Oct 24, 2024 · e83de16 · e83de16
1 parent 26778e0
commit e83de16
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 68 deletions.
diff --git a/packages/ui/src/components/SelectInputV2/Dropdown.tsx b/packages/ui/src/components/SelectInputV2/Dropdown.tsx
@@ -220,23 +220,14 @@ const handleClickOutside = (
   refSelect: RefObject<HTMLDivElement>,
   onSearch: Dispatch<SetStateAction<DataType>>,
   options: DataType,
-  isInsideModal: boolean,
 ) => {
   if (
     ref.current &&
     !ref.current.contains(event.target as Node) &&
     !refSelect.current?.contains(event.target as Node)
   ) {
-    if (isInsideModal) {
-      // Timeout when the selectInput is inside a modal to not close both the modal and the dropdown if it scrolls
-      setTimeout(() => {
-        setIsDropdownVisibile(false) // hide dropdown when clicking outside of the dropdown
-        onSearch(options) // reset displayed options to default when dropdown is hidden
-      }, 100)
-    } else {
-      setIsDropdownVisibile(false)
-      onSearch(options)
-    }
+    setIsDropdownVisibile(false)
+    onSearch(options)
   }
 }
 
@@ -748,33 +739,16 @@ export const Dropdown = ({
       setSearch('')
     }
 
-    const modalElement = document.getElementById('backdrop-modal')
-
-    if (modalElement) {
-      modalElement.addEventListener('mousedown', event =>
-        handleClickOutside(
-          event,
-          ref,
-          setIsDropdownVisible,
-          refSelect,
-          onSearch,
-          options,
-          true,
-        ),
-      )
-    } else {
-      document.addEventListener('mousedown', event =>
-        handleClickOutside(
-          event,
-          ref,
-          setIsDropdownVisible,
-          refSelect,
-          onSearch,
-          options,
-          false,
-        ),
-      )
-    }
+    document.addEventListener('mousedown', event =>
+      handleClickOutside(
+        event,
+        ref,
+        setIsDropdownVisible,
+        refSelect,
+        onSearch,
+        options,
+      ),
+    )
 
     if (!searchable) {
       document.addEventListener('keydown', event =>
@@ -791,31 +765,16 @@ export const Dropdown = ({
     }
 
     return () => {
-      if (!modalElement) {
-        document.removeEventListener('mousedown', event =>
-          handleClickOutside(
-            event,
-            ref,
-            setIsDropdownVisible,
-            refSelect,
-            onSearch,
-            options,
-            false,
-          ),
-        )
-      } else {
-        modalElement.addEventListener('mousedown', event =>
-          handleClickOutside(
-            event,
-            ref,
-            setIsDropdownVisible,
-            refSelect,
-            onSearch,
-            options,
-            true,
-          ),
-        )
-      }
+      document.removeEventListener('mousedown', event =>
+        handleClickOutside(
+          event,
+          ref,
+          setIsDropdownVisible,
+          refSelect,
+          onSearch,
+          options,
+        ),
+      )
 
       if (!searchable) {
         document.removeEventListener('keydown', event =>

diff --git a/packages/ui/src/components/SelectInputV2/__stories__/EmptyState.stories.tsx b/packages/ui/src/components/SelectInputV2/__stories__/EmptyState.stories.tsx
@@ -39,7 +39,6 @@ export const EmptyState: StoryFn<typeof SelectInputV2> = args => (
       {...args}
       emptyState={
         <EmptyStateComponent
-          bordered
           description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
           image={<DynamicIllustration name="empty" width="120px" />}
           learnMore={{

diff --git a/packages/ui/src/components/SelectInputV2/__stories__/Modal.stories.tsx b/packages/ui/src/components/SelectInputV2/__stories__/Modal.stories.tsx
@@ -16,9 +16,7 @@ export const Modal: StoryFn<typeof SelectInputV2> = args => (
         Title
       </Text>
       <Text as="p" variant="body" sentiment="neutral">
-        This is an example of SelectInput inside a modal. Click outside the
-        select input to close the SelectInput and outside the modal to close
-        both the modal and the selectInput.
+        This is an example of SelectInput inside a modal.
       </Text>
       <SelectInputV2 {...args} label="Label" />
       <Text as="p" variant="body" sentiment="neutral">

diff --git a/packages/ui/src/components/SelectInputV2/__stories__/Searchable.stories.tsx b/packages/ui/src/components/SelectInputV2/__stories__/Searchable.stories.tsx
@@ -34,7 +34,7 @@ Searchable.parameters = {
   docs: {
     description: {
       story:
-        'Add a search bar in the dropdown to search through the different options. If there are less than 6 options, the search bar will **not** appear.',
+        'Add a search bar in the dropdown to search through the different options. If there are less than 6 options, the search bar will **not** appear, even if the prop is set to `true`.',
     },
   },
 }