fix: select combo box input text on next click after dropdown closed (#11324)

Author: ugur-vaadin

packages/combo-box/src/vaadin-combo-box-base-mixin.js

@@ -314,6 +314,13 @@ export const ComboBoxBaseMixin = (superClass) =>
           }
         }
       } else {
+        if (this.autoselect) {
+          // When the dropdown closes, the input remains focused. Mark that the next
+          // host click should re-trigger autoselect, since the normal focus event
+          // won't fire again.
+          this.__autoselectPending = true;
+        }
+
         this._onClosed();
       }
 
@@ -387,6 +394,21 @@ export const ComboBoxBaseMixin = (superClass) =>
 
     /** @private */
     _onClick(event) {
+      // Select the input text on click when autoselect is enabled and a pending
+      // autoselect was set by a dropdown close. This handles the case where the
+      // overlay mousedown listener prevents blur on outside click, so the input
+      // never loses focus and subsequent clicks don't trigger the focus event
+      // where autoselect is normally handled.
+      if (this.autoselect && this.inputElement && this.__autoselectPending) {
+        // Skip if the user has already made a partial text selection
+        // (e.g. by click-dragging).
+        const isTextManuallySelected = this.inputElement.selectionStart !== this.inputElement.selectionEnd;
+        if (!isTextManuallySelected) {
+          this.inputElement.select();
+        }
+      }
+      this.__autoselectPending = false;
+
       if (this._isClearButton(event)) {
         this._onClearButtonClick(event);
       } else if (event.composedPath().includes(this._toggleElement)) {
@@ -716,6 +738,10 @@ export const ComboBoxBaseMixin = (superClass) =>
     _setFocused(focused) {
       super._setFocused(focused);
 
+      if (!focused) {
+        this.__autoselectPending = false;
+      }
+
       if (!focused && !this.readonly && !this._closeOnBlurIsPrevented) {
         this._handleFocusOut();
       }

packages/combo-box/test/basic.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync, nextRender, outsideClick } from '@vaadin/testing-helpers';
+import { escKeyDown, fixtureSync, nextRender, outsideClick } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../src/vaadin-combo-box.js';
 import { getViewportItems, setInputValue } from './helpers.js';
@@ -185,6 +185,143 @@ describe('basic features', () => {
         input.focus();
         expect(spy.calledOnce).to.be.true;
       });
+
+      it('should select content on host click after dropdown close', () => {
+        comboBox.items = ['foo', 'bar'];
+        comboBox.value = 'foo';
+        comboBox.autoselect = true;
+        input.focus();
+
+        comboBox.open();
+        comboBox.close();
+
+        const spy = sinon.spy(input, 'select');
+        comboBox.click();
+        expect(spy.calledOnce).to.be.true;
+      });
+
+      it('should not select content on second host click after dropdown close', () => {
+        comboBox.items = ['foo', 'bar'];
+        comboBox.value = 'foo';
+        comboBox.autoselect = true;
+        input.focus();
+
+        comboBox.open();
+        comboBox.close();
+
+        comboBox.click();
+
+        const spy = sinon.spy(input, 'select');
+        comboBox.click();
+        expect(spy.called).to.be.false;
+      });
+
+      it('should select content on host click after Escape close', () => {
+        comboBox.items = ['foo', 'bar'];
+        comboBox.value = 'foo';
+        comboBox.autoselect = true;
+        input.focus();
+
+        comboBox.open();
+        escKeyDown(input);
+
+        const spy = sinon.spy(input, 'select');
+        comboBox.click();
+        expect(spy.calledOnce).to.be.true;
+      });
+
+      it('should select content on host click after outside click close', () => {
+        comboBox.items = ['foo', 'bar'];
+        comboBox.value = 'foo';
+        comboBox.autoselect = true;
+        input.focus();
+
+        comboBox.open();
+        outsideClick();
+        // Focus again to match browser behavior
+        input.focus();
+        input.setSelectionRange(0, 0);
+
+        const spy = sinon.spy(input, 'select');
+        comboBox.click();
+        expect(spy.calledOnce).to.be.true;
+      });
+
+      it('should select content on host click after dropdown close when autoOpenDisabled', () => {
+        comboBox.items = ['foo', 'bar'];
+        comboBox.value = 'foo';
+        comboBox.autoselect = true;
+        comboBox.autoOpenDisabled = true;
+        input.focus();
+
+        comboBox.open();
+        comboBox.close();
+
+        const spy = sinon.spy(input, 'select');
+        comboBox.click();
+        expect(spy.calledOnce).to.be.true;
+      });
+
+      it('should not select content on second host click when autoOpenDisabled', () => {
+        comboBox.items = ['foo', 'bar'];
+        comboBox.value = 'foo';
+        comboBox.autoselect = true;
+        comboBox.autoOpenDisabled = true;
+        input.focus();
+
+        comboBox.open();
+        comboBox.close();
+
+        comboBox.click();
+
+        const spy = sinon.spy(input, 'select');
+        comboBox.click();
+        expect(spy.called).to.be.false;
+      });
+
+      it('should select content on toggle button click after dropdown close', () => {
+        comboBox.items = ['foo', 'bar'];
+        comboBox.value = 'foo';
+        comboBox.autoselect = true;
+        input.focus();
+
+        comboBox.open();
+        comboBox.close();
+
+        const spy = sinon.spy(input, 'select');
+        comboBox.$.toggleButton.click();
+        expect(spy.calledOnce).to.be.true;
+      });
+
+      it('should not select all when user has partially selected text', () => {
+        comboBox.items = ['foo', 'bar'];
+        comboBox.value = 'foo';
+        comboBox.autoselect = true;
+        input.focus();
+
+        comboBox.open();
+        comboBox.close();
+
+        // Simulate user drag-selecting part of the text
+        input.setSelectionRange(0, 2);
+
+        const spy = sinon.spy(input, 'select');
+        comboBox.click();
+        expect(spy.called).to.be.false;
+      });
+
+      it('should not select content on host click when autoselect is false', () => {
+        comboBox.items = ['foo', 'bar'];
+        comboBox.value = 'foo';
+        input.focus();
+
+        comboBox.open();
+        comboBox.close();
+
+        const spy = sinon.spy(input, 'select');
+        comboBox.click();
+        expect(spy.called).to.be.false;
+      });
     });
   });