make client deselectable for projects, fixes #333

resources/js/packages/ui/src/Client/ClientDropdown.vue

@@ -1,9 +1,18 @@
 <script setup lang="ts">
 import { PlusCircleIcon } from '@heroicons/vue/20/solid';
-import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
-import { type Component, computed, nextTick, ref, watch } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 import ClientDropdownItem from '@/packages/ui/src/Client/ClientDropdownItem.vue';
 import type { CreateClientBody, Client } from '@/packages/api/src';
+import {
+    ComboboxAnchor,
+    ComboboxContent,
+    ComboboxInput,
+    ComboboxItem,
+    ComboboxRoot,
+    ComboboxViewport,
+} from 'radix-vue';
+import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component';
+import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
 
 const model = defineModel<string | null>({
     default: null,
@@ -14,10 +23,8 @@ const props = defineProps<{
     createClient: (client: CreateClientBody) => Promise<Client | undefined>;
 }>();
 
-const searchInput = ref<HTMLInputElement | null>(null);
+const searchInput = ref<HTMLElement | null>(null);
 const open = ref(false);
-const dropdownViewport = ref<Component | null>(null);
-
 const searchValue = ref('');
 
 function isClientSelected(id: string) {
@@ -27,7 +34,8 @@ function isClientSelected(id: string) {
 watch(open, (isOpen) => {
     if (isOpen) {
         nextTick(() => {
-            searchInput.value?.focus();
+            // @ts-expect-error We need to access the actual HTML Element to focus as radix-vue does not support any other way right now
+            searchInput.value?.$el?.focus();
         });
     }
 });
@@ -48,132 +56,89 @@ async function addClientIfNoneExists() {
         if (newClient) {
             model.value = newClient.id;
             searchValue.value = '';
-        }
-    } else {
-        if (highlightedItemId.value) {
-            model.value = highlightedItemId.value;
+            open.value = false;
         }
     }
 }
 
-watch(filteredClients, () => {
-    if (filteredClients.value.length > 0) {
-        highlightedItemId.value = filteredClients.value[0].id;
-    }
+const currentClient = computed(() => {
+    return (
+        props.clients.find((client) => client.id === model.value) ?? {
+            id: null,
+            name: 'No Client',
+        }
+    );
 });
 
-function updateSearchValue(event: Event) {
-    const newInput = (event.target as HTMLInputElement).value;
-    if (newInput === ' ') {
-        searchValue.value = '';
-        const highlightedClientId = highlightedItemId.value;
-        if (highlightedClientId) {
-            const highlightedClient = props.clients.find(
-                (client) => client.id === highlightedClientId
-            );
-            if (highlightedClient) {
-                model.value = highlightedClient.id;
-            }
-        }
-    } else {
-        searchValue.value = newInput;
-    }
-}
-
 const emit = defineEmits(['update:modelValue', 'changed']);
 
-function updateClient(newValue: string) {
-    model.value = newValue;
-    nextTick(() => {
-        emit('changed');
-    });
+function updateValue(client: { id: string | null; name: string }) {
+    model.value = client.id;
+    emit('changed');
 }
-
-function moveHighlightUp() {
-    if (highlightedItem.value) {
-        const currentHightlightedIndex = filteredClients.value.indexOf(
-            highlightedItem.value
-        );
-        if (currentHightlightedIndex === 0) {
-            highlightedItemId.value =
-                filteredClients.value[filteredClients.value.length - 1].id;
-        } else {
-            highlightedItemId.value =
-                filteredClients.value[currentHightlightedIndex - 1].id;
-        }
-    }
-}
-
-function moveHighlightDown() {
-    if (highlightedItem.value) {
-        const currentHightlightedIndex = filteredClients.value.indexOf(
-            highlightedItem.value
-        );
-        if (currentHightlightedIndex === filteredClients.value.length - 1) {
-            highlightedItemId.value = filteredClients.value[0].id;
-        } else {
-            highlightedItemId.value =
-                filteredClients.value[currentHightlightedIndex + 1].id;
-        }
-    }
-}
-
-const highlightedItemId = ref<string | null>(null);
-const highlightedItem = computed(() => {
-    return props.clients.find(
-        (client) => client.id === highlightedItemId.value
-    );
-});
 </script>
 
 <template>
-    <Dropdown v-model="open" width="120" :close-on-content-click="true">
+    <Dropdown v-model="open" align="start" width="60">
         <template #trigger>
             <slot name="trigger"></slot>
         </template>
         <template #content>
-            <input
-                ref="searchInput"
-                :value="searchValue"
-                data-testid="client_dropdown_search"
-                class="bg-card-background border-0 placeholder-muted text-sm text-text-primary py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
-                placeholder="Search for a client..."
-                @input="updateSearchValue"
-                @keydown.enter="addClientIfNoneExists"
-                @keydown.up.prevent="moveHighlightUp"
-                @keydown.down.prevent="moveHighlightDown" />
-            <div ref="dropdownViewport" class="w-60 max-h-60 overflow-y-scroll">
-                <div
-                    v-if="
-                        searchValue.length > 0 && filteredClients.length === 0
-                    "
-                    class="bg-card-background-active"
-                    @click="addClientIfNoneExists">
-                    <div
-                        class="flex space-x-3 items-center px-4 py-3 text-xs text-text-primary font-medium border-t rounded-b-lg border-card-background-separator">
-                        <PlusCircleIcon
-                            class="w-5 flex-shrink-0"></PlusCircleIcon>
-                        <span>Add "{{ searchValue }}" as a new Client</span>
-                    </div>
-                </div>
-                <div v-else></div>
-                <div
-                    v-for="client in filteredClients"
-                    :key="client.id"
-                    role="option"
-                    :value="client.id"
-                    :class="{
-                        'bg-card-background-active':
-                            client.id === highlightedItemId,
-                    }"
-                    data-testid="client_dropdown_entries"
-                    :data-client-id="client.id">
-                    <ClientDropdownItem
-                        :selected="isClientSelected(client.id)"
-                        :name="client.name"
-                        @click="updateClient(client.id)"></ClientDropdownItem>
-                </div>
-            </div>
+            <UseFocusTrap
+                v-if="open"
+                :options="{ immediate: true, allowOutsideClick: true }">
+                <ComboboxRoot
+                    v-model:search-term="searchValue"
+                    :open="open"
+                    :model-value="currentClient"
+                    class="relative"
+                    @update:model-value="updateValue">
+                    <ComboboxAnchor>
+                        <ComboboxInput
+                            ref="searchInput"
+                            class="bg-card-background border-0 placeholder-muted text-sm text-text-primary py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
+                            placeholder="Search for a client..." />
+                    </ComboboxAnchor>
+                    <ComboboxContent>
+                        <ComboboxViewport
+                            class="w-60 max-h-60 overflow-y-scroll">
+                            <ComboboxItem
+                                :value="{ id: null, name: 'No Client' }"
+                                class="data-[highlighted]:bg-card-background-active">
+                                <ClientDropdownItem
+                                    :selected="model === null"
+                                    name="No Client" />
+                            </ComboboxItem>
+                            <ComboboxItem
+                                v-for="client in filteredClients"
+                                :key="client.id"
+                                :value="client"
+                                class="data-[highlighted]:bg-card-background-active"
+                                :data-client-id="client.id">
+                                <ClientDropdownItem
+                                    :selected="isClientSelected(client.id)"
+                                    :name="client.name" />
+                            </ComboboxItem>
+                            <div
+                                v-if="
+                                    searchValue.length > 0 &&
+                                    filteredClients.length === 0
+                                "
+                                class="bg-card-background-active">
+                                <div
+                                    class="flex space-x-3 items-center px-4 py-3 text-xs text-text-primary font-medium border-t rounded-b-lg border-card-background-separator"
+                                    @click="addClientIfNoneExists">
+                                    <PlusCircleIcon class="w-5 flex-shrink-0" />
+                                    <span
+                                        >Add "{{ searchValue }}" as a new
+                                        Client</span
+                                    >
+                                </div>
+                            </div>
+                        </ComboboxViewport>
+                    </ComboboxContent>
+                </ComboboxRoot>
+            </UseFocusTrap>
         </template>
     </Dropdown>
 </template>