fix: stop measure when pressing enter with empty result (#2662)

components/mentions/__tests__/index.test.js

@@ -2,8 +2,9 @@ import { mount } from '@vue/test-utils';
 import Vue from 'vue';
 import Mentions from '..';
 import focusTest from '../../../tests/shared/focusTest';
+import KeyCode from '../../_util/KeyCode';
 
-const { getMentions } = Mentions;
+const { getMentions, Option } = Mentions;
 
 function $$(className) {
   return document.body.querySelectorAll(className);
@@ -86,5 +87,28 @@ describe('Mentions', () => {
     });
   });
 
+  it('notExist', async () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <Mentions>
+            <Option value="bamboo">Bamboo</Option>
+            <Option value="light">Light</Option>
+            <Option value="cat">Cat</Option>
+          </Mentions>
+        );
+      },
+    });
+
+    triggerInput(wrapper, '@notExist');
+    jest.runAllTimers();
+
+    wrapper.find('textarea').element.keyCode = KeyCode.ENTER;
+    wrapper.find('textarea').trigger('keydown');
+    jest.runAllTimers();
+
+    expect(wrapper.find('textarea').element.value).toBe('@notExist');
+  });
+
   focusTest(Mentions);
 });

components/vc-mentions/src/Mentions.jsx

@@ -97,9 +97,14 @@ const Mentions = {
         this.stopMeasure();
       } else if (which === KeyCode.ENTER) {
         // Measure hit
-        const option = this.getOptions()[activeIndex];
-        this.selectOption(option);
         event.preventDefault();
+        const options = this.getOptions();
+        if (!options.length) {
+          this.stopMeasure();
+          return;
+        }
+        const option = options[activeIndex];
+        this.selectOption(option);
       }
     },
     /**