fix(AutoComplete): remove selection if option no longer exist

rotki · Jun 18, 2024 · 5505b2b · 5505b2b
1 parent c5f6300
commit 5505b2b
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 14 deletions.
diff --git a/src/components/forms/auto-complete/RuiAutoComplete.spec.ts b/src/components/forms/auto-complete/RuiAutoComplete.spec.ts
@@ -172,6 +172,20 @@ describe('autocomplete', () => {
 
     newValue = ['8', '6'];
     expect(wrapper.emitted().input!.at(-1)![0]).toEqual(newValue);
+
+    // Delete option should also remove selected value with that option
+    await wrapper.setProps({
+      value: newValue,
+    });
+    const newOptions = options.filter(item => item.id !== '8');
+
+    await wrapper.setProps({
+      options: newOptions,
+    });
+    await nextTick();
+
+    newValue = ['6'];
+    expect(wrapper.emitted().input!.at(-1)![0]).toEqual(newValue);
   });
 
   it('custom value', async () => {

diff --git a/src/components/forms/auto-complete/RuiAutoComplete.vue b/src/components/forms/auto-complete/RuiAutoComplete.vue
@@ -144,25 +144,43 @@ function input(value: ModelValue) {
   emit('input', value);
 }
 
+function setSelected(selected: T[]) {
+  const keyAttr = props.keyAttr;
+  const selection = keyAttr && !props.returnObject ? selected.map(item => item[keyAttr]) : selected;
+
+  if (get(multiple))
+    return input(selection);
+
+  if (selection.length === 0)
+    return input(null);
+
+  return input(selection[0]);
+}
+
 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]) : [];
+    const optionsVal = get(options);
 
     if (keyAttr && !props.returnObject) {
       const filtered: T[] = [];
       valueToArray.forEach((val) => {
-        const inOptions = get(options).find(item => getIdentifier(item) === val);
+        const inOptions = optionsVal.find(item => getIdentifier(item) === val);
 
         if (inOptions)
           return filtered.push(inOptions);
         if (props.customValue)
           return filtered.push(textValueToProperValue(val));
       });
 
-      if (multipleVal || filtered.length === 0) {
+      if (multipleVal) {
+        return filtered;
+      }
+      else if (filtered.length === 0 && get(shouldApplyValueAsSearch)) {
+        updateInternalSearch();
         return filtered;
       }
       else {
@@ -174,23 +192,35 @@ const value = computed<(T extends string ? T : Record<K, T>)[]>({
       }
     }
 
-    if (get(shouldApplyValueAsSearch) && valueToArray.length > 0)
-      updateInternalSearch(valueToArray[0]);
+    const filtered: T[] = [];
+    valueToArray.forEach((val) => {
+      const inOptions = optionsVal.find(item => item === val);
+
+      if (inOptions)
+        return filtered.push(inOptions);
+      if (props.customValue)
+        return filtered.push(val);
+    });
 
-    return valueToArray;
+    if (get(shouldApplyValueAsSearch)) {
+      if (filtered.length > 0)
+        updateInternalSearch(filtered[0]);
+      else
+        updateInternalSearch();
+    }
+
+    return filtered;
   },
   set: (selected: T[]) => {
-    const keyAttr = props.keyAttr;
-    const selection = keyAttr && !props.returnObject ? selected.map(item => item[keyAttr]) : selected;
-
-    if (get(multiple))
-      return input(selection);
+    setSelected(selected);
+  },
+});
 
-    if (selection.length === 0)
-      return input(null);
+watch(options, () => {
+  if (props.customValue)
+    return;
 
-    return input(selection[0]);
-  },
+  setSelected(get(value));
 });
 
 const valueSet = computed(() => get(value).length > 0);