From fb2d4087bf5a64770e2df33ee1245566055b907b Mon Sep 17 00:00:00 2001
From: John McLear <john@mclear.co.uk>
Date: Fri, 24 Apr 2026 03:21:39 +0100
Subject: [PATCH] fix(editbar): restore caret to pad after toolbar-select
 change (#7589)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

After picking a value from a toolbar <select> (ep_headings style
picker is the canonical case), keyboard focus was left on the
nice-select wrapper rather than returned to the pad editor. Users
had to click back into the pad before typing resumed.

The ToolbarItem.bind() class already calls padeditor.ace.focus() at
the end of triggerCommand, but that only runs for selects wired via
data-key on the wrapping <li>. Plugin-provided selects (e.g.
ep_headings2's #heading-selection inside <li id="headings">, no
data-key) don't go through that path — they bind their own change
handler and never return focus.

Fix: add a delegated change handler on `#editbar select` that calls
padeditor.ace.focus() after any toolbar select change. Deferred via
setTimeout(0) so plugin change handlers (bound on the same event)
complete their ace.callWithAce work before focus moves. Redundant but
harmless for data-key-wired selects that are already refocused by
triggerCommand.

Added a Playwright regression test that simulates the nice-select
option-click (val + change, which is what the wrapper dispatches
internally) and verifies typing after the change lands in the pad.
Skips when ep_headings2 isn't installed.

Closes #7589.
---
 src/static/js/pad_editbar.ts                  | 15 +++++++
 .../specs/select_focus_restore.spec.ts        | 39 +++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 src/tests/frontend-new/specs/select_focus_restore.spec.ts

diff --git a/src/static/js/pad_editbar.ts b/src/static/js/pad_editbar.ts
index cb8dae2a781..0f4a5b0ef22 100644
--- a/src/static/js/pad_editbar.ts
+++ b/src/static/js/pad_editbar.ts
@@ -144,6 +144,21 @@ exports.padeditbar = new class {
       this._bodyKeyEvent(evt);
     });
 
+    // After any toolbar-select change (e.g. ep_headings style picker,
+    // ep_font_size), return keyboard focus to the pad editor so the caret
+    // is back at its previous location. Plugin-provided <select> elements
+    // aren't always wired through Button.bind (which requires data-key on
+    // the wrapping <li>); covering them at the #editbar level means every
+    // toolbar dropdown restores focus consistently. setTimeout(0) defers
+    // the focus call until plugin change handlers (bound on the same
+    // event) have finished, so their ace.callWithAce work is done before
+    // we return focus. Fixes #7589.
+    $('#editbar').on('change', 'select', () => {
+      setTimeout(() => {
+        if (padeditor.ace) padeditor.ace.focus();
+      }, 0);
+    });
+
     $('.show-more-icon-btn').on('click', () => {
       $('.toolbar').toggleClass('full-icons');
     });
diff --git a/src/tests/frontend-new/specs/select_focus_restore.spec.ts b/src/tests/frontend-new/specs/select_focus_restore.spec.ts
new file mode 100644
index 00000000000..80a36526c54
--- /dev/null
+++ b/src/tests/frontend-new/specs/select_focus_restore.spec.ts
@@ -0,0 +1,39 @@
+import {expect, test} from '@playwright/test';
+import {getPadBody, goToNewPad} from '../helper/padHelper';
+
+test.beforeEach(async ({page}) => {
+  await goToNewPad(page);
+});
+
+test('toolbar select change returns focus to the pad editor (#7589)', async ({page}) => {
+  // Regression: after picking a value from a toolbar select (ep_headings
+  // style picker is the canonical example), the caret should return to
+  // the pad editor so typing continues instead of being swallowed by
+  // the select wrapper.
+  const hs = page.locator('#heading-selection');
+  if ((await hs.count()) === 0) {
+    test.skip(true, 'ep_headings2 not enabled in this environment');
+    return;
+  }
+
+  const padBody = await getPadBody(page);
+  await padBody.click();
+  await page.keyboard.type('before');
+
+  // Change the heading style. The native <select> is hidden behind the
+  // nice-select wrapper, which on option click does `val(x).trigger('change')`
+  // internally (see src/static/js/vendors/nice-select.ts). Replicate that
+  // directly rather than trying to click through the wrapper UI.
+  await hs.evaluate((el: HTMLSelectElement) => {
+    el.value = '0';
+    el.dispatchEvent(new Event('change', {bubbles: true}));
+  });
+
+  // After the change, keyboard input should go into the pad, not the
+  // toolbar. Write a marker and verify both chunks appear in the pad.
+  await page.keyboard.type('after');
+  await page.waitForTimeout(200);
+  const bodyText = await padBody.innerText();
+  expect(bodyText).toContain('before');
+  expect(bodyText).toContain('after');
+});