diff --git a/core/src/components/popover/test/basic/popover.spec.tsx b/core/src/components/popover/test/basic/popover.spec.tsx index abe5db8fc65..cd46af57c9c 100644 --- a/core/src/components/popover/test/basic/popover.spec.tsx +++ b/core/src/components/popover/test/basic/popover.spec.tsx @@ -40,3 +40,38 @@ describe('popover: focus trap', () => { expect(popover.classList.contains(FOCUS_TRAP_DISABLE_CLASS)).toBe(false); }); }); + +describe('popover: keyboardClose', () => { + const presentWithFocusedInput = async (keyboardClose: boolean) => { + const page = await newSpecPage({ + components: [Popover], + template: () => ( +
+ + +
+ ), + }); + + const input = page.body.querySelector('input')!; + const popover = page.body.querySelector('ion-popover')!; + const blur = jest.spyOn(input, 'blur'); + Object.defineProperty(page.doc, 'activeElement', { configurable: true, get: () => input }); + + await popover.present(); + + return blur; + }; + + it('should not blur the focused element when keyboardClose is false', async () => { + const blur = await presentWithFocusedInput(false); + + expect(blur).not.toHaveBeenCalled(); + }); + + it('should blur the focused element when keyboardClose is true', async () => { + const blur = await presentWithFocusedInput(true); + + expect(blur).toHaveBeenCalled(); + }); +}); diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts index 7a1dd014bd3..240b44a5f3c 100644 --- a/core/src/utils/overlays.ts +++ b/core/src/utils/overlays.ts @@ -716,8 +716,13 @@ const restoreElementFocus = async (overlayEl: any) => { return; } - // Ensure active element is blurred to prevent a11y warning issues - previousElement.blur(); + /** + * Ensure active element is blurred to prevent a11y warning issues. + * Skip this when keyboardClose is false so the keyboard stays open. + */ + if (overlayEl.keyboardClose !== false) { + previousElement.blur(); + } const shadowRoot = previousElement?.shadowRoot; if (shadowRoot) {