adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-08 08:12:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix select behaviour in project member dropdown, fixes ST-308

Browse Source
This commit is contained in:
Gregor Vostrak
2024-07-09 12:11:03 +02:00
parent ba07616111
commit 375cee7589
1 changed files with 27 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
resources/js/Components/Common/Member/MemberCombobox.vue
View File

@@ -35,7 +35,7 @@ function isMemberSelected(id: string) {
return model.value === id;
}
const { focused } = useFocus(searchInput, { initialValue: true });
useFocus(searchInput, { initialValue: true });
const filteredMembers = computed(() => {
return members.value.filter((member) => {
@@ -142,49 +142,40 @@ const hasMemberSelected = computed(() => {
});
const showMembersDropdown = ref(true);
function onUnfocus() {
// TODO this is a hack to prevent the dropdown from closing when clicking on the dropdown
setTimeout(() => {
if (!focused.value) {
showMembersDropdown.value = false;
}
}, 100);
}
</script>
<template>
<div class="flex relative">
<div
ref="reference"
class="absolute h-full items-center px-3 w-full flex justify-between">
<UserIcon class="relative z-10 w-4 text-muted"></UserIcon>
<button
v-if="hasMemberSelected"
@click="model = ''"
class="focus:text-accent-200 focus:bg-card-background text-muted">
<XMarkIcon class="relative z-10 w-4"></XMarkIcon>
</button>
</div>
<TextInput
:value="currentValue"
:disabled="disabled"
@input="updateSearchValue"
data-testid="member_dropdown_search"
@keydown.enter.prevent="updateMember(highlightedItemId)"
@keydown.up.prevent="moveHighlightUp"
class="relative w-full pl-10"
@keydown.down.prevent="moveHighlightDown"
@focusin="showMembersDropdown = true"
@blur="onUnfocus"
placeholder="Search for a member..."
ref="searchInput" />
</div>
<Dropdown
align="bottom-start"
width="300"
v-model="showMembersDropdown"
:closeOnContentClick="true">
<template #trigger>
<div class="flex relative">
<div
ref="reference"
class="absolute h-full items-center px-3 w-full flex justify-between">
<UserIcon class="relative z-10 w-4 text-muted"></UserIcon>
<button
v-if="hasMemberSelected"
@click="model = ''"
class="focus:text-accent-200 focus:bg-card-background text-muted">
<XMarkIcon class="relative z-10 w-4"></XMarkIcon>
</button>
</div>
<TextInput
:value="currentValue"
:disabled="disabled"
@input="updateSearchValue"
data-testid="member_dropdown_search"
@keydown.enter.prevent="updateMember(highlightedItemId)"
@keydown.up.prevent="moveHighlightUp"
class="relative w-full pl-10"
@keydown.down.prevent="moveHighlightDown"
placeholder="Search for a member..."
ref="searchInput" />
</div>
</template>
<template #content>
<div
class="py-2 text-white px-3"