fix(components): el-select-allow-dynamically-update-options (#6473)

* fix(components):[select] (#6458)

* fix(components): [select] allow create

* fix(components): [select] allow create code review

packages/components/select/__tests__/select.spec.ts

@@ -729,6 +729,46 @@ describe('Select', () => {
     expect((wrapper.vm as any).value).toBe('new')
   })
 
+  test('allow create async option', async () => {
+    const options = [
+      {
+        value: '选项1',
+        label: '黄金糕',
+      },
+      {
+        value: '选项2',
+        label: '双皮奶',
+      },
+    ]
+    wrapper = _mount(
+      `
+      <el-select
+        v-model="value"
+        filterable
+        allowCreate
+      >
+        <el-option
+          v-for="item in options"
+          :label="item.label"
+          :key="item.value"
+          :value="item.value">
+        </el-option>
+      </el-select>
+    `,
+      () => ({
+        options: [],
+        value: '选项2',
+      })
+    )
+
+    await nextTick()
+    expect(getOptions()).toHaveLength(1)
+    await wrapper.setData({
+      options,
+    })
+    expect(getOptions()).toHaveLength(options.length)
+  })
+
   test('multiple select', async () => {
     wrapper = getSelectVm({ multiple: true })
     await wrapper.find('.select-trigger').trigger('click')

packages/components/select/src/option.vue

@@ -69,15 +69,14 @@ export default defineComponent({
     onBeforeUnmount(() => {
       const { selected } = select
       const selectedOptions = select.props.multiple ? selected : [selected]
-      const doesExist = select.cachedOptions.has(key)
       const doesSelected = selectedOptions.some((item) => {
         return item.value === (vm as unknown as SelectOptionProxy).value
       })
       // if option is not selected, remove it from cache
-      if (doesExist && !doesSelected) {
+      if (select.cachedOptions.get(key) === vm && !doesSelected) {
         select.cachedOptions.delete(key)
       }
-      select.onOptionDestroy(key)
+      select.onOptionDestroy(key, vm)
     })
 
     function selectOptionClick() {

packages/components/select/src/useSelect.ts

@@ -670,10 +670,12 @@ export const useSelect = (props, states: States, ctx) => {
     states.cachedOptions.set(vm.value, vm)
   }
 
-  const onOptionDestroy = (key) => {
-    states.optionsCount--
-    states.filteredOptionsCount--
-    states.options.delete(key)
+  const onOptionDestroy = (key, vm: SelectOptionProxy) => {
+    if (states.options.get(key) === vm) {
+      states.optionsCount--
+      states.filteredOptionsCount--
+      states.options.delete(key)
+    }
   }
 
   const resetInputState = (e: KeyboardEvent) => {