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

fix(toast): allow input focus while toast is visible (#24572)

Browse Source 
Resolves #24571
This commit is contained in:
Sean Perkins
2022-01-19 12:01:14 -05:00
committed by GitHub
parent 54db1a1e7c
commit 29f1140384
2 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/toast/toast.tsx
View File

@ -140,7 +140,9 @@ export class Toast implements ComponentInterface, OverlayInterface {
@Event({ eventName: 'ionToastDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>; @Event({ eventName: 'ionToastDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
connectedCallback() { connectedCallback() {
prepareOverlay(this.el); prepareOverlay(this.el, {
trapKeyboardFocus: false
});
} }
/** /**

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

@ -47,10 +47,16 @@ export const pickerController = /*@__PURE__*/createController<PickerOptions, HTM
export const popoverController = /*@__PURE__*/createController<PopoverOptions, HTMLIonPopoverElement>('ion-popover', Popover, [{ tagName: 'ion-backdrop', customElement: Backdrop }]); export const popoverController = /*@__PURE__*/createController<PopoverOptions, HTMLIonPopoverElement>('ion-popover', Popover, [{ tagName: 'ion-backdrop', customElement: Backdrop }]);
export const toastController = /*@__PURE__*/createController<ToastOptions, HTMLIonToastElement>('ion-toast', Toast, [{ tagName: 'ion-ripple-effect', customElement: RippleEffect }]); export const toastController = /*@__PURE__*/createController<ToastOptions, HTMLIonToastElement>('ion-toast', Toast, [{ tagName: 'ion-ripple-effect', customElement: RippleEffect }]);
export const prepareOverlay = <T extends HTMLIonOverlayElement>(el: T) => { export interface OverlayListenerOptions {
trapKeyboardFocus: boolean;
}
export const prepareOverlay = <T extends HTMLIonOverlayElement>(el: T, options: OverlayListenerOptions = {
trapKeyboardFocus: true
}) => {
/* tslint:disable-next-line */ /* tslint:disable-next-line */
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
connectListeners(document); connectListeners(document, options);
} }
const overlayIndex = lastId++; const overlayIndex = lastId++;
el.overlayIndex = overlayIndex; el.overlayIndex = overlayIndex;
@ -161,8 +167,7 @@ const trapKeyboardFocus = (ev: Event, doc: Document) => {
* We need to add a listener to the shadow root * We need to add a listener to the shadow root
* itself to ensure the focus trap works. * itself to ensure the focus trap works.
*/ */
if (!lastOverlay || !target if (!lastOverlay || !target) { return; }
) { return; }
const trapScopedFocus = () => { const trapScopedFocus = () => {
/** /**
@ -286,10 +291,12 @@ const trapKeyboardFocus = (ev: Event, doc: Document) => {
} }
}; };
export const connectListeners = (doc: Document) => { const connectListeners = (doc: Document, options: OverlayListenerOptions) => {
if (lastId === 0) { if (lastId === 0) {
lastId = 1; lastId = 1;
doc.addEventListener('focus', ev => trapKeyboardFocus(ev, doc), true); if (options.trapKeyboardFocus) {
doc.addEventListener('focus', ev => trapKeyboardFocus(ev, doc), true);
}
// handle back-button click // handle back-button click
doc.addEventListener('ionBackButton', ev => { doc.addEventListener('ionBackButton', ev => {