ami/tl-vikunja
1
0
Fork 0
Code

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

Browse Source
This commit is contained in:
kolaente 2022-10-23 15:27:29 +02:00
parent d7fb1a1e14
commit 820823b5c3
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
1 changed files with 21 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/tasks/partials/editAssignees.vue
View File

@ -1,30 +1,25 @@
<template>
<div
tabindex="-1"
@focus="focus"
<Multiselect
:loading="listUserService.loading"
: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
:loading="listUserService.loading"
: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="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 #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>
</template>
<script setup lang="ts">
@ -41,7 +36,7 @@ import {success} from '@/message'
import {useTaskStore} from '@/stores/tasks'
import type {IUser} from '@/modelTypes/IUser'
import { getDisplayName } from '@/models/user'
import {getDisplayName} from '@/models/user'
const props = defineProps({
taskId: {
@ -130,12 +125,6 @@ async function findUser(query: string) {
function clearAllFoundUsers() {
foundUsers.value = []
}
const multiselect = ref()
function focus() {
multiselect.value.focus()
}
</script>
<style lang="scss" scoped>