diff --git a/.changeset/happy-days-brush.md b/.changeset/happy-days-brush.md new file mode 100644 index 0000000..8a2367a --- /dev/null +++ b/.changeset/happy-days-brush.md @@ -0,0 +1,5 @@ +--- +"@wethegit/react-gallery": patch +--- + +Fix the lost focus in Safari when the pressed nav button is disabled diff --git a/src/lib/components/gallery-nav.jsx b/src/lib/components/gallery-nav.jsx index b7ee02b..cfb7e03 100644 --- a/src/lib/components/gallery-nav.jsx +++ b/src/lib/components/gallery-nav.jsx @@ -12,7 +12,7 @@ export const GalleryNav = ({ children, ...props }) => { - const { next, previous, loop, activeIndex, galleryItems } = useGallery() + const { next, previous, loop, activeIndex, galleryItems, itemNodes } = useGallery() const handleClick = () => { if (direction) next() @@ -33,6 +33,14 @@ export const GalleryNav = ({ if (!children && !renderNavItem) return null + /* + * When the clicked/pressed button gets disabled, focus is reset + * to the document, so we are redirecting the focus within the gallery + */ + if (shouldDisable) { + itemNodes.current[activeIndex]?.focus({ focusVisible: false }) + } + return (