fix: reset focused index when ignoring value commit

Author: web-padawan

packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-mixin.js

@@ -499,6 +499,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       // Do not commit focused item on not blur / outside click
       if (this._ignoreCommitValue) {
         this._inputElementValue = '';
+        this._focusedIndex = -1;
         this._ignoreCommitValue = false;
       } else {
         this.__commitUserInput();

packages/multi-select-combo-box/test/selecting-items.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { resetMouse, sendKeys, sendMouse } from '@vaadin/test-runner-commands';
+import { resetMouse, sendKeys, sendMouse, sendMouseToElement } from '@vaadin/test-runner-commands';
 import { fixtureSync, keyboardEventFor, nextRender } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../src/vaadin-multi-select-combo-box.js';
@@ -155,6 +155,32 @@ describe('selecting items', () => {
       expect(comboBox.selectedItems).to.deep.equal([]);
     });
 
+    it('should reset the item focused state when closing on outside click', async () => {
+      await sendKeys({ press: 'ArrowDown' });
+      await sendKeys({ press: 'ArrowDown' });
+      await sendMouseToElement({ type: 'click', element: document.body });
+      await resetMouse();
+
+      await sendKeys({ press: 'ArrowDown' });
+      const item = getFirstItem(comboBox);
+      expect(item.hasAttribute('focused')).to.be.false;
+    });
+
+    it('should reset the item focused state when closing on blur', async () => {
+      await sendKeys({ press: 'ArrowDown' });
+      await sendKeys({ press: 'ArrowDown' });
+
+      // Blur the combo-box
+      await sendKeys({ press: 'Shift+Tab' });
+
+      // Focus and re-open
+      await sendKeys({ press: 'Tab' });
+
+      await sendKeys({ press: 'ArrowDown' });
+      const item = getFirstItem(comboBox);
+      expect(item.hasAttribute('focused')).to.be.false;
+    });
+
     it('should not select an item on blur when it is focused', async () => {
       await sendKeys({ down: 'ArrowDown' });
       await sendKeys({ down: 'ArrowDown' });