fix(19.7): RB-WR-01 save shortcuts commit a draft inside a field type's shadow root

The save shortcuts blurred document.activeElement before clicking. With
focus on an input inside a shadow root that is the host, and blur() on a
host that is not itself focused does nothing (spec, Firefox), so a plugin
field type committing on the native change event lost the typed value.
The shortcut now focuses the button first, as a pointer press does, which
unfocuses the inner input in open and closed roots, and gives focus back
to the innermost element reached through open shadow roots.

admin/tests/app/hotkeysEditing.test.ts

@@ -2,8 +2,10 @@
 // keys never fire from an input inside an open shadow root or from a custom
 // field element inside a form (a closed root hides its input), and the save
 // shortcuts commit a taglist's typed-but-uncommitted tag before saving, the
-// way a pointer click on the button does. No application names appear in
-// framework tests.
+// way a pointer click on the button does. RB-WR-01: the same holds for an
+// input inside a plugin field type's shadow root, open or closed, where
+// document.activeElement is the host and blur() on the host does nothing. No
+// application names appear in framework tests.
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { enableAutoUnmount, flushPromises } from '@vue/test-utils'
 import { closeShortcutHelp, installHotkeys, shortcutHelp } from '../../src/app/hotkeys'
@@ -122,6 +124,66 @@ describe('plain keys from editable controls hidden in shadow DOM', () => {
   })
 })
 
+// A plugin field type that commits on its inner input's native change event,
+// as PluginField's summer-change protocol allows. happy-dom fires no change
+// on blur; a browser does, so the input emulates it.
+function shadowField(mode: ShadowRootMode): { host: HTMLElement; input: HTMLInputElement } {
+  const host = document.createElement('div')
+  const input = document.createElement('input')
+  let committed = ''
+  input.addEventListener('blur', () => {
+    if (input.value !== committed) {
+      committed = input.value
+      input.dispatchEvent(new Event('change', { bubbles: true }))
+    }
+  })
+  input.addEventListener('change', () => {
+    host.dispatchEvent(new CustomEvent('summer-change', { bubbles: true, composed: true, detail: { value: input.value } }))
+  })
+  host.attachShadow({ mode }).appendChild(input)
+  return { host, input }
+}
+
+describe('save shortcuts commit a draft inside a shadow root', () => {
+  for (const mode of ['open', 'closed'] as const) {
+    for (const [name, key, init] of [
+      ['Ctrl+S', 's', { ctrlKey: true }],
+      ['Ctrl+Enter', 'Enter', { ctrlKey: true }],
+    ] as const) {
+      it(`${name} commits the typed value of an input in a ${mode} root before the click`, () => {
+        uninstalls.push(installHotkeys())
+        const form = document.createElement('form')
+        const { host, input } = shadowField(mode)
+        form.appendChild(host)
+        document.body.appendChild(form)
+        let value: unknown = 'initial'
+        host.addEventListener('summer-change', (event) => {
+          value = (event as CustomEvent<{ value: unknown }>).detail.value
+        })
+        const saved: unknown[] = []
+        const save = document.createElement('button')
+        save.type = 'button'
+        save.setAttribute('data-hotkey', 'mod+s mod+enter')
+        save.addEventListener('click', () => saved.push(value))
+        document.body.appendChild(save)
+
+        input.focus()
+        input.value = 'draft'
+        expect(document.activeElement).toBe(host)
+
+        const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true, composed: true, ...init })
+        input.dispatchEvent(event)
+        expect(event.defaultPrevented).toBe(true)
+        expect(saved).toEqual(['draft'])
+        if (mode === 'open') {
+          // Focus goes back to the input the admin was typing in.
+          expect(host.shadowRoot!.activeElement).toBe(input)
+        }
+      })
+    }
+  }
+})
+
 describe('save shortcuts commit a taglist draft', () => {
   const BASE = `${API}/acme/demo/widgets`
   const RECORD = `${BASE}/1`