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 fe8b3ea2..79d664af 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;