From c519240a0e64b35b9e4fc36c829127de4e268298 Mon Sep 17 00:00:00 2001 From: gitstart Date: Wed, 14 Dec 2022 06:55:59 +0000 Subject: [PATCH 1/4] fix: repeatable component focus --- .../AccordionGroupCustom/index.js | 1 - .../RepeatableComponent/DraggedItem/index.js | 13 ++++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/AccordionGroupCustom/index.js b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/AccordionGroupCustom/index.js index 0a4a51bf46..b2b3272eb3 100644 --- a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/AccordionGroupCustom/index.js +++ b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/AccordionGroupCustom/index.js @@ -8,7 +8,6 @@ import { Flex } from '@strapi/design-system/Flex'; import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable'; const AccordionFooter = styled(Box)` - overflow: hidden; border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200}; border-right: 1px solid ${({ theme }) => theme.colors.neutral200}; border-left: 1px solid ${({ theme }) => theme.colors.neutral200}; diff --git a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js index 50d89e4f01..f7b1904f9c 100644 --- a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js +++ b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js @@ -65,6 +65,7 @@ const DraggedItem = ({ }) => { const dragRef = useRef(null); const dropRef = useRef(null); + const contentRef = useRef(null); const [, forceRerenderAfterDnd] = useState(false); const { formatMessage } = useIntl(); @@ -158,6 +159,16 @@ const DraggedItem = ({ } }, [isDragging, setIsDraggingSibling]); + useEffect(() => { + if (isOpen) { + const focusable = contentRef.current?.querySelector( + 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' + ); + focusable?.focus(); + } + // We only focus on 1st focusable element in AccordionContent on mount with isOpen=true .i.e. new item + }, [isOpen]); + // Effect in order to force a rerender after reordering the components // Since we are removing the Accordion when doing the DnD we are losing the dragRef, therefore the replaced element cannot be dragged // anymore, this hack forces a rerender in order to apply the dragRef @@ -236,7 +247,7 @@ const DraggedItem = ({ togglePosition="left" /> - + {fields.map((fieldRow, key) => { return ( From b0055149283d0b46bb4c780b323fdcace8e05e53 Mon Sep 17 00:00:00 2001 From: gitstart Date: Wed, 14 Dec 2022 13:48:16 +0000 Subject: [PATCH 2/4] chore: adds inline comments --- .../components/RepeatableComponent/DraggedItem/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js index f7b1904f9c..ed04d95be4 100644 --- a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js +++ b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js @@ -159,6 +159,7 @@ const DraggedItem = ({ } }, [isDragging, setIsDraggingSibling]); + // Moves focus to the 1st focusable element in AccordionContent once opend/new item added useEffect(() => { if (isOpen) { const focusable = contentRef.current?.querySelector( @@ -166,7 +167,6 @@ const DraggedItem = ({ ); focusable?.focus(); } - // We only focus on 1st focusable element in AccordionContent on mount with isOpen=true .i.e. new item }, [isOpen]); // Effect in order to force a rerender after reordering the components From b68008afc11995f53264b85434b793bad363db16 Mon Sep 17 00:00:00 2001 From: gitstart Date: Wed, 14 Dec 2022 16:02:08 +0000 Subject: [PATCH 3/4] chore: focus on new added item only --- .../components/RepeatableComponent/DraggedItem/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js index ed04d95be4..ee554bf9ea 100644 --- a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js +++ b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js @@ -159,7 +159,7 @@ const DraggedItem = ({ } }, [isDragging, setIsDraggingSibling]); - // Moves focus to the 1st focusable element in AccordionContent once opend/new item added + // Moves focus to the 1st focusable element in AccordionContent once new item added (mounted with isOpen=true) useEffect(() => { if (isOpen) { const focusable = contentRef.current?.querySelector( @@ -167,7 +167,8 @@ const DraggedItem = ({ ); focusable?.focus(); } - }, [isOpen]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); // Effect in order to force a rerender after reordering the components // Since we are removing the Accordion when doing the DnD we are losing the dragRef, therefore the replaced element cannot be dragged From ce4d65a8d6a422212dd15e472b63b9d6fab32a54 Mon Sep 17 00:00:00 2001 From: gitstart Date: Fri, 16 Dec 2022 14:17:07 +0000 Subject: [PATCH 4/4] chore: reverts changes for new item focus --- .../RepeatableComponent/DraggedItem/index.js | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js index ee554bf9ea..50d89e4f01 100644 --- a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js +++ b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js @@ -65,7 +65,6 @@ const DraggedItem = ({ }) => { const dragRef = useRef(null); const dropRef = useRef(null); - const contentRef = useRef(null); const [, forceRerenderAfterDnd] = useState(false); const { formatMessage } = useIntl(); @@ -159,17 +158,6 @@ const DraggedItem = ({ } }, [isDragging, setIsDraggingSibling]); - // Moves focus to the 1st focusable element in AccordionContent once new item added (mounted with isOpen=true) - useEffect(() => { - if (isOpen) { - const focusable = contentRef.current?.querySelector( - 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' - ); - focusable?.focus(); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - // Effect in order to force a rerender after reordering the components // Since we are removing the Accordion when doing the DnD we are losing the dragRef, therefore the replaced element cannot be dragged // anymore, this hack forces a rerender in order to apply the dragRef @@ -248,7 +236,7 @@ const DraggedItem = ({ togglePosition="left" /> - + {fields.map((fieldRow, key) => { return (