Tabs: remove box shadow when browser hidden / blur (#10503)

packages/tabs/src/tab-nav.vue

@@ -35,7 +35,8 @@
       return {
         scrollable: false,
         navOffset: 0,
-        isFocus: false
+        isFocus: false,
+        focusable: true
       };
     },
 
@@ -150,10 +151,28 @@
         this.setFocus();
       },
       setFocus() {
-        this.isFocus = true;
+        if (this.focusable) {
+          this.isFocus = true;
+        }
       },
       removeFocus() {
         this.isFocus = false;
+      },
+      visibilityChangeHandler() {
+        const visibility = document.visibilityState;
+        if (visibility === 'hidden') {
+          this.focusable = false;
+        } else if (visibility === 'visible') {
+          this.focusable = true;
+        }
+      },
+      windowBlurHandler() {
+        this.focusable = false;
+      },
+      windowFocusHandler() {
+        setTimeout(() => {
+          this.focusable = true;
+        }, 50);
       }
     },
 
@@ -236,10 +255,16 @@
 
     mounted() {
       addResizeListener(this.$el, this.update);
+      document.addEventListener('visibilitychange', this.visibilityChangeHandler);
+      window.addEventListener('blur', this.windowBlurHandler);
+      window.addEventListener('focus', this.windowFocusHandler);
     },
 
     beforeDestroy() {
       if (this.$el && this.update) removeResizeListener(this.$el, this.update);
+      document.removeEventListener('visibilitychange', this.visibilityChangeHandler);
+      window.removeEventListener('blur', this.windowBlurHandler);
+      window.removeEventListener('focus', this.windowFocusHandler);
     }
   };
 </script>