From 5f85d8f749b52f3fec5bd31a04b86b6740157e98 Mon Sep 17 00:00:00 2001
From: Nelson Chan <3271800+chakflying@users.noreply.github.com>
Date: Sun, 27 Aug 2023 18:55:36 +0800
Subject: [PATCH] Fix: Focus & styling on safari (#3650)

---
 src/components/MonitorListFilterDropdown.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/MonitorListFilterDropdown.vue b/src/components/MonitorListFilterDropdown.vue
index fe8b3ea28..79d664af8 100644
--- a/src/components/MonitorListFilterDropdown.vue
+++ b/src/components/MonitorListFilterDropdown.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="dropdown" @focusin="open = true" @focusout="handleFocusOut">
+    <div tabindex="-1" class="dropdown" @focusin="open = true" @focusout="handleFocusOut">
         <button type="button" class="filter-dropdown-status" :class="{ 'active': filterActive }" tabindex="0">
             <div class="px-1 d-flex align-items-center">
                 <slot name="status"></slot>
@@ -107,6 +107,19 @@ export default {
     display: flex;
     align-items: center;
     margin-left: 5px;
+    color: $link-color;
+
+    .dark & {
+        color: $dark-font-color;
+    }
+
+    &:focus {
+        background-color: $highlight-white;
+
+        .dark & {
+            background-color: $dark-font-color2;
+        }
+    }
 
     &.active {
         border: 1px solid $highlight;