fix: fix focus issues in complex input controls

src/elements/internal/InternalFrequencyControl/InternalFrequencyControl.test.ts

@@ -557,4 +557,29 @@ describe('InternalFrequencyControl', () => {
 
     focusStub.restore();
   });
+
+  it('does not focus input when clicking on SELECT element', async () => {
+    const layout = html`<test-internal-frequency-control
+      layout="summary-item"
+    ></test-internal-frequency-control>`;
+    const control = await fixture<TestControl>(layout);
+
+    const input = control.renderRoot.querySelector('vaadin-integer-field')?.querySelector('input');
+    if (!input) return;
+
+    const focusStub = stub(input, 'focus');
+    const select = document.createElement('select');
+
+    const mockEvent = new MouseEvent('click', { bubbles: true });
+    Object.defineProperty(mockEvent, 'composedPath', {
+      value: () => [select],
+    });
+
+    // @ts-expect-error accessing protected member for testing purposes
+    control._handleHostClick(mockEvent);
+
+    expect(focusStub).to.not.have.been.called;
+
+    focusStub.restore();
+  });
 });

src/elements/internal/InternalFrequencyControl/InternalFrequencyControl.ts

@@ -157,7 +157,7 @@ export class InternalFrequencyControl extends InternalEditableControl {
   protected _handleHostClick(evt: MouseEvent): void {
     if (this.layout !== 'summary-item') return;
     const composedPath = evt.composedPath() as HTMLElement[];
-    const noOp = new Set(['INPUT', 'LABEL']);
+    const noOp = new Set(['INPUT', 'LABEL', 'SELECT']);
     if (!composedPath.some(el => noOp.has(el.tagName))) {
       this.renderRoot.querySelector('input')?.focus();
       super._handleHostClick(evt);

src/elements/internal/InternalNativeDateControl/InternalNativeDateControl.test.ts

@@ -406,4 +406,26 @@ describe('InternalNativeDateControl', () => {
 
     focusStub.restore();
   });
+
+  it('does not focus input when clicking on BUTTON element', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-native-date-control></test-internal-native-date-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+    const focusStub = stub(input, 'focus');
+    const button = document.createElement('button');
+
+    const mockEvent = new MouseEvent('click', { bubbles: true });
+    Object.defineProperty(mockEvent, 'composedPath', {
+      value: () => [button],
+    });
+
+    // @ts-expect-error accessing protected member for testing purposes
+    control._handleHostClick(mockEvent);
+
+    expect(focusStub).to.not.have.been.called;
+
+    focusStub.restore();
+  });
 });

src/elements/internal/InternalNativeDateControl/InternalNativeDateControl.ts

@@ -115,7 +115,7 @@ export class InternalNativeDateControl extends InternalEditableControl {
 
   protected _handleHostClick(evt: MouseEvent): void {
     const composedPath = evt.composedPath() as HTMLElement[];
-    const noOp = new Set(['INPUT', 'LABEL']);
+    const noOp = new Set(['INPUT', 'LABEL', 'BUTTON']);
     if (!composedPath.some(el => noOp.has(el.tagName))) {
       this.renderRoot.querySelector('input')?.focus();
       super._handleHostClick(evt);

src/elements/internal/InternalSelectControl/InternalSelectControl.test.ts

@@ -467,4 +467,27 @@ describe('InternalSelectControl', () => {
 
     focusStub.restore();
   });
+
+  it('does not focus select when clicking on BUTTON element', async () => {
+    const layout = html`<test-internal-select-control
+      layout="summary-item"
+    ></test-internal-select-control>`;
+    const control = await fixture<TestControl>(layout);
+
+    const select = control.renderRoot.querySelector('select')!;
+    const focusStub = stub(select, 'focus');
+    const button = document.createElement('button');
+
+    const mockEvent = new MouseEvent('click', { bubbles: true });
+    Object.defineProperty(mockEvent, 'composedPath', {
+      value: () => [button],
+    });
+
+    // @ts-expect-error accessing protected member for testing purposes
+    control._handleHostClick(mockEvent);
+
+    expect(focusStub).to.not.have.been.called;
+
+    focusStub.restore();
+  });
 });

src/elements/internal/InternalSelectControl/InternalSelectControl.ts

@@ -158,7 +158,7 @@ export class InternalSelectControl extends InternalEditableControl {
   protected _handleHostClick(evt: MouseEvent): void {
     if (this.layout !== 'summary-item') return;
     const composedPath = evt.composedPath() as HTMLElement[];
-    const noOp = new Set(['SELECT', 'LABEL']);
+    const noOp = new Set(['SELECT', 'LABEL', 'BUTTON']);
     if (!composedPath.some(el => noOp.has(el.tagName))) {
       this.renderRoot.querySelector('select')?.focus();
       super._handleHostClick(evt);

src/elements/internal/InternalTextControl/InternalTextControl.test.ts

@@ -580,4 +580,29 @@ describe('InternalTextControl', () => {
 
     focusStub.restore();
   });
+
+  it('does not focus input when clicking on BUTTON element', async () => {
+    const layout = html`<test-internal-text-control
+      layout="summary-item"
+    ></test-internal-text-control>`;
+    const control = await fixture<TestControl>(layout);
+
+    const input = control.renderRoot.querySelector('vaadin-text-field')?.querySelector('input');
+    if (!input) return;
+
+    const focusStub = stub(input, 'focus');
+    const button = document.createElement('button');
+
+    const mockEvent = new MouseEvent('click', { bubbles: true });
+    Object.defineProperty(mockEvent, 'composedPath', {
+      value: () => [button],
+    });
+
+    // @ts-expect-error accessing protected member for testing purposes
+    control._handleHostClick(mockEvent);
+
+    expect(focusStub).to.not.have.been.called;
+
+    focusStub.restore();
+  });
 });

src/elements/internal/InternalTextControl/InternalTextControl.ts

@@ -91,7 +91,7 @@ export class InternalTextControl extends InternalEditableControl {
   protected _handleHostClick(evt: MouseEvent): void {
     if (this.layout !== 'summary-item') return;
     const composedPath = evt.composedPath() as HTMLElement[];
-    const noOp = new Set(['INPUT', 'LABEL']);
+    const noOp = new Set(['INPUT', 'LABEL', 'BUTTON']);
     if (!composedPath.some(el => noOp.has(el.tagName))) {
       this.renderRoot.querySelector('input')?.focus();
       super._handleHostClick(evt);