diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index 6d519a35f4..b917422421 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -140,7 +140,9 @@ export class Toast implements ComponentInterface, OverlayInterface { @Event({ eventName: 'ionToastDidDismiss' }) didDismiss!: EventEmitter; connectedCallback() { - prepareOverlay(this.el); + prepareOverlay(this.el, { + trapKeyboardFocus: false + }); } /** diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts index 19426edf9c..315d4c43ba 100644 --- a/core/src/utils/overlays.ts +++ b/core/src/utils/overlays.ts @@ -47,10 +47,16 @@ export const pickerController = /*@__PURE__*/createController('ion-popover', Popover, [{ tagName: 'ion-backdrop', customElement: Backdrop }]); export const toastController = /*@__PURE__*/createController('ion-toast', Toast, [{ tagName: 'ion-ripple-effect', customElement: RippleEffect }]); -export const prepareOverlay = (el: T) => { +export interface OverlayListenerOptions { + trapKeyboardFocus: boolean; +} + +export const prepareOverlay = (el: T, options: OverlayListenerOptions = { + trapKeyboardFocus: true +}) => { /* tslint:disable-next-line */ if (typeof document !== 'undefined') { - connectListeners(document); + connectListeners(document, options); } const overlayIndex = lastId++; el.overlayIndex = overlayIndex; @@ -161,8 +167,7 @@ const trapKeyboardFocus = (ev: Event, doc: Document) => { * We need to add a listener to the shadow root * itself to ensure the focus trap works. */ - if (!lastOverlay || !target - ) { return; } + if (!lastOverlay || !target) { return; } 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) { 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 doc.addEventListener('ionBackButton', ev => {