From 823b52fc044778c48ebbd8b067bf0563a911f110 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Fri, 14 Oct 2022 17:08:39 +0300
Subject: [PATCH] fix page search input being focusable when hidden

---
 src/components/AlbumView/Header.vue      | 8 --------
 src/components/ContextMenu.vue           | 1 +
 src/components/shared/NavSearchInput.vue | 5 +++--
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index 445ab3da..611376b3 100644
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -73,10 +73,6 @@ defineProps<{
   album: AlbumInfo;
 }>();
 
-const emit = defineEmits<{
-  (event: "resetBottomPadding"): void;
-}>();
-
 const albumheaderthing = ref<any>(null);
 const imguri = paths.images;
 const nav = useNavStore();
@@ -88,10 +84,6 @@ const nav = useNavStore();
  * @param {boolean} state the new visibility state of the album page header.
  */
 function handleVisibilityState(state: boolean) {
-  if (state) {
-    emit("resetBottomPadding");
-  }
-
   nav.toggleShowPlay(state);
 }
 
diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index 7b21ff4e..82a1c552 100644
--- a/src/components/ContextMenu.vue
+++ b/src/components/ContextMenu.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    v-show="context.visible"
     class="context-menu rounded shadow-lg no-select"
     ref="contextMenu"
     id="context-menu"
diff --git a/src/components/shared/NavSearchInput.vue b/src/components/shared/NavSearchInput.vue
index 8e112801..131f4b0e 100644
--- a/src/components/shared/NavSearchInput.vue
+++ b/src/components/shared/NavSearchInput.vue
@@ -94,6 +94,7 @@ if (source) {
   width: 7rem;
   gap: $small;
   transition: all 0.25s;
+  transition-delay: 0.1s;
 }
 
 .header-input {
@@ -105,11 +106,11 @@ if (source) {
   z-index: 200;
   transition: all 0.25s $overshoot;
   opacity: 0;
-  transform: translateY(-1rem);
+  transform: translateY(-3.5rem);
   border-radius: 3rem;
   padding-left: 1rem;
   outline: solid 1px $gray1;
-  
+
   &:focus {
     outline: solid $darkblue;
   }