Как убрать фокус из Vuetify v-select? - PullRequest
Новая
       58

Как убрать фокус из Vuetify v-select?

0 голосов
/ 14 марта 2020

У меня проблема с компонентом <v-select> от Vuetify. У меня есть V-диалог, который открывается, когда я нажимаю кнопку. Это прекрасно работает.

В этом V-диалоге есть 3 v-select, каждый в своем v-col. Проблема в том, что когда открывается v-диалог, он автоматически фокусируется на первом v-select, что очень раздражает.

Я пробовал множество решений и даже сумел вызвать событие размытия (я поместил консольный журнал в событие размытия). Но даже после запуска события размытия фокус остается на этом v-select. Согласно этому скриншоту. enter image description here Это код v-select: 

<v-select
        ref="selectCommune"
        v-model="commune"
        :items="communes"
        color="info"
        item-color="info"
        label="Commune"
        multiple
        hide-details
        outlined>
    <template v-slot:selection="{ item, index }">
        <v-chip v-if="index === 0">
            <span>{{ item }}</span>
        </v-chip>
        <span
                v-if="index === 1"
        >(+{{ commune.length - 1 }})</span>
    </template>
</v-select>

Я пытался размыть () ссылку так, но не сработало: 

this.$nextTick(() => {
         this.$refs.selectCommune.blur()
       })

Затем я также попробовал это, которое запускает событие размытия, но все же фокус остается на v-select 

this.$nextTick(() => {
    setTimeout(() => {
       this.$refs.selectCommune.$el.querySelector(".v-select__selections").firstElementChild.blur()
     })
})

Я выбрал v-select__selections первым потомком, потому что я проверил цель события из события размытия, которое выстрелил по v-select.

Пожалуйста, помогите с этим вопросом. Я только видел, как это происходит внутри v-диалога.

...