From 303e07beba061bf5d6eeb54ea8559ae92e346be0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Fri, 12 Aug 2022 12:58:25 +0200 Subject: [PATCH 1/2] Disable focus trap on click outside MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- src/components/Modal/Modal.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue index fb342a79e4..171232ae38 100644 --- a/src/components/Modal/Modal.vue +++ b/src/components/Modal/Modal.vue @@ -661,7 +661,9 @@ export default { const contentContainer = this.$refs.mask // wait until all children are mounted and available in the DOM before focusTrap can be added this.$nextTick(() => { - this.focusTrap = createFocusTrap(contentContainer) + this.focusTrap = createFocusTrap(contentContainer, { + allowOutsideClick: true, + }) this.focusTrap.activate() }) }, From 98098ff521b35703f95883d893e4e7058402907f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Fri, 12 Aug 2022 13:12:11 +0200 Subject: [PATCH 2/2] Allow to add additional trap elements to the focus trap MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- src/components/Modal/Modal.vue | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue index 171232ae38..58e20d858f 100644 --- a/src/components/Modal/Modal.vue +++ b/src/components/Modal/Modal.vue @@ -445,6 +445,14 @@ export default { type: Boolean, default: true, }, + + /** + * Additional elements to add to the focus trap + */ + additionalTrapElements: { + type: Array, + default: () => [], + }, }, emits: [ @@ -505,6 +513,12 @@ export default { } } }, + additionalTrapElements(elements) { + if (this.focusTrap) { + const contentContainer = this.$refs.mask + this.focusTrap.updateContainerElements([contentContainer, ...elements]) + } + }, }, beforeMount() {