fix(web): better element inputmode management 📴

web/source/dom/domManager.ts

@@ -55,6 +55,11 @@ namespace com.keyman.dom {
      */
     enablementObserver: MutationObserver;
 
+    /**
+     * Tracks changes in inputmode state.
+     */
+    inputModeObserver: MutationObserver;
+
     /**
      * Tracks a list of event-listening elements.
      *
@@ -99,6 +104,9 @@ namespace com.keyman.dom {
         if(this.attachmentObserver) {
           this.attachmentObserver.disconnect();
         }
+        if(this.inputModeObserver) {
+          this.inputModeObserver.disconnect();
+        }
 
         for(let input of this.inputList) {
           this.disableInputElement(input);
@@ -233,6 +241,7 @@ namespace com.keyman.dom {
 
       if(!this.isAttached(Pelem)) {
         this.setupElementAttachment(Pelem);
+        Pelem._kmwAttachment.inputMode = Pelem.inputMode ?? 'text';
         Pelem.inputMode = 'none';
       }
 
@@ -264,7 +273,13 @@ namespace com.keyman.dom {
      */
     disableTouchElement(Pelem: HTMLElement) {
       // Do not check for the element being officially disabled - it's also used for detachment.
-      Pelem.inputMode = 'text';
+      const intendedInputMode = Pelem._kmwAttachment.inputMode;
+
+      this.disableInputModeObserver();
+      Pelem.inputMode = intendedInputMode;
+      this.enableInputModeObserver();
+
+      this.setupNonKMWTouchElement(Pelem);
     }
 
     /**
@@ -907,6 +922,30 @@ namespace com.keyman.dom {
       }
     }.bind(this);
 
+    _InputModeObserverCore = function(this: DOMManager, mutations: MutationRecord[]) {
+      const keyman = com.keyman.singleton;
+      // Prevent infinite recursion from any changes / updates made within the observation handler.
+      this.disableInputModeObserver();
+      try {
+        for(const mutation of mutations) {
+          const target = mutation.target as HTMLElement;
+          if(!(this as DOMManager).isAttached(target)) {
+            continue;
+          }
+
+          const newValue = target.inputMode;
+
+          target._kmwAttachment.inputMode = newValue;
+
+          if(keyman.util.device.touchable) {
+            target.inputMode = 'none';
+          }
+        }
+      } finally {
+        this.enableInputModeObserver();
+      }
+    }.bind(this);
+
     /**
      * Function     _MutationAdditionObserved
      * Scope        Private
@@ -1611,6 +1650,12 @@ namespace com.keyman.dom {
         observationConfig = { subtree: true, attributes: true, attributeOldValue: true, attributeFilter: ['class', 'readonly']};
         this.enablementObserver = new MutationObserver(this._EnablementMutationObserverCore);
         this.enablementObserver.observe(observationTarget, observationConfig);
+
+        /**
+         * Setup of handlers for dynamic detection of change in inputMode state.
+         */
+        this.inputModeObserver = new MutationObserver(this._InputModeObserverCore);
+        this.enableInputModeObserver();
       } else {
         console.warn("Your browser is outdated and does not support MutationObservers, a web feature " +
           "needed by KeymanWeb to support dynamically-added elements.");
@@ -1630,6 +1675,16 @@ namespace com.keyman.dom {
       return Promise.resolve();
     }.bind(this);
 
+    enableInputModeObserver() {
+      const observationTarget = document.querySelector('body');
+      const observationConfig = { subtree: true, attributes: true, attributeFilter: ['inputmode']};
+      this.inputModeObserver.observe(observationTarget, observationConfig);
+    }
+
+    disableInputModeObserver() {
+      this.inputModeObserver.disconnect();
+    }
+
     /**
      * Initialize the desktop user interface as soon as it is ready
      */

web/source/kmwtypedefs.ts

@@ -17,12 +17,17 @@ namespace com.keyman {
 
     /**
      * Tracks if the control has an aliased control for touch functionality.
-     * 
+     *
      * Future note - could be changed to track the DOMEventHandler instance used by this control;
      *               this may be useful for an eventual hybrid touch/non-touch implementation.
      */
     touchEnabled:   boolean;
 
+    /**
+     * Tracks the inputmode originally set by the webpage.
+     */
+    inputMode?: string;
+
     constructor(eleInterface: dom.targets.OutputTarget, kbd: string, touch?: boolean) {
       this.interface = eleInterface;
       this.keyboard = kbd;