javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 18:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(overlay): do not try to trap focus on hidden inputs (#21799)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-07-23 11:19:31 -04:00
committed by GitHub
parent 03ca0c5968
commit bcbe8cbb8d
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
core/src/utils/overlays.ts
View File

@ -63,14 +63,16 @@ export const createOverlay = <T extends HTMLIonOverlayElement>(tagName: string,
return Promise.resolve() as any; return Promise.resolve() as any;
}; };
const focusableQueryString = '[tabindex]:not([tabindex^="-"]), input, textarea, button, select, .ion-focusable'; const focusableQueryString = '[tabindex]:not([tabindex^="-"]), input:not([type=hidden]), textarea, button, select, .ion-focusable';
const innerFocusableQueryString = 'input:not([type=hidden]), textarea, button, select';
const focusFirstDescendant = (ref: Element, overlay: HTMLIonOverlayElement) => { const focusFirstDescendant = (ref: Element, overlay: HTMLIonOverlayElement) => {
let firstInput = ref.querySelector(focusableQueryString) as HTMLElement | null; let firstInput = ref.querySelector(focusableQueryString) as HTMLElement | null;
const shadowRoot = firstInput && firstInput.shadowRoot; const shadowRoot = firstInput && firstInput.shadowRoot;
if (shadowRoot) { if (shadowRoot) {
firstInput = shadowRoot.querySelector('input, textarea, button, select'); // If there are no inner focusable elements, just focus the host element.
firstInput = shadowRoot.querySelector(innerFocusableQueryString) || firstInput;
} }
if (firstInput) { if (firstInput) {
@ -87,7 +89,8 @@ const focusLastDescendant = (ref: Element, overlay: HTMLIonOverlayElement) => {
const shadowRoot = lastInput && lastInput.shadowRoot; const shadowRoot = lastInput && lastInput.shadowRoot;
if (shadowRoot) { if (shadowRoot) {
lastInput = shadowRoot.querySelector('input, textarea, button, select'); // If there are no inner focusable elements, just focus the host element.
lastInput = shadowRoot.querySelector(innerFocusableQueryString) || lastInput;
} }
if (lastInput) { if (lastInput) {