Merge pull request #673 from lumapps/fix/nested-clickaway

gcornut · web-flow · commit edc99ef7e7b8 · 2021-06-28T15:02:50.000+02:00
fix(click-away): fix nested click away using React ref
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   AlertDialog: props forwarding on the confirm and cancel buttons.
 
+### Fixed
+
+-   Fix Select/Dropdown inside Dialog not closing when clicking outside.
+
 ## [1.0.17][] - 2021-05-27
 
 ### Fixed
diff --git a/packages/lumx-react/src/components/dialog/Dialog.stories.tsx b/packages/lumx-react/src/components/dialog/Dialog.stories.tsx
@@ -2,7 +2,9 @@ import { mdiClose } from '@lumx/icons';
 import {
     Button,
     Checkbox,
+    DatePickerField,
     Emphasis,
+    FlexBox,
     IconButton,
     List,
     ListItem,
@@ -217,14 +219,16 @@ export const DialogWithFocusableElements = ({ theme }: any) => {
     const inputRef = useRef(null);
 
     const selectChoices = ['First item', 'Second item', 'Third item'];
-    const [value, setValue] = React.useState<string>('');
+    const [value, setValue] = React.useState<string>(selectChoices[0]);
     const [isSelectOpen, setSelectOpen] = useState(false);
     const toggleSelect = () => setSelectOpen(!isSelectOpen);
     const closeSelect = () => setSelectOpen(false);
     const selectItem = (item: any) => () => {
         closeSelect();
         setValue(item);
     };
+    const [date, setDate] = useState<Date | undefined>(new Date('2020-05-18'));
+
     return (
         <>
             {button}
@@ -258,27 +262,41 @@ export const DialogWithFocusableElements = ({ theme }: any) => {
                         label="Checkbox input"
                     />
 
-                    <Select
-                        className="lumx-spacing-margin-bottom-huge"
-                        isOpen={isSelectOpen}
-                        value={value}
-                        label="Select label"
-                        onInputClick={toggleSelect}
-                        onDropdownClose={closeSelect}
-                    >
-                        <List isClickable>
-                            {selectChoices.map((choice) => (
-                                <ListItem
-                                    key={choice}
-                                    isSelected={value === choice}
-                                    onItemSelected={selectItem(choice)}
-                                    size={Size.tiny}
-                                >
-                                    {choice}
-                                </ListItem>
-                            ))}
-                        </List>
-                    </Select>
+                    <FlexBox orientation="horizontal">
+                        <DatePickerField
+                            locale="fr"
+                            label="Start date"
+                            placeholder="Pick a date"
+                            theme={theme}
+                            onChange={setDate}
+                            value={date}
+                            nextButtonProps={{ label: 'Next month' }}
+                            previousButtonProps={{ label: 'Previous month' }}
+                        />
+
+                        <Select
+                            className="lumx-spacing-margin-left-huge"
+                            isOpen={isSelectOpen}
+                            value={value}
+                            label="Select label"
+                            onInputClick={toggleSelect}
+                            onDropdownClose={closeSelect}
+                        >
+                            <List isClickable>
+                                {selectChoices.map((choice) => (
+                                    <ListItem
+                                        key={choice}
+                                        isSelected={value === choice}
+                                        onItemSelected={selectItem(choice)}
+                                        size={Size.tiny}
+                                    >
+                                        {choice}
+                                    </ListItem>
+                                ))}
+                            </List>
+                        </Select>
+                    </FlexBox>
+
                     {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
                     <div tabIndex={0}>Focus div</div>
                 </div>
diff --git a/packages/lumx-react/src/components/dialog/Dialog.tsx b/packages/lumx-react/src/components/dialog/Dialog.tsx
@@ -160,6 +160,9 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const isVisible = useDelayedVisibility(Boolean(isOpen), DIALOG_TRANSITION_DURATION);
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const clickAwayRefs = useRef([wrapperRef]);
+
     return isOpen || isVisible
         ? createPortal(
               <div
@@ -180,7 +183,7 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
                   <div className={`${CLASSNAME}__overlay`} />
 
                   <section className={`${CLASSNAME}__container`} role="dialog" aria-modal="true" {...dialogProps}>
-                      <ClickAwayProvider callback={!preventAutoClose && handleClose} refs={[wrapperRef]}>
+                      <ClickAwayProvider callback={!preventAutoClose && handleClose} refs={clickAwayRefs}>
                           <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
                               {(header || headerChildContent) && (
                                   <header
diff --git a/packages/lumx-react/src/components/dialog/__snapshots__/Dialog.test.tsx.snap b/packages/lumx-react/src/components/dialog/__snapshots__/Dialog.test.tsx.snap
@@ -75,44 +75,65 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithFocusabl
         onChange={[Function]}
         theme="light"
       />
-      <Select
-        className="lumx-spacing-margin-bottom-huge"
-        isOpen={false}
-        label="Select label"
-        onDropdownClose={[Function]}
-        onInputClick={[Function]}
-        selectedValueRender={[Function]}
-        value=""
+      <FlexBox
+        orientation="horizontal"
       >
-        <List
-          isClickable={true}
+        <DatePickerField
+          label="Start date"
+          locale="fr"
+          nextButtonProps={
+            Object {
+              "label": "Next month",
+            }
+          }
+          onChange={[Function]}
+          placeholder="Pick a date"
+          previousButtonProps={
+            Object {
+              "label": "Previous month",
+            }
+          }
+          value={2020-05-18T00:00:00.000Z}
+        />
+        <Select
+          className="lumx-spacing-margin-left-huge"
+          isOpen={false}
+          label="Select label"
+          onDropdownClose={[Function]}
+          onInputClick={[Function]}
+          selectedValueRender={[Function]}
+          value="First item"
         >
-          <ListItem
-            isSelected={false}
-            key="First item"
-            onItemSelected={[Function]}
-            size="tiny"
-          >
-            First item
-          </ListItem>
-          <ListItem
-            isSelected={false}
-            key="Second item"
-            onItemSelected={[Function]}
-            size="tiny"
-          >
-            Second item
-          </ListItem>
-          <ListItem
-            isSelected={false}
-            key="Third item"
-            onItemSelected={[Function]}
-            size="tiny"
+          <List
+            isClickable={true}
           >
-            Third item
-          </ListItem>
-        </List>
-      </Select>
+            <ListItem
+              isSelected={true}
+              key="First item"
+              onItemSelected={[Function]}
+              size="tiny"
+            >
+              First item
+            </ListItem>
+            <ListItem
+              isSelected={false}
+              key="Second item"
+              onItemSelected={[Function]}
+              size="tiny"
+            >
+              Second item
+            </ListItem>
+            <ListItem
+              isSelected={false}
+              key="Third item"
+              onItemSelected={[Function]}
+              size="tiny"
+            >
+              Third item
+            </ListItem>
+          </List>
+        </Select>
+      </FlexBox>
       <div
         tabIndex={0}
       >
diff --git a/packages/lumx-react/src/components/lightbox/Lightbox.tsx b/packages/lumx-react/src/components/lightbox/Lightbox.tsx
@@ -98,6 +98,9 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useCallbackOnEscape(onClose);
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const clickAwayRefs = useRef([wrapperRef]);
+
     if (!isOpen && !isVisible) return null;
 
     return createPortal(
@@ -130,7 +133,7 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
                     onClick={onClose}
                 />
             )}
-            <ClickAwayProvider callback={!preventAutoClose && onClose} refs={[wrapperRef]}>
+            <ClickAwayProvider callback={!preventAutoClose && onClose} refs={clickAwayRefs}>
                 <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role="presentation">
                     {children}
                 </div>
diff --git a/packages/lumx-react/src/components/lightbox/__snapshots__/Lightbox.test.tsx.snap b/packages/lumx-react/src/components/lightbox/__snapshots__/Lightbox.test.tsx.snap
@@ -27,11 +27,13 @@ exports[`<Lightbox> Snapshots and structure should render story 'Default' 1`] =
     <ClickAwayProvider
       callback={[Function]}
       refs={
-        Array [
-          Object {
-            "current": null,
-          },
-        ]
+        Object {
+          "current": Array [
+            Object {
+              "current": null,
+            },
+          ],
+        }
       }
     >
       <div
diff --git a/packages/lumx-react/src/components/popover/Popover.tsx b/packages/lumx-react/src/components/popover/Popover.tsx
@@ -270,6 +270,9 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useFocus(focusElement?.current, isOpen && (state?.rects?.popper?.y ?? -1) >= 0);
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const clickAwayRefs = useRef([clickAwayRef, anchorRef]);
+
     return isOpen
         ? renderPopover(
               <div
@@ -282,7 +285,7 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
                   style={popoverStyle}
                   {...attributes.popper}
               >
-                  <ClickAwayProvider callback={closeOnClickAway && onClose} refs={[clickAwayRef, anchorRef]}>
+                  <ClickAwayProvider callback={closeOnClickAway && onClose} refs={clickAwayRefs}>
                       {hasArrow && <div ref={setArrowElement} className={`${CLASSNAME}__arrow`} style={styles.arrow} />}
                       {children}
                   </ClickAwayProvider>
diff --git a/packages/lumx-react/src/components/popover/__snapshots__/Popover.test.tsx.snap b/packages/lumx-react/src/components/popover/__snapshots__/Popover.test.tsx.snap
diff --git a/packages/lumx-react/src/hooks/useClickAway.tsx b/packages/lumx-react/src/hooks/useClickAway.tsx
diff --git a/packages/lumx-react/src/utils/ClickAwayProvider/ClickAwayProvider.tsx b/packages/lumx-react/src/utils/ClickAwayProvider/ClickAwayProvider.tsx
