diff options
Diffstat (limited to 'packages/frontend/src/components/MkSelect.vue')
| -rw-r--r-- | packages/frontend/src/components/MkSelect.vue | 27 |
1 files changed, 20 insertions, 7 deletions
diff --git a/packages/frontend/src/components/MkSelect.vue b/packages/frontend/src/components/MkSelect.vue index 76bc3e8c0c..8254ac83cf 100644 --- a/packages/frontend/src/components/MkSelect.vue +++ b/packages/frontend/src/components/MkSelect.vue @@ -6,20 +6,29 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <div> <div :class="$style.label" @click="focus"><slot name="label"></slot></div> - <div ref="container" :class="[$style.input, { [$style.inline]: inline, [$style.disabled]: disabled, [$style.focused]: focused }]" @mousedown.prevent="show"> + <div + ref="container" + tabindex="0" + :class="[$style.input, { [$style.inline]: inline, [$style.disabled]: disabled, [$style.focused]: focused || opening }]" + @focus="focused = true" + @blur="focused = false" + @mousedown.prevent="show" + @keydown.space.enter="show" + > <div ref="prefixEl" :class="$style.prefix"><slot name="prefix"></slot></div> <select ref="inputEl" v-model="v" v-adaptive-border + tabindex="-1" :class="$style.inputCore" :disabled="disabled" :required="required" :readonly="readonly" :placeholder="placeholder" - @focus="focused = true" - @blur="focused = false" @input="onInput" + @mousedown.prevent="() => {}" + @keydown.prevent="() => {}" > <slot></slot> </select> @@ -75,7 +84,7 @@ const height = props.large ? 39 : 36; -const focus = () => inputEl.value?.focus(); +const focus = () => container.value?.focus(); const onInput = (ev) => { changed.value = true; }; @@ -126,7 +135,9 @@ onMounted(() => { }); function show() { - focused.value = true; + if (opening.value) return; + focus(); + opening.value = true; const menu: MenuItem[] = []; @@ -173,8 +184,6 @@ function show() { onClosing: () => { opening.value = false; }, - }).then(() => { - focused.value = false; }); } </script> @@ -225,6 +234,10 @@ function show() { } } + &:focus { + outline: none; + } + &:hover { > .inputCore { border-color: var(--inputBorderHover) !important; |