javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(select): focus selected item in popovers (#23991)

Browse Source
This commit is contained in:
Amanda Smith
2021-10-01 13:33:53 -05:00
committed by GitHub
parent 86a77bd379
commit 2497a53255
4 changed files with 49 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
core/src/utils/helpers.ts
View File

@@ -174,6 +174,25 @@ export const findItemLabel = (componentEl: HTMLElement): HTMLIonLabelElement | n
return null;
};
export const focusElement = (el: HTMLElement) => {
el.focus();
/**
* When programmatically focusing an element,
* the focus-visible utility will not run because
* it is expecting a keyboard event to have triggered this;
* however, there are times when we need to manually control
* this behavior so we call the `setFocus` method on ion-app
* which will let us explicitly set the elements to focus.
*/
if (el.classList.contains('ion-focusable')) {
const app = el.closest('ion-app');
if (app) {
app.setFocus([el]);
}
}
};
/**
* This method is used for Ionic's input components that use Shadow DOM. In
* order to properly label the inputs to work with screen readers, we need

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

@@ -3,7 +3,7 @@ import { getIonMode } from '../global/ionic-global';
import { ActionSheetOptions, AlertOptions, Animation, AnimationBuilder, BackButtonEvent, HTMLIonOverlayElement, IonicConfig, LoadingOptions, ModalOptions, OverlayInterface, PickerOptions, PopoverOptions, ToastOptions } from '../interface';
import { OVERLAY_BACK_BUTTON_PRIORITY } from './hardware-back-button';
import { addEventListener, componentOnReady, getElementRoot, removeEventListener } from './helpers';
import { addEventListener, componentOnReady, focusElement, getElementRoot, removeEventListener } from './helpers';
let lastId = 0;
@@ -78,22 +78,7 @@ export const focusFirstDescendant = (ref: Element, overlay: HTMLIonOverlayElemen
}
if (firstInput) {
firstInput.focus();
/**
* When programmatically focusing an element,
* the focus-visible utility will not run because
* it is expecting a keyboard event to have triggered this;
* however, there are times when we need to manually control
* this behavior so we call the `setFocus` method on ion-app
* which will let us explicitly set the elements to focus.
*/
if (firstInput.classList.contains('ion-focusable')) {
const app = overlay.closest('ion-app');
if (app) {
app.setFocus([firstInput]);
}
}
focusElement(firstInput);
} else {
// Focus overlay instead of letting focus escape
overlay.focus();