From 01e177eb52ee3b8f4bbae5a297d6874d4e4a698c Mon Sep 17 00:00:00 2001 From: Alexander Skvortsov Date: Sun, 26 Dec 2021 22:45:58 -0500 Subject: [PATCH] Fix drawer focus trap making login form unclickable on mobile Adding `clickOutsideDeactivates` seems to fix the issue, contrary to what the focus-trap documentation implies about it being unnecessary. --- framework/core/js/src/common/utils/Drawer.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/framework/core/js/src/common/utils/Drawer.js b/framework/core/js/src/common/utils/Drawer.js index c0003dd1e..23f5e5e22 100644 --- a/framework/core/js/src/common/utils/Drawer.js +++ b/framework/core/js/src/common/utils/Drawer.js @@ -27,7 +27,10 @@ export default class Drawer { }); this.appElement = document.getElementById('app'); - this.focusTrap = createFocusTrap('#drawer', { allowOutsideClick: true }); + // Despite the `focus-trap` documentation, both `clickOutsideDeactivates` + // and `allowOutsideClick` are necessary so that inputs in modals triggered + // from the drawer's nav components can be interacted with. + this.focusTrap = createFocusTrap('#drawer', { allowOutsideClick: true, clickOutsideDeactivates: true }); this.drawerAvailableMediaQuery = window.matchMedia( `(max-width: ${getComputedStyle(document.documentElement).getPropertyValue('--screen-phone-max')})` );