fix: fixed #2370

CHANGELOG.md

@@ -112,6 +112,8 @@ and numbers.
 
 ### Issues Resolved
 
+- **#2370** The order of the `keydown` and `input` event is now consistent
+  with the `<textarea>` element.
 - **#2309** When using styled text (e.g. `\textit{}`), the content could 
   sometimes be serialized with an unnecessary `\text{}` command, i.e. 
   `\text{\textit{...}}`.

src/editor-model/commands-move.ts

@@ -325,11 +325,7 @@ function leapTo(model: _Model, target: Atom | number): boolean {
  * empty child list.
  * @return `false` if no placeholder found and did not move
  */
-function leap(
-  model: _Model,
-  dir: 'forward' | 'backward',
-  callHooks = true
-): boolean {
+function leap(model: _Model, dir: 'forward' | 'backward'): boolean {
   const dist = dir === 'forward' ? 1 : -1;
 
   // If we're already at a placeholder, move by one more (the placeholder
@@ -354,19 +350,17 @@ function leap(
     (dir === 'forward' && model.offsetOf(target) < origin) ||
     (dir === 'backward' && model.offsetOf(target) > origin)
   ) {
-    const handled =
-      !callHooks ||
-      !(
-        model.mathfield.host?.dispatchEvent(
-          new CustomEvent('move-out', {
-            detail: { direction: dir },
-            cancelable: true,
-            bubbles: true,
-            composed: true,
-          })
-        ) ?? true
-      );
-    if (handled) {
+    const success =
+      model.mathfield.host?.dispatchEvent(
+        new CustomEvent('move-out', {
+          detail: { direction: dir },
+          cancelable: true,
+          bubbles: true,
+          composed: true,
+        })
+      ) ?? true;
+
+    if (!success) {
       model.announce('plonk');
       return false;
     }

src/editor-model/commands.ts

@@ -334,9 +334,9 @@ export function move(
 
   if (pos < 0 || pos > model.lastOffset) {
     // We're going out of bounds
-    let result = true; // True => perform default handling
+    let success = true; // True => perform default handling
     if (!model.silenceNotifications) {
-      result =
+      success =
         model.mathfield.host?.dispatchEvent(
           new CustomEvent('move-out', {
             detail: { direction },
@@ -346,8 +346,8 @@ export function move(
           })
         ) ?? true;
     }
-    if (result) model.announce('plonk');
-    return result;
+    if (success) model.announce('plonk');
+    return success;
   }
 
   model.setPositionHandlingPlaceholder(pos);
@@ -473,9 +473,9 @@ function moveUpward(model: _Model, options?: { extend: boolean }): boolean {
 
   // Callback when there is nowhere to move
   const handleDeadEnd = () => {
-    let result = true; // True => perform default handling
+    let success = true; // True => perform default handling
     if (!model.silenceNotifications) {
-      result =
+      success =
         model.mathfield.host?.dispatchEvent(
           new CustomEvent('move-out', {
             detail: { direction: 'upward' },
@@ -485,8 +485,8 @@ function moveUpward(model: _Model, options?: { extend: boolean }): boolean {
           })
         ) ?? true;
     }
-    model.announce(result ? 'plonk' : 'line');
-    return result;
+    model.announce(success ? 'line' : 'plonk');
+    return success;
   };
 
   // Find a target branch
@@ -545,9 +545,9 @@ function moveDownward(model: _Model, options?: { extend: boolean }): boolean {
   if (!extend) model.collapseSelection('forward');
   // Callback when there is nowhere to move
   const handleDeadEnd = () => {
-    let result = true; // True => perform default handling
+    let success = true; // True => perform default handling
     if (!model.silenceNotifications) {
-      result =
+      success =
         model.mathfield.host?.dispatchEvent(
           new CustomEvent('move-out', {
             detail: { direction: 'downward' },
@@ -557,8 +557,8 @@ function moveDownward(model: _Model, options?: { extend: boolean }): boolean {
           })
         ) ?? true;
     }
-    model.announce(result ? 'plonk' : 'line');
-    return result;
+    model.announce(success ? 'line' : 'plonk');
+    return success;
   };
 
   // Find a target branch

src/editor-model/model-private.ts

@@ -38,6 +38,8 @@ import '../virtual-keyboard/global';
 import type { ModelState, GetAtomOptions, AnnounceVerb } from './types';
 import type { BranchName, ToLatexOptions } from 'core/types';
 
+import { isValidMathfield } from '../editor-mathfield/utils';
+
 /** @internal */
 export class _Model implements Model {
   readonly mathfield: _Mathfield;
@@ -656,7 +658,7 @@ export class _Model implements Model {
     previousPosition?: number,
     atoms: readonly Atom[] = []
   ): void {
-    const result =
+    const success =
       this.mathfield.host?.dispatchEvent(
         new CustomEvent('announce', {
           detail: { command, previousPosition, atoms },
@@ -665,7 +667,7 @@ export class _Model implements Model {
           composed: true,
         })
       ) ?? true;
-    if (result)
+    if (success)
       defaultAnnounceHook(this.mathfield, command, previousPosition, atoms);
   }
 
@@ -809,17 +811,32 @@ export class _Model implements Model {
     const save = this.silenceNotifications;
     this.silenceNotifications = true;
 
-    this.mathfield.host.dispatchEvent(
-      new InputEvent('input', {
-        ...options,
-        // To work around a bug in WebKit/Safari (the inputType property gets stripped), include the inputType as the 'data' property. (see #1843)
-        data: options.data ? options.data : options.inputType ?? '',
-        bubbles: true,
-        composed: true,
-      } as InputEventInit)
-    );
-    this.silenceNotifications = save;
+    // In a textarea field, the 'input' event is fired after the keydown
+    // event. However, in our case we're inside the 'keydown' event handler
+    // so we need to 'defer' the 'input' event to the next event loop
+    // iteration.
+
+    setTimeout(() => {
+      if (
+        !this.mathfield ||
+        !isValidMathfield(this.mathfield) ||
+        !this.mathfield.host
+      )
+        return;
+
+      this.mathfield.host.dispatchEvent(
+        new InputEvent('input', {
+          ...options,
+          // To work around a bug in WebKit/Safari (the inputType property gets stripped), include the inputType as the 'data' property. (see #1843)
+          data: options.data ? options.data : options.inputType ?? '',
+          bubbles: true,
+          composed: true,
+        } as InputEventInit)
+      );
+      this.silenceNotifications = save;
+    }, 0);
   }
+
   selectionDidChange(): void {
     // The mathfield could be undefined if the mathfield was disposed
     // while the selection was changing

src/ui/menu/menu-item.ts

@@ -336,9 +336,9 @@ export class _MenuItemState<T> implements MenuItemState<T> {
       },
     });
 
-    const notCanceled = this.parentMenu.dispatchEvent(ev);
+    const success = this.parentMenu.dispatchEvent(ev);
 
-    if (notCanceled && typeof this._declaration.onMenuSelect === 'function') {
+    if (success && typeof this._declaration.onMenuSelect === 'function') {
       this._declaration.onMenuSelect({
         target: this.parentMenu.host ?? undefined,
         modifiers: this.rootMenu.modifiers,

src/virtual-keyboard/proxy.ts

@@ -90,30 +90,30 @@ export class VirtualKeyboardProxy
   }
 
   show(options?: { animate: boolean }): void {
-    const defaultNotPrevented = this.dispatchEvent(
+    const success = this.dispatchEvent(
       new CustomEvent('before-virtual-keyboard-toggle', {
         detail: { visible: true },
         bubbles: true,
         cancelable: true,
         composed: true,
       })
     );
-    if (defaultNotPrevented) {
+    if (success) {
       this.sendMessage('show', options);
       this.dispatchEvent(new Event('virtual-keyboard-toggle'));
     }
   }
 
   hide(options?: { animate: boolean }): void {
-    const defaultNotPrevented = this.dispatchEvent(
+    const success = this.dispatchEvent(
       new CustomEvent('before-virtual-keyboard-toggle', {
         detail: { visible: false },
         bubbles: true,
         cancelable: true,
         composed: true,
       })
     );
-    if (defaultNotPrevented) {
+    if (success) {
       this.sendMessage('hide', options);
       this.dispatchEvent(new Event('virtual-keyboard-toggle'));
     }

src/virtual-keyboard/virtual-keyboard.ts

@@ -772,15 +772,15 @@ export class VirtualKeyboard implements VirtualKeyboardInterface, EventTarget {
   }
 
   stateWillChange(visible: boolean): boolean {
-    const defaultNotPrevented = this.dispatchEvent(
+    const success = this.dispatchEvent(
       new CustomEvent('before-virtual-keyboard-toggle', {
         detail: { visible },
         bubbles: true,
         cancelable: true,
         composed: true,
       })
     );
-    return defaultNotPrevented;
+    return success;
   }
 
   stateChanged(): void {