@vaadin/vaadin-control-state-mixin - npm Package Compare versions

Comparing version 2.2.3 to 2.2.4

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-control-state-mixin",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "main": "vaadin-control-state-mixin.js",
@@ -26,2 +26,4 @@ "author": "Vaadin Ltd",
   "resolutions": {
+    "es-abstract": "1.17.6",
+    "@types/doctrine": "0.0.3",
     "inherits": "2.0.3",
@@ -28,0 +30,0 @@ "samsam": "1.1.3",

vaadin-control-state-mixin.d.ts

@@ -48,3 +48,2 @@ /**
   ready(): void;
-  connectedCallback(): void;
   disconnectedCallback(): void;
@@ -51,0 +50,0 @@ _setFocused(focused: boolean): void;

vaadin-control-state-mixin.js

@@ -6,2 +6,24 @@ /**
 */
+// We consider the keyboard to be active if the window has received a keydown
+// event since the last mousedown event.
+let keyboardActive = false;
+
+// Listen for top-level keydown and mousedown events.
+// Use capture phase so we detect events even if they're handled.
+window.addEventListener(
+  'keydown',
+  () => {
+    keyboardActive = true;
+  },
+  {capture: true}
+);
+
+window.addEventListener(
+  'mousedown',
+  () => {
+    keyboardActive = false;
+  },
+  {capture: true}
+);
+
 /**
@@ -157,5 +179,2 @@ * A private mixin to avoid problems with dynamic properties and Polymer Analyzer.
     }
-
-    this._boundKeydownListener = this._bodyKeydownListener.bind(this);
-    this._boundKeyupListener = this._bodyKeyupListener.bind(this);
   }
@@ -166,18 +185,5 @@
    */
-  connectedCallback() {
-    super.connectedCallback();
-
-    document.body.addEventListener('keydown', this._boundKeydownListener, true);
-    document.body.addEventListener('keyup', this._boundKeyupListener, true);
-  }
-
-  /**
-   * @protected
-   */
   disconnectedCallback() {
     super.disconnectedCallback();
 
-    document.body.removeEventListener('keydown', this._boundKeydownListener, true);
-    document.body.removeEventListener('keyup', this._boundKeyupListener, true);
-
     // in non-Chrome browsers, blur does not fire on the element when it is disconnected.
@@ -203,3 +209,3 @@ // reproducible in `<vaadin-date-picker>` when closing on `Cancel` or `Today` click.
     // Focus Ring [A11ycasts]: https://youtu.be/ilj2P5-5CjI
-    if (focused && this._tabPressed) {
+    if (focused && keyboardActive) {
       this.setAttribute('focus-ring', '');
@@ -212,17 +218,2 @@ } else {
   /**
-   * @param {KeyboardEvent} e
-   * @private
-   */
-  _bodyKeydownListener(e) {
-    this._tabPressed = e.keyCode === 9;
-  }
-
-  /**
-   * @private
-   */
-  _bodyKeyupListener() {
-    this._tabPressed = false;
-  }
-
-  /**
    * Any element extending this mixin is required to implement this getter.
@@ -229,0 +220,0 @@ * It returns the actual focusable element in the component.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

23777

decreased by-1.09%

Lines of code

320

decreased by-2.14%

No dependency changes