fix(editbar): restore caret to pad after toolbar-select change (#7589)

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');
     });

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');
+});