From f4fdd00d68a78d0cb8b1b9eaff8d6b26ab4f6ac9 Mon Sep 17 00:00:00 2001
From: lukicenturi <lukicenturi@gmail.com>
Date: Fri, 31 May 2024 16:28:23 +0700
Subject: [PATCH] feat(AutoComplete): allow AutoComplete to accept custom value

---
 example/cypress/e2e/forms/autocomplete.cy.ts  |   2 +-
 example/src/views/AutoCompleteView.vue        |  32 ++++
 .../auto-complete/RuiAutoComplete.spec.ts     |  45 ++++--
 .../forms/auto-complete/RuiAutoComplete.vue   | 143 +++++++++++++++---
 src/components/overlays/menu/Menu.vue         |   2 +-
 src/composables/dropdown-menu.ts              |  16 +-
 6 files changed, 205 insertions(+), 35 deletions(-)

diff --git a/example/cypress/e2e/forms/autocomplete.cy.ts b/example/cypress/e2e/forms/autocomplete.cy.ts
index a8bf4d2..b9c478a 100644
--- a/example/cypress/e2e/forms/autocomplete.cy.ts
+++ b/example/cypress/e2e/forms/autocomplete.cy.ts
@@ -17,6 +17,6 @@ describe('forms/Auto Completes', () => {
     cy.get('div[role=menu]').should('be.visible');
     cy.get('div[role=menu] button:first-child').click();
 
-    cy.get('@firstAutoComplete').find('div[class*=_value_]').should('contain.text', 'Germany');
+    cy.get('@firstAutoComplete').find('input').should('have.value', 'Germany');
   });
 });
diff --git a/example/src/views/AutoCompleteView.vue b/example/src/views/AutoCompleteView.vue
index 4d21835..fa90d8e 100644
--- a/example/src/views/AutoCompleteView.vue
+++ b/example/src/views/AutoCompleteView.vue
@@ -211,6 +211,38 @@ const autoCompletePrimitive = ref<AutoCompleteProps<string>[]>([
     label: 'Multiple',
     options: primitiveOptions,
   },
+  {
+    value: undefined,
+    variant: 'outlined',
+    label: 'Custom Value',
+    customValue: true,
+    options: primitiveOptions,
+  },
+  {
+    value: undefined,
+    dense: true,
+    variant: 'outlined',
+    label: 'Custom Value',
+    customValue: true,
+    options: primitiveOptions,
+  },
+  {
+    value: [],
+    chips: true,
+    dense: true,
+    variant: 'outlined',
+    label: 'Multiple With Custom Value',
+    customValue: true,
+    options: primitiveOptions,
+  },
+  {
+    value: ['Lorem'],
+    dense: true,
+    variant: 'outlined',
+    label: 'Multiple With Custom Value',
+    customValue: true,
+    options: primitiveOptions,
+  },
 ]);
 
 function getDisplayText(options?: Options | Options[]): string {
diff --git a/src/components/forms/auto-complete/RuiAutoComplete.spec.ts b/src/components/forms/auto-complete/RuiAutoComplete.spec.ts
index c89ae59..7c19ab8 100644
--- a/src/components/forms/auto-complete/RuiAutoComplete.spec.ts
+++ b/src/components/forms/auto-complete/RuiAutoComplete.spec.ts
@@ -56,7 +56,7 @@ describe('autocomplete', () => {
       },
     });
     expect(wrapper.find('div[data-id=activator][tabindex=-1]').exists()).toBeTruthy();
-    expect(wrapper.find('div[data-id=activator][tabindex=-1]').text()).toMatch('Spain');
+    expect((wrapper.find('div[data-id=activator][tabindex=-1] input').element as HTMLInputElement).value).toMatch('Spain');
   });
 
   it('works with primitive options', () => {
@@ -66,11 +66,12 @@ describe('autocomplete', () => {
         value: options[4].label,
       },
     });
-    expect(wrapper.find('div[data-id=activator]').text()).toMatch('Spain');
+    expect((wrapper.find('div[data-id=activator] input').element as HTMLInputElement).value).toMatch('Spain');
   });
 
   it('value passed and emitted properly', async () => {
     const wrapper = createWrapper({
+      attachTo: document.body,
       propsData: {
         autoSelectFirst: true,
         keyAttr: 'id',
@@ -104,8 +105,6 @@ describe('autocomplete', () => {
 
     expect(document.body.querySelector('div[role=menu]')).toBeTruthy();
 
-    await nextTick();
-
     highlightedItemButton = document.body.querySelector(`button:nth-child(${selectedIndex})`) as HTMLButtonElement;
     expect(highlightedItemButton.classList).toContain('highlighted');
 
@@ -162,15 +161,43 @@ describe('autocomplete', () => {
 
     chips = wrapper.find('div[data-id=activator]').findAll('.rui-chip');
     expect(chips).toHaveLength(3);
-    expect(chips.at(0).text()).toBe('India');
-    expect(chips.at(1).text()).toBe('France');
-    expect(chips.at(2).text()).toBe('England');
+
+    expect(chips.at(0).text()).toBe('France');
+    expect(chips.at(1).text()).toBe('England');
+    expect(chips.at(2).text()).toBe('India');
 
     // Delete England
-    await chips.at(2).find('button[type="button"]').trigger('click');
+    await chips.at(0).find('button[type="button"]').trigger('click');
     await nextTick();
 
-    newValue = ['6', '7'];
+    newValue = ['8', '6'];
     expect(wrapper.emitted().input!.at(-1)![0]).toEqual(newValue);
   });
+
+  it('custom value', async () => {
+    const wrapper = createWrapper({
+      propsData: {
+        autoSelectFirst: true,
+        chips: true,
+        customValue: true,
+        keyAttr: 'id',
+        options,
+        textAttr: 'label',
+        value: ['custom value'],
+      },
+    });
+
+    expect(wrapper.find('div[data-id=activator]').exists()).toBeTruthy();
+    const chips = wrapper.find('div[data-id=activator]').findAll('.rui-chip');
+    expect(chips).toHaveLength(1);
+    expect(chips.at(0).text()).toBe('custom value');
+
+    await wrapper.find('input').setValue('custom value 2');
+    await wrapper.find('[data-id=activator]').trigger('keydown.enter');
+
+    expect(wrapper.emitted().input!.at(-1)![0]).toEqual([
+      'custom value',
+      'custom value 2',
+    ]);
+  });
 });
diff --git a/src/components/forms/auto-complete/RuiAutoComplete.vue b/src/components/forms/auto-complete/RuiAutoComplete.vue
index 4447d93..c0ebe95 100644
--- a/src/components/forms/auto-complete/RuiAutoComplete.vue
+++ b/src/components/forms/auto-complete/RuiAutoComplete.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { logicAnd, logicOr } from '@vueuse/math';
+import { objectOmit } from '@vueuse/shared';
 import RuiButton from '@/components/buttons/button/Button.vue';
 import RuiIcon from '@/components/icons/Icon.vue';
 import RuiChip from '@/components/chips/Chip.vue';
@@ -14,7 +15,7 @@ export type K = string;
 export type ModelValue = T | T[] | T[K] | null;
 
 export interface Props<T> {
-  options: T[];
+  options?: T[];
   keyAttr?: K;
   textAttr?: K;
   value?: ModelValue;
@@ -46,6 +47,7 @@ export interface Props<T> {
   hideSelected?: boolean;
   placeholder?: string;
   returnObject?: boolean;
+  customValue?: boolean;
 }
 
 defineOptions({
@@ -54,6 +56,7 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<Props<T>>(), {
+  options: () => [],
   disabled: false,
   loading: false,
   readOnly: false,
@@ -78,6 +81,7 @@ const props = withDefaults(defineProps<Props<T>>(), {
   noDataText: 'No data available',
   hideSelected: false,
   returnObject: false,
+  customValue: false,
 });
 
 const emit = defineEmits<{
@@ -87,19 +91,23 @@ const emit = defineEmits<{
 
 const css = useCssModule();
 const attrs = useAttrs();
+const slots = useSlots();
 
 const { dense, variant, disabled, options } = toRefs(props);
 
 const textInput = ref();
 const activator = ref();
+const noDataContainer = ref();
 const menuRef = ref();
 
 const multiple = computed(() => Array.isArray(props.value));
 
+const shouldApplyValueAsSearch = computed(() => !(slots.selection || get(multiple) || props.chips));
+
 const { focused: searchInputFocused } = useFocus(textInput);
 
 const internalSearch: Ref<string> = ref('');
-const debouncedInternalSearch = refDebounced(internalSearch, 200);
+const debouncedInternalSearch = refDebounced(internalSearch, 100);
 
 const searchInputModel = useVModel(props, 'searchInput', emit, {
   eventName: 'update:search-input',
@@ -109,10 +117,12 @@ watchImmediate(searchInputModel, (search) => {
   set(internalSearch, search);
 });
 
+const justOpened = ref(false);
+
 const filteredOptions = computed(() => {
   const search = get(debouncedInternalSearch);
   const optionsVal = get(options);
-  if (props.noFilter || !search)
+  if (props.noFilter || !search || get(justOpened))
     return optionsVal;
 
   const keyAttr = props.keyAttr;
@@ -138,13 +148,35 @@ const value = computed<(T extends string ? T : Record<K, T>)[]>({
   get: () => {
     const value = props.value;
     const keyAttr = props.keyAttr;
+    const multipleVal = get(multiple);
     const valueToArray = value ? (Array.isArray(value) ? value : [value]) : [];
 
     if (keyAttr && !props.returnObject) {
-      const filtered = get(options).filter(item => valueToArray.includes(item[keyAttr]));
-      return get(multiple) || filtered.length <= 1 ? filtered : [filtered[0]];
+      const filtered: T[] = [];
+      valueToArray.forEach((val) => {
+        const inOptions = get(options).find(item => getIdentifier(item) === val);
+
+        if (inOptions)
+          return filtered.push(inOptions);
+        if (props.customValue)
+          return filtered.push(textValueToProperValue(val));
+      });
+
+      if (multipleVal || filtered.length === 0) {
+        return filtered;
+      }
+      else {
+        const val = filtered[0];
+        if (get(shouldApplyValueAsSearch))
+          updateInternalSearch(getText(val));
+
+        return [val];
+      }
     }
 
+    if (get(shouldApplyValueAsSearch) && valueToArray.length > 0)
+      updateInternalSearch(valueToArray[0]);
+
     return valueToArray;
   },
   set: (selected: T[]) => {
@@ -183,6 +215,7 @@ const {
   highlightedIndex,
   moveHighlight,
   applyHighlighted,
+  optionsWithSelectedHidden,
 } = useDropdownMenu<T, K>({
   itemHeight: props.itemHeight ?? (props.dense ? 30 : 48),
   keyAttr: props.keyAttr,
@@ -194,6 +227,7 @@ const {
   setValue,
   autoSelectFirst: props.autoSelectFirst,
   hideSelected: props.hideSelected,
+
 });
 
 const outlined = computed(() => get(variant) === 'outlined');
@@ -221,9 +255,10 @@ function updateSearchInput(event: any) {
   const value = event.target.value;
   set(isOpen, true);
   updateInternalSearch(value);
+  set(justOpened, false);
 }
 
-function setValue(val: T, index?: number) {
+function setValue(val: T, index?: number, skipRefocused = false) {
   if (isDefined(index))
     set(highlightedIndex, index);
 
@@ -242,11 +277,16 @@ function setValue(val: T, index?: number) {
     nextTick(() => {
       set(isOpen, false);
     });
-    updateInternalSearch();
+    if (get(shouldApplyValueAsSearch))
+      updateInternalSearch(getText(val));
+    else
+      updateInternalSearch();
+
     set(value, [val]);
   }
 
-  set(searchInputFocused, true);
+  if (!skipRefocused)
+    set(searchInputFocused, true);
 }
 
 function setInputFocus() {
@@ -278,10 +318,11 @@ watch(focusedValueIndex, (index) => {
   });
 });
 
-function moveSelectedValueHighlight(next: boolean) {
+function moveSelectedValueHighlight(event: KeyboardEvent, next: boolean) {
   if (!get(multiple))
     return;
 
+  event.preventDefault();
   const total = get(value).length;
 
   let current = get(focusedValueIndex);
@@ -304,23 +345,57 @@ function moveSelectedValueHighlight(next: boolean) {
 }
 
 const { focused: activatorFocusedWithin } = useFocusWithin(activator);
+const { focused: noDataContainerFocusedWithin } = useFocusWithin(noDataContainer);
 const { focused: menuFocusedWithin } = useFocusWithin(containerProps.ref);
-const anyFocused = logicOr(activatorFocusedWithin, menuFocusedWithin);
+const anyFocused = logicOr(activatorFocusedWithin, noDataContainerFocusedWithin, menuFocusedWithin);
+
+function textValueToProperValue(val: any): T {
+  const keyAttr = props.keyAttr;
+  if (!keyAttr)
+    return val;
+
+  const newValue = {
+    [keyAttr]: val,
+  };
+
+  const textAttr = props.textAttr;
+
+  if (textAttr)
+    newValue[textAttr] = val;
+
+  return newValue;
+}
+
+function setSearchAsValue() {
+  const searchToBeValue = get(internalSearch);
+  if (!searchToBeValue)
+    return;
+
+  const newValue: T = textValueToProperValue(searchToBeValue);
+  setValue(newValue, undefined, true);
+}
 
 // Close menu if the activator is not focused anymore
 watch(anyFocused, (focused) => {
   if (!focused) {
     set(isOpen, false);
-    updateInternalSearch();
+    if (props.customValue && get(filteredOptions).length === 0 && get(internalSearch))
+      setSearchAsValue();
+
+    if (!get(shouldApplyValueAsSearch))
+      updateInternalSearch();
   }
 });
 
 function onInputFocused() {
   set(isOpen, true);
   set(focusedValueIndex, -1);
+  get(textInput)?.select();
+  set(justOpened, true);
 }
 
 function clear() {
+  updateInternalSearch();
   emit('input', Array.isArray(props.value) ? [] : null);
 }
 
@@ -352,6 +427,26 @@ function chipListener(item: (T extends string ? T : Record<K, T>), index: number
     'click:close': () => setValue(item),
   };
 }
+
+function onEnter() {
+  if (get(filteredOptions).length > 0 && get(highlightedIndex) > -1) {
+    applyHighlighted();
+  }
+  else if (get(options).length > 0 && props.customValue) {
+    setSearchAsValue();
+    if (!get(multiple))
+      set(isOpen, false);
+  }
+}
+
+function getListeners(on: Record<string, Function | undefined>, $listeners: Record<string, Function | Function[]>) {
+  const listenersFiltered = objectOmit($listeners, ['input']);
+
+  return {
+    ...(props.readOnly ? {} : on),
+    ...listenersFiltered,
+  };
+}
 </script>
 
 <template>
@@ -398,12 +493,15 @@ function chipListener(item: (T extends string ? T : Record<K, T>), index: number
           v-bind="attrs"
           data-id="activator"
           :tabindex="disabled || readOnly ? -1 : 0"
-          v-on="readOnly ? {} : on"
+          v-on="
+            // eslint-disable-next-line vue/no-deprecated-dollar-listeners-api
+            getListeners(on, $listeners)
+          "
           @click="setInputFocus()"
           @focus="setInputFocus()"
-          @keydown.enter="applyHighlighted()"
-          @keydown.left.prevent="moveSelectedValueHighlight(false)"
-          @keydown.right.prevent="moveSelectedValueHighlight(true)"
+          @keydown.enter="onEnter()"
+          @keydown.left="moveSelectedValueHighlight($event, false)"
+          @keydown.right="moveSelectedValueHighlight($event, true)"
           @keydown.up.prevent="moveHighlight(true)"
           @keydown.down.prevent="moveHighlight(false)"
         >
@@ -453,7 +551,7 @@ function chipListener(item: (T extends string ? T : Record<K, T>), index: number
                 </div>
               </RuiChip>
               <div
-                v-else
+                v-else-if="multiple || slots['selection.prepend'] || slots.selection"
                 :key="getIdentifier(item)"
                 class="flex"
               >
@@ -463,6 +561,7 @@ function chipListener(item: (T extends string ? T : Record<K, T>), index: number
                   v-bind="{ item }"
                 />
                 <slot
+                  v-if="slots.selection"
                   :index="i"
                   name="selection"
                   v-bind="{ item, chipAttrs: chipAttrs(item), chipOn: chipListener(item, i) }"
@@ -478,7 +577,7 @@ function chipListener(item: (T extends string ? T : Record<K, T>), index: number
               class="bg-transparent outline-none"
               type="text"
               :placeholder="placeholder"
-              :class="!anyFocused || disabled ? 'w-0 h-0' : 'flex-1 min-w-[4rem]'"
+              :class="(!anyFocused || disabled) && multiple ? 'w-0 h-0' : 'flex-1 min-w-[4rem]'"
               @keydown.delete="onInputDeletePressed()"
               @input="updateSearchInput($event)"
               @focus="onInputFocused()"
@@ -524,7 +623,7 @@ function chipListener(item: (T extends string ? T : Record<K, T>), index: number
     </template>
     <template #default="{ width }">
       <div
-        v-if="filteredOptions.length > 0"
+        v-if="optionsWithSelectedHidden.length > 0"
         :class="[css.menu, menuClass]"
         :style="{ width: `${width}px`, minWidth: menuWidth }"
         v-bind="virtualContainerProps"
@@ -575,11 +674,15 @@ function chipListener(item: (T extends string ? T : Record<K, T>), index: number
 
       <div
         v-else-if="!hideNoData"
+        ref="noDataContainer"
         :style="{ width: `${width}px`, minWidth: menuWidth }"
         :class="menuClass"
       >
         <slot name="no-data">
-          <div class="p-4">
+          <div
+            v-if="!customValue"
+            class="p-4"
+          >
             {{ noDataText }}
           </div>
         </slot>
@@ -680,7 +783,7 @@ function chipListener(item: (T extends string ? T : Record<K, T>), index: number
     }
 
     .value {
-      @apply flex gap-1 flex-wrap;
+      @apply flex gap-1 flex-wrap flex-1;
     }
 
     .clear {
diff --git a/src/components/overlays/menu/Menu.vue b/src/components/overlays/menu/Menu.vue
index 865dee2..943281d 100644
--- a/src/components/overlays/menu/Menu.vue
+++ b/src/components/overlays/menu/Menu.vue
@@ -141,7 +141,7 @@ const { hasError, hasSuccess } = useFormTextDetail(
 </script>
 
 <template>
-  <div @keyup.esc.exact.stop="onLeave()">
+  <div @keydown.esc.stop="onLeave()">
     <div
       ref="activator"
       :class="[css.wrapper, wrapperClass, { 'w-full': fullWidth }]"
diff --git a/src/composables/dropdown-menu.ts b/src/composables/dropdown-menu.ts
index 0291e58..a1d66d5 100644
--- a/src/composables/dropdown-menu.ts
+++ b/src/composables/dropdown-menu.ts
@@ -41,7 +41,7 @@ export function useDropdownMenu<T, K extends keyof T>({
     return options.filter(item => !isActiveItem(item));
   });
 
-  const { containerProps, list, wrapperProps } = useVirtualList<T>(
+  const { containerProps, list, scrollTo, wrapperProps } = useVirtualList<T>(
     options,
     {
       itemHeight,
@@ -149,7 +149,7 @@ export function useDropdownMenu<T, K extends keyof T>({
             highlightedElem?.focus();
         }
         else {
-          container.scrollTop = index * itemHeight;
+          scrollTo(index);
           if (get(autoFocus)) {
             const elem = get(menuRef).getElementsByClassName('highlighted')[0];
             if (elem && 'focus' in elem && typeof elem.focus === 'function')
@@ -190,8 +190,15 @@ export function useDropdownMenu<T, K extends keyof T>({
   });
 
   watch(options, () => {
-    if (get(highlightedIndex) !== -1)
-      set(highlightedIndex, 0);
+    if (get(highlightedIndex) !== -1) {
+      if (get(autoSelectFirst)) {
+        set(highlightedIndex, 0);
+      }
+      else {
+        set(highlightedIndex, -1);
+        scrollTo(0);
+      }
+    }
   });
 
   const moveHighlight = (up: boolean) => {
@@ -237,6 +244,7 @@ export function useDropdownMenu<T, K extends keyof T>({
     itemIndexInValue,
     menuWidth,
     moveHighlight,
+    optionsWithSelectedHidden: options,
     renderedData,
     toggle,
     valueKey,