From d89031f0573e504bd7d085d8429383435d60f062 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. --- js/src/common/utils/Drawer.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/js/src/common/utils/Drawer.js b/js/src/common/utils/Drawer.js index c0003dd1e..23f5e5e22 100644 --- a/js/src/common/utils/Drawer.js +++ b/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')})` );