From 7c1696de9ed31c1dd63bb920e5cacd9cd293e9c2 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 28 Jun 2022 14:14:43 +0200
Subject: [PATCH] Fix visibility observer

---
 .../src/components/sidebar/SideBar.vue        | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/web-pkg/src/components/sidebar/SideBar.vue b/packages/web-pkg/src/components/sidebar/SideBar.vue
index a35385ce8a3..addc5db84a4 100644
--- a/packages/web-pkg/src/components/sidebar/SideBar.vue
+++ b/packages/web-pkg/src/components/sidebar/SideBar.vue
@@ -91,6 +91,7 @@
 
 <script lang="ts">
 import { VisibilityObserver } from 'web-pkg/src/observer'
+import { mapState } from 'vuex'
 import { defineComponent, PropType } from '@vue/composition-api'
 import { Panel } from './types'
 
@@ -137,6 +138,7 @@ export default defineComponent({
   },
 
   computed: {
+    ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
     activeAvailablePanelName() {
       if (!this.sidebarActivePanel) {
         return null
@@ -168,22 +170,13 @@ export default defineComponent({
       },
       immediate: true
     },
-    loading: {
-      handler() {
+    sidebarClosed: {
+      handler: function () {
         this.$nextTick(() => {
           this.initVisibilityObserver()
         })
       },
       immediate: true
-    },
-    availablePanels: {
-      handler() {
-        this.$nextTick(() => {
-          this.initVisibilityObserver()
-        })
-      },
-      immediate: true,
-      deep: true
     }
   },
 
@@ -213,7 +206,13 @@ export default defineComponent({
         root: document.querySelector('#files-sidebar'),
         threshold: 0.05
       })
-
+      const doFocus = () => {
+        const selector = document.querySelector(this.focused)
+        if (!selector) {
+          return
+        }
+        selector.focus()
+      }
       const clearOldPanelName = () => {
         this.oldPanelName = null
       }
@@ -226,6 +225,10 @@ export default defineComponent({
       hiddenObserver.disconnect()
 
       this.$refs.panels.forEach((panel) => {
+        visibilityObserver.observe(panel, {
+          onEnter: doFocus,
+          onExit: doFocus
+        })
         hiddenObserver.observe(panel, {
           onExit: clearOldPanelName
         })