Merge pull request #741 from lumapps/fix/lightbox-parent-focus

fix(lightbox): fix wrong focus parent behavior

Author: gcornut

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   Fixed generated typescript types for NPM publication.
 -   Fixed release script version and changelog update.
+-   Lightbox : Focus parent element only when his lightbox was previously opened.
 
 ## [2.1.5][] - 2021-11-30
 

packages/lumx-react/src/components/lightbox/Lightbox.stories.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+    ImageBlock,
+    Slideshow,
+    SlideshowItem,
+    Toolbar,
+    Divider,
+    Alignment,
+    TextField,
+    Typography,
+    Link,
+    Lightbox,
+    ThumbnailProps,
+} from '@lumx/react';
+import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
+
+export default { title: 'LumX components/lightbox/Lightbox' };
+
+interface RowItemProps {
+    image: ThumbnailProps;
+}
+
+const RowItem: React.FC<RowItemProps> = ({ image }) => {
+    const [isOpen, setOpen] = React.useState(false);
+    const { image: url, alt: name } = image;
+    const linkRef = React.useRef(null);
+
+    return (
+        <>
+            <Toolbar
+                label={
+                    <Link ref={linkRef} typography={Typography.subtitle1} onClick={() => setOpen(true)}>
+                        {name}
+                    </Link>
+                }
+            />
+            <Lightbox
+                closeButtonProps={{ label: 'Close' }}
+                isOpen={isOpen}
+                onClose={() => setOpen(false)}
+                parentElement={linkRef}
+            >
+                <Slideshow
+                    activeIndex={0}
+                    fillHeight
+                    slideshowControlsProps={{
+                        nextButtonProps: { label: 'Next' },
+                        previousButtonProps: { label: 'Previous' },
+                    }}
+                >
+                    <SlideshowItem key={name}>
+                        <ImageBlock align={Alignment.center} alt={name} fillHeight image={url} />
+                    </SlideshowItem>
+                </Slideshow>
+            </Lightbox>
+        </>
+    );
+};
+
+export const Focus = () => {
+    const [textFieldValue, setTextFieldValue] = React.useState('');
+    const images: ThumbnailProps[] = thumbnailsKnob(12);
+
+    return (
+        <>
+            <TextField
+                value={textFieldValue}
+                onChange={setTextFieldValue}
+                className="lumx-spacing-margin-vertical-big"
+            />
+            {images.map((image, index) => {
+                const itemPosition = index + 1;
+                return (
+                    <div key={itemPosition}>
+                        <RowItem image={image} />
+                        <Divider />
+                    </div>
+                );
+            })}
+        </>
+    );
+};

packages/lumx-react/src/components/lightbox/Lightbox.tsx

@@ -10,7 +10,6 @@ import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/
 
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';
-import { useFocus } from '@lumx/react/hooks/useFocus';
 import { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
@@ -90,9 +89,18 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useFocusTrap(wrapperRef.current, childrenRef.current?.firstChild);
 
-    // Focus the parent element on close.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useFocus(parentElement?.current, !isOpen);
+    const previousOpen = React.useRef(isOpen);
+
+    React.useEffect(() => {
+        if (isOpen !== previousOpen.current) {
+            previousOpen.current = isOpen;
+
+            // Focus the parent element on close.
+            if (!isOpen && parentElement && parentElement.current) {
+                parentElement.current.focus();
+            }
+        }
+    }, [isOpen, parentElement]);
 
     // Close lightbox on escape key pressed.
     // eslint-disable-next-line react-hooks/rules-of-hooks