fix(task): focusing on assignee search field when activating it

This commit is contained in:
kolaente 2022-10-23 15:27:29 +02:00
parent d7fb1a1e14
commit 820823b5c3
Signed by untrusted user: konrad
GPG Key ID: F40E70337AB24C9B

View File

@ -1,30 +1,25 @@
<template> <template>
<div <Multiselect
tabindex="-1" :loading="listUserService.loading"
@focus="focus" :placeholder="$t('task.assignee.placeholder')"
:multiple="true"
@search="findUser"
:search-results="foundUsers"
@select="addAssignee"
label="name"
:select-placeholder="$t('task.assignee.selectPlaceholder')"
v-model="assignees"
ref="userSearchInputRef"
> >
<Multiselect <template #tag="{item: user}">
:loading="listUserService.loading" <span class="assignee">
:placeholder="$t('task.assignee.placeholder')" <user :avatar-size="32" :show-username="false" :user="user"/>
:multiple="true" <BaseButton @click="removeAssignee(user)" class="remove-assignee" v-if="!disabled">
@search="findUser" <icon icon="times"/>
:search-results="foundUsers" </BaseButton>
@select="addAssignee" </span>
label="name" </template>
:select-placeholder="$t('task.assignee.selectPlaceholder')" </Multiselect>
v-model="assignees"
ref="multiselect"
>
<template #tag="{item: user}">
<span class="assignee">
<user :avatar-size="32" :show-username="false" :user="user"/>
<BaseButton @click="removeAssignee(user)" class="remove-assignee" v-if="!disabled">
<icon icon="times"/>
</BaseButton>
</span>
</template>
</Multiselect>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -41,7 +36,7 @@ import {success} from '@/message'
import {useTaskStore} from '@/stores/tasks' import {useTaskStore} from '@/stores/tasks'
import type {IUser} from '@/modelTypes/IUser' import type {IUser} from '@/modelTypes/IUser'
import { getDisplayName } from '@/models/user' import {getDisplayName} from '@/models/user'
const props = defineProps({ const props = defineProps({
taskId: { taskId: {
@ -130,12 +125,6 @@ async function findUser(query: string) {
function clearAllFoundUsers() { function clearAllFoundUsers() {
foundUsers.value = [] foundUsers.value = []
} }
const multiselect = ref()
function focus() {
multiselect.value.focus()
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>