fix(developer): render osk nicely on touch devices

Fixes #5905. Touch devices now use a touch keyboard only in the web debugger.
keymanapp · Nov 17, 2021 · 5789d39 · 5789d39
1 parent c98ac98
commit 5789d39
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/windows/src/developer/TIKE/xml/kmw/index.html b/windows/src/developer/TIKE/xml/kmw/index.html
@@ -24,19 +24,19 @@
 
       <div class='control' id='keymanweb-control-host'>
         <!--<div id='KeymanWebControl'></div>-->
-        <div>
+        <div id='control-keyboards'>
           <label for='keyboard-select'>Keyboard:</label>
           <select id='keyboard-select'>
             <option value=''>(system keyboard)</option>
           </select>
         </div>
-        <div>
+        <div id='control-models'>
           <label for='model-list'>Model:</label>
           <select id='model-list'>
             <option value=''>(no model)</option>
           </select>
         </div>
-        <div>
+        <div id='control-devices'>
           <label for='device-select'>Device:</label>
           <select id='device-select'>
             <option value='Windows'>Windows desktop</option>

diff --git a/windows/src/developer/TIKE/xml/kmw/test.css b/windows/src/developer/TIKE/xml/kmw/test.css
@@ -109,6 +109,10 @@ h2 {
 
 /** Mobile, Tablet **/
 
+.touch-device #control-devices {
+  display: none;
+}
+
 .install-link .ios,
 .install-link .android {
   display: none;

diff --git a/windows/src/developer/TIKE/xml/kmw/test.js b/windows/src/developer/TIKE/xml/kmw/test.js
@@ -182,16 +182,23 @@ window.onload = function() {
   );
 
   let newOSK = null;
-  let deviceSelect = document.getElementById('device-select');
-  if(deviceSelect.value == '') deviceSelect.value = 'desktop';
+  let deviceSelect = null;
 
-  deviceSelect.addEventListener('change', function() {
-    setOSK();
-    ta1.focus();
-  });
+  if(!keyman.util.isTouchDevice()) {
+    deviceSelect = document.getElementById('device-select');
+    if(deviceSelect.value == '') deviceSelect.value = 'desktop';
 
+    deviceSelect.addEventListener('change', function() {
+      setOSK();
+      ta1.focus();
+    });
+  }
 
   function setOSK() {
+    if(keyman.util.isTouchDevice()) {
+      return;
+    }
+
     const devices = {
       Windows:         { browser: 'chrome', formFactor: 'desktop', OS: 'windows', touchable: false, dimensions: [640, 300] },
       macOS:           { browser: 'chrome', formFactor: 'desktop', OS: 'macosx',  touchable: false, dimensions: [640, 300] },
@@ -228,8 +235,10 @@ window.onload = function() {
   setOSK();
 
   keyman.addEventListener('keyboardchange', function(keyboardProperties) {
-    keyman.osk = newOSK;
-    newOSK.activeKeyboard = keyman.core.activeKeyboard;
+    if(newOSK) {
+      keyman.osk = newOSK;
+      newOSK.activeKeyboard = keyman.core.activeKeyboard;
+    }
     keyboardSelect.value = keyboardProperties.internalName;
     keyman.alignInputs();
     //console.log('keyboardchange:'+JSON.stringify(keyboardProperties)+' [active='+keyman.getActiveKeyboard()+';'+keyman.core.activeKeyboard+']');