scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-21 15:36:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6724 from aignatov-bio/ai-sci-fix-dropdown-interactions

Browse source 
Fix focus on select dropdown
This commit is contained in:
aignatov-bio 2023-11-28 11:46:42 +01:00 committed by GitHub
parent f3ee9a854f 10f7157cc3
commit 1f6064a163
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/javascript/vue/shared/select.vue
View file

@ -21,7 +21,6 @@
class="sn-select__options !relative !top-0 !left-[-1px] !shadow-none scroll-container px-2.5 pt-0 block"
:class="{ [optionsClassName]: true }"
>
<div v-if="options.length" class="flex flex-col gap-[1px]">
<div
v-for="option in options"
@ -78,9 +77,6 @@
valueLabel() {
let option = this.options.find((o) => o[0] === this.value);
return option && option[1];
},
focusElement() {
return this.$refs.focusElement || this.$parent.$refs.focusElement;
}
},
mounted() {
@ -96,7 +92,8 @@
if (this.isOpen) {
this.$emit('open');
this.$nextTick(() => {
this.focusElement.focus();
this.$emit('focus');
this.$refs.focusElement?.focus();
});
this.$refs.optionsContainer.scrollTop = 0;
this.updateOptionPosition();

4
app/javascript/vue/shared/select_search.vue
View file

@ -15,6 +15,7 @@
@blur="blur"
@open="open"
@close="close"
@focus="focus"
>
<input ref="focusElement" v-model="query" type="text" class="sn-select__search-input" :placeholder="searchPlaceholder" />
<span class="sn-select__value">{{ valueLabel || (placeholder || i18n.t('general.select')) }}</span>
@ -77,6 +78,9 @@
}
},
methods: {
focus() {
this.$refs.focusElement.focus();
},
blur() {
this.isOpen = false;
this.$emit('blur');