@spectrum-web-components/shared - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1

CHANGELOG.md

@@ -6,2 +6,9 @@ # Change Log
 
+## [0.5.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/shared@0.5.0...@spectrum-web-components/shared@0.5.1) (2020-07-22)
+
+### Bug Fixes
+
+-   **shared:** prevent focusable returning focus to host ([745f7b0](https://github.com/adobe/spectrum-web-components/commit/745f7b0d23c14efd937e4a0be4d488c5d0865f34))
+-   **tabs:** correct entry focus element ([64407d3](https://github.com/adobe/spectrum-web-components/commit/64407d37fd09d3d598253a66c3b342882d51a826))
+
 # [0.5.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/shared@0.4.7...@spectrum-web-components/shared@0.5.0) (2020-07-17)
@@ -8,0 +15,0 @@

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.5.0",
+    "version": "0.5.1",
     "description": "",
@@ -51,3 +51,3 @@ "main": "src/index.js",
     },
-    "gitHead": "75044c0b0aeafaf7c6d90c32c7b4ba1fc9d3bc28"
+    "gitHead": "6525377d6526487105bea9f5b731b26279051968"
 }

src/focusable.d.ts

@@ -33,2 +33,3 @@ import { LitElement, CSSResultArray, PropertyValues } from 'lit-element';
     blur(): void;
+    click(): void;
     protected manageAutoFocus(): void;
@@ -35,0 +36,0 @@ protected firstUpdated(changes: PropertyValues): void;

src/focusable.js

@@ -57,2 +57,5 @@ import { __decorate } from "tslib";
     }
+    click() {
+        this.focusElement.click();
+    }
     manageAutoFocus() {
@@ -75,5 +78,33 @@ if (this.autofocus) {
         this.addEventListener('focusin', (event) => {
+            // only throw focus when `focusin` occurs directly on the `:host()`
             if (event.composedPath()[0] === this) {
                 this.handleFocus();
             }
+            // when focus has been thrown do not reapply `focusout` listeners
+            if (event.relatedTarget === this) {
+                return;
+            }
+            let doTimeout = true;
+            const innerHandler = () => {
+                setTimeout(() => {
+                    // Typically this would be done via `clearTimeout()`.
+                    // However, there are moment when the asyncrony of native
+                    // DOM events causes the `outerHandler` to run before the
+                    // value returned from `setTimeout` can be cached, which
+                    // prevents the following call to be prevented. In ALL
+                    // cases the `outerHandler` will run before the callback
+                    // for the `setTimeout` which leads to the use of this
+                    // technique instead.
+                    if (doTimeout) {
+                        this.focus();
+                    }
+                });
+            };
+            const outerHandler = () => {
+                doTimeout = false;
+                this.focusElement.removeEventListener('focusout', innerHandler);
+                this.removeEventListener('focusout', outerHandler);
+            };
+            this.focusElement.addEventListener('focusout', innerHandler);
+            this.addEventListener('focusout', outerHandler);
         });
@@ -80,0 +111,0 @@ }

src/focusable.ts

@@ -73,2 +73,6 @@ /*
 
+    public click(): void {
+        this.focusElement.click();
+    }
+
     protected manageAutoFocus(): void {
@@ -95,5 +99,33 @@ if (this.autofocus) {
         this.addEventListener('focusin', (event) => {
+            // only throw focus when `focusin` occurs directly on the `:host()`
             if (event.composedPath()[0] === this) {
                 this.handleFocus();
             }
+            // when focus has been thrown do not reapply `focusout` listeners
+            if (event.relatedTarget === this) {
+                return;
+            }
+            let doTimeout = true;
+            const innerHandler = (): void => {
+                setTimeout(() => {
+                    // Typically this would be done via `clearTimeout()`.
+                    // However, there are moment when the asyncrony of native
+                    // DOM events causes the `outerHandler` to run before the
+                    // value returned from `setTimeout` can be cached, which
+                    // prevents the following call to be prevented. In ALL
+                    // cases the `outerHandler` will run before the callback
+                    // for the `setTimeout` which leads to the use of this
+                    // technique instead.
+                    if (doTimeout) {
+                        this.focus();
+                    }
+                });
+            };
+            const outerHandler = (): void => {
+                doTimeout = false;
+                this.focusElement.removeEventListener('focusout', innerHandler);
+                this.removeEventListener('focusout', outerHandler);
+            };
+            this.focusElement.addEventListener('focusout', innerHandler);
+            this.addEventListener('focusout', outerHandler);
         });
@@ -100,0 +132,0 @@ }

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

Improved metrics

Total package byte prevSize

96771

increased by21.58%

Number of package files

34

increased by3.03%

Lines of code

1044

increased by6.42%

No dependency changes