Fix #170. More keyboard focus troubles...

css/mathlive.less

@@ -904,6 +904,7 @@ body[theme="dark"] .ML__keystroke-caption {
 
     & > div.keyboard-layer {
         display: none;
+        outline: none;
         &.is-visible { 
             display: flex; 
             flex-flow: column;

dist/src/editor/editor-keyboard.js

@@ -267,16 +267,7 @@ function delegateKeyboardEvents(textarea, handlers) {
     }
     function onFocus() {
         if (handlers.focus) {
-            // Invoking focus() can have a side effect of temporarily bluring 
-            // the text area, causing the blur handler to be invoked.
-            // Prevent this by temporarily turning it off.
-            const savedBlur = handlers.blur;
-            const savedFocus = handlers.focus;
-            handlers.blur = null;
-            handlers.focus = null;
-            savedFocus();
-            handlers.blur = savedBlur;
-            handlers.focus = savedFocus;
+            handlers.focus();
         }
     }
 

dist/src/editor/editor-mathfield.js

@@ -276,8 +276,6 @@ function MathField(element, config) {
 
     // Focus/blur state
     this.blurred = true;
-    on(window, 'focus', this);
-    on(window, 'blur', this);
     on(this.element, 'focus', this);
     on(this.element, 'blur', this);
 
@@ -2511,6 +2509,7 @@ MathField.prototype._attachButtonHandlers = function(el, command) {
         if (ev.type !== 'mousedown' || ev.buttons === 1) {
             // The primary button was pressed or the screen was tapped.
             ev.stopPropagation();
+            ev.preventDefault();
 
             el.classList.add('pressed');
             pressHoldStart = Date.now();

dist/src/editor/editor-virtualKeyboard.js

@@ -1292,7 +1292,7 @@ function make(mf, theme) {
                 layers[layer] = tempLayer;
             }
 
-            markup += `<div class='keyboard-layer' id='` + layer + `'>`;
+            markup += `<div tabindex="-1" class='keyboard-layer' id='` + layer + `'>`;
             markup += makeKeyboardToolbar(mf, keyboardIDs, keyboard);
             const layerMarkup = typeof layers[layer] === 'function' ?
                 layers[layer]() : layers[layer];
@@ -1342,7 +1342,18 @@ function make(mf, theme) {
     }
 
     // Select the first keyboard as the initial one.
-    result.getElementsByClassName('keyboard-layer')[0].classList.add('is-visible');
+    const layerElements = result.getElementsByClassName('keyboard-layer');
+    Array.from(layerElements).forEach(x => {
+        x.addEventListener('mousedown', evt => {
+            evt.preventDefault();
+            evt.stopPropagation();
+        });
+        x.addEventListener('touchstart', evt => {
+            evt.preventDefault();
+            evt.stopPropagation();
+        });
+    });
+    layerElements[0].classList.add('is-visible');
 
     // Listen to know when the mouse has been released without being
     // captured to remove the alternate keys panel and the shifted state of the

src/editor/editor-keyboard.js

@@ -267,16 +267,7 @@ function delegateKeyboardEvents(textarea, handlers) {
     }
     function onFocus() {
         if (handlers.focus) {
-            // Invoking focus() can have a side effect of temporarily bluring 
-            // the text area, causing the blur handler to be invoked.
-            // Prevent this by temporarily turning it off.
-            const savedBlur = handlers.blur;
-            const savedFocus = handlers.focus;
-            handlers.blur = null;
-            handlers.focus = null;
-            savedFocus();
-            handlers.blur = savedBlur;
-            handlers.focus = savedFocus;
+            handlers.focus();
         }
     }
 

src/editor/editor-mathfield.js

@@ -276,8 +276,6 @@ function MathField(element, config) {
 
     // Focus/blur state
     this.blurred = true;
-    on(window, 'focus', this);
-    on(window, 'blur', this);
     on(this.element, 'focus', this);
     on(this.element, 'blur', this);
 
@@ -2511,6 +2509,7 @@ MathField.prototype._attachButtonHandlers = function(el, command) {
         if (ev.type !== 'mousedown' || ev.buttons === 1) {
             // The primary button was pressed or the screen was tapped.
             ev.stopPropagation();
+            ev.preventDefault();
 
             el.classList.add('pressed');
             pressHoldStart = Date.now();

src/editor/editor-virtualKeyboard.js

@@ -1292,7 +1292,7 @@ function make(mf, theme) {
                 layers[layer] = tempLayer;
             }
 
-            markup += `<div class='keyboard-layer' id='` + layer + `'>`;
+            markup += `<div tabindex="-1" class='keyboard-layer' id='` + layer + `'>`;
             markup += makeKeyboardToolbar(mf, keyboardIDs, keyboard);
             const layerMarkup = typeof layers[layer] === 'function' ?
                 layers[layer]() : layers[layer];
@@ -1342,7 +1342,18 @@ function make(mf, theme) {
     }
 
     // Select the first keyboard as the initial one.
-    result.getElementsByClassName('keyboard-layer')[0].classList.add('is-visible');
+    const layerElements = result.getElementsByClassName('keyboard-layer');
+    Array.from(layerElements).forEach(x => {
+        x.addEventListener('mousedown', evt => {
+            evt.preventDefault();
+            evt.stopPropagation();
+        });
+        x.addEventListener('touchstart', evt => {
+            evt.preventDefault();
+            evt.stopPropagation();
+        });
+    });
+    layerElements[0].classList.add('is-visible');
 
     // Listen to know when the mouse has been released without being
     // captured to remove the alternate keys panel and the shifted state of the