Merge pull request #408 from qoretechnologies/bugfix/esc-close-bug-co…

…llection Fix hidden modals being added to the escapable modals list
qoretechnologies · Oct 30, 2024 · d629e5a · d629e5a
2 parents 442862f + ebbd277
commit d629e5a
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.48.6",
+  "version": "0.48.7",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -46,12 +46,14 @@ export const ReqoreModal = ({ width = '80vw', height = 'auto', ...rest }: IReqor
   }, [escClosableModals, isEscClosable]);
 
   useEffect(() => {
-    add(id);
+    if (rest.isOpen) {
+      add(id);
+    }
 
     return () => {
       remove(id);
     };
-  }, [id]);
+  }, [id, rest.isOpen]);
 
   return (
     <ReqoreDrawer

diff --git a/src/stories/Modal/Modal.stories.tsx b/src/stories/Modal/Modal.stories.tsx
@@ -7,7 +7,7 @@ import { useMount } from 'react-use';
 import { _testsWaitForText } from '../../../__tests__/utils';
 import { IReqoreModalProps } from '../../components/Modal';
 import { sleep } from '../../helpers/utils';
-import { ReqoreModal, ReqorePanel, useReqoreProperty } from '../../index';
+import { ReqoreCollection, ReqoreModal, ReqorePanel, useReqoreProperty } from '../../index';
 import { StoryMeta } from '../utils';
 import { FlatArg, IntentArg, argManager } from '../utils/args';
 
@@ -434,22 +434,48 @@ export const EscKeyClosestOnlyTopModal: Story = {
           pursuit our but. Lasted hunted enough an up seeing in lively letter. Had judgment out
           opinions property the supplied.
         </ReqoreModal>
-        <ReqoreModal
-          {...args}
-          label='A second dialog'
-          isOpen={secondIsOpen}
-          closeOnEscPress
-          onClose={() => setSecondIsOpen(false)}
-          bottomActions={[
-            { label: 'Confirm', intent: 'success', position: 'right' },
-            { label: 'Cancel', intent: 'danger', position: 'left' },
-          ]}
-        >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-          ut labore et dolore magna aliqua. Sit amet purus gravida quis blandit turpis cursus in
-          hac. Ultricies lacus sed turpis tincidunt. Ac tincidunt vitae semper quis lectus nulla at.
-          Aliquam vestibulum morbi blandit cursus risus at ultrices. Risus feugiat in ante metus
-          dictum. Enim blandit volutpat maecenas volutpat.
+        {secondIsOpen && (
+          <ReqoreModal
+            {...args}
+            label='A second dialog'
+            isOpen
+            closeOnEscPress
+            onClose={() => setSecondIsOpen(false)}
+            bottomActions={[
+              { label: 'Confirm', intent: 'success', position: 'right' },
+              { label: 'Cancel', intent: 'danger', position: 'left' },
+            ]}
+          >
+            <ReqoreCollection
+              maxItemHeight={200}
+              filterable
+              size='big'
+              sortable
+              padded={false}
+              showSelectedFirst
+              selectedIcon='CheckLine'
+              fill
+              className='q-select-dialog'
+              inputProps={{
+                rightIcon: 'KeyboardFill',
+                focusRules: {
+                  type: 'keypress',
+                  shortcut: 'letters',
+                  clearOnFocus: true,
+                },
+              }}
+              items={[
+                { label: 'Item 1' },
+                { label: 'Item 2' },
+                { label: 'Item 3' },
+                { label: 'Item 4' },
+              ]}
+            />
+          </ReqoreModal>
+        )}
+        <ReqoreModal label='Hidden modal' closeOnEscPress>
+          {' '}
+          I am hidden{' '}
         </ReqoreModal>
       </>
     );