Skip to content

Commit 3c9f7ce

Browse files
authored
Fix initial focus trap issue, introduced with recent changes (#5427)
1 parent 4fd2393 commit 3c9f7ce

1 file changed

Lines changed: 7 additions & 6 deletions

File tree

  • packages/apostrophe/modules/@apostrophecms/modal/ui/apos/components

packages/apostrophe/modules/@apostrophecms/modal/ui/apos/components/AposModal.vue

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -510,7 +510,12 @@ function onKeydownTab(event) {
510510
if (event.target?.nodeName?.toLowerCase() === 'textarea') {
511511
return;
512512
}
513-
const elements = getFocusableElements(modalEl.value);
513+
// Skip visually hidden elements when cycling — but only here, not in
514+
// trapFocus. Initial focus runs while `renderingElements` is still true,
515+
// which puts the content under display:none and makes every candidate's
516+
// offsetParent null.
517+
const elements = getFocusableElements(modalEl.value)
518+
.filter(el => el.offsetParent !== null);
514519
// Keep the store snapshot consistent for other consumers.
515520
store.updateModalData(props.modalData.id, { elementsToFocus: elements });
516521
cycleElementsToFocus(event, elements);
@@ -556,11 +561,7 @@ function getFocusableElements(rootEl) {
556561
if (!rootEl) {
557562
return [];
558563
}
559-
return [ ...rootEl.querySelectorAll(focusableSelector) ]
560-
// a cheap "visible and in the DOM" condition,
561-
// false positive expected for position: fixed and
562-
// visually hidden elements (visible: hidden, opacity: 0, etc.)
563-
.filter(el => el.offsetParent !== null);
564+
return [ ...rootEl.querySelectorAll(focusableSelector) ];
564565
}
565566
566567
async function trapFocus() {

0 commit comments

Comments
 (0)