From 9a77bddc4130327479a67cb7b88506aff5b836e7 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 06596f7b09..be7a2eaae6 100644 --- a/src/components/Modal/Modal.vue +++ b/src/components/Modal/Modal.vue @@ -582,7 +582,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 a2de636ba44b49cea1e5b676f6a1cd020945573f 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 be7a2eaae6..844b95d657 100644 --- a/src/components/Modal/Modal.vue +++ b/src/components/Modal/Modal.vue @@ -370,6 +370,14 @@ export default { type: String, default: 'body', }, + + /** + * Additional elements to add to the focus trap + */ + additionalTrapElements: { + type: Array, + default: () => [], + }, }, data() { @@ -416,6 +424,12 @@ export default { } } }, + additionalTrapElements(elements) { + if (this.focusTrap) { + const contentContainer = this.$refs.mask + this.focusTrap.updateContainerElements([contentContainer, ...elements]) + } + }, }, beforeMount() {