fix(ui): Hide the focus outline around dropdown popups

The global :focus-visible rule loads after the module CSS and has the same
specificity, so it overrode `outline: none` on the focused listbox wrapper
and drew a square blue frame inside the Select popup.

Claude-Session: https://claude.ai/code/session_01B65qLEKnkeYTGdbwhLpjCu
This commit is contained in:
l0ng-ai
2026-10-23 21:23:06 +08:00
parent 19aee5f262
commit ee99b3641f
2 changed files with 7 additions and 2 deletions
+3 -1
View File
@@ -1,9 +1,11 @@
.popup { .popup {
z-index: var(--z-popup); z-index: var(--z-popup);
outline: none;
overflow: auto; overflow: auto;
opacity: 0; opacity: 0;
} }
.popup:focus-visible {
outline: none;
}
.popup[data-positioned] { .popup[data-positioned] {
opacity: 1; opacity: 1;
animation: popIn var(--dur-fast) var(--ease); animation: popIn var(--dur-fast) var(--ease);
+4 -1
View File
@@ -57,10 +57,13 @@
overflow: hidden; overflow: hidden;
} }
.popupInner { .popupInner {
outline: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
/* Focus only carries keystrokes; the active row is the indicator. */
.popupInner:focus-visible {
outline: none;
}
.list { .list {
max-height: 320px; max-height: 320px;
} }