Don't pull focus back into the toolbar when the host page closes its menu

Clicking a host text field while a toolbar menu was open closed the menu and
then refocused the toolbar button, so the host field lost focus and typing
went nowhere. Focus is now restored only while the toolbar document has it.
This commit is contained in:
jelveh committed 2026-10-01 22:19:44 -07:00
1 parent ed32c212d3
commit fa6e76254b
2 files changed
+18 -1

No files matched your search

@@ -267,6 +267,22 @@ describe('embedded toolbar', () => {
} finally { await context.close(); }
});
it('leaves focus on the host page that closed the menu, and returns it to the toggle on Escape', async () => {
const { context, page, toolbar } = await openToolbar();
try {
await toolbar.getByRole('button', { name: 'Account', exact: true }).click();
await toolbar.locator('.toolbar-panel').waitFor();
await page.locator('#outside').click();
await toolbar.locator('.toolbar-panel').waitFor({ state: 'detached' });
await page.waitForTimeout(100);
expect(await page.evaluate(() => document.activeElement.id)).toBe('outside');
await toolbar.getByRole('button', { name: 'Account', exact: true }).click();
await toolbar.locator('.toolbar-close').press('Escape');
await toolbar.locator('.toolbar-panel').waitFor({ state: 'detached' });
expect(await toolbar.locator('body').evaluate(() => document.activeElement.dataset.panel)).toBe('account');
} finally { await context.close(); }
});
it('labels controls with translated text encoded once', async () => {
const { context, toolbar } = await openToolbar(undefined, sessionToken, [{ name: 'user_preferences', value: '{"language":"de"}' }]);
try {
+2 -1
View File
@@ -50,7 +50,8 @@ function closePanel () {
panel = null;
$root.find('.toolbar-panel').remove();
$root.find('[aria-expanded]').attr('aria-expanded', 'false');
if ( previous ) $root.find(`[data-panel="${previous}"]`)[0]?.focus({ preventScroll: true });
// A close the host started by focusing its own page must not pull focus back.
if ( previous && document.hasFocus() ) $root.find(`[data-panel="${previous}"]`)[0]?.focus({ preventScroll: true });
notify('panel', { panel });
}