feat: more clear input autofocus in summary-item layouts

Author: pheekus

src/elements/internal/InternalEditableControl/InternalEditableControl.test.ts

@@ -7,6 +7,7 @@ import { getTestData } from '../../../testgen/getTestData';
 import { InternalEditableControl } from './index';
 import { InternalControl } from '../InternalControl/InternalControl';
 import { AddressForm } from '../../public/AddressForm/AddressForm';
+import { stub, match } from 'sinon';
 
 import set from 'lodash-es/set';
 
@@ -350,4 +351,41 @@ describe('InternalEditableControl', () => {
       timeout: 5000,
     });
   });
+
+  it('registers click event listener on connect', async () => {
+    const control = new InternalEditableControl();
+    const addEventListenerStub = stub(control, 'addEventListener');
+
+    control.connectedCallback?.();
+
+    expect(addEventListenerStub).to.have.been.calledWith('click', match.func);
+
+    addEventListenerStub.restore();
+  });
+
+  it('removes click event listener on disconnect', async () => {
+    const control = new InternalEditableControl();
+    const removeEventListenerStub = stub(control, 'removeEventListener');
+
+    control.disconnectedCallback?.();
+
+    expect(removeEventListenerStub).to.have.been.calledWith('click', match.func);
+
+    removeEventListenerStub.restore();
+  });
+
+  it('calls _handleHostClick when click event is fired', async () => {
+    const control = await fixture<InternalEditableControl>(html`
+      <foxy-internal-editable-control></foxy-internal-editable-control>
+    `);
+
+    const handleHostClickStub = stub(control, '_handleHostClick' as any);
+
+    const mockEvent = new MouseEvent('click', { bubbles: true });
+    control.dispatchEvent(mockEvent);
+
+    expect(handleHostClickStub).to.have.been.calledOnce;
+
+    handleHostClickStub.restore();
+  });
 });

src/elements/internal/InternalEditableControl/InternalEditableControl.ts

@@ -90,6 +90,10 @@ export class InternalEditableControl extends InternalControl {
     this.__asyncError = validOrError === true ? null : validOrError ?? null;
   }, 300);
 
+  private __handleHostClick = (evt: MouseEvent) => {
+    return this._handleHostClick(evt);
+  };
+
   private __previousValue: unknown | null = null;
 
   private __placeholder: string | null = null;
@@ -239,6 +243,20 @@ export class InternalEditableControl extends InternalControl {
     } while (walker.nextNode());
   }
 
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener('click', this.__handleHostClick);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this.__handleHostClick);
+  }
+
+  protected _handleHostClick(evt: MouseEvent): void {
+    // Override in subclasses.
+  }
+
   /**
    * A shortcut to get the inferred value from the NucleonElement instance
    * up the DOM tree. If no such value or instance exists, returns `undefined`.

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

@@ -463,4 +463,98 @@ describe('InternalFrequencyControl', () => {
     expect(input).to.have.property('value', '2');
     expect(select).to.have.property('value', 'times_a_month');
   });
+
+  it('focuses input when clicking outside INPUT and LABEL in summary-item layout', 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; // Skip if input not found
+
+    const focusStub = stub(input, 'focus');
+
+    const mockEvent = new MouseEvent('click', { bubbles: true });
+    Object.defineProperty(mockEvent, 'composedPath', {
+      value: () => [control],
+    });
+
+    // @ts-expect-error accessing protected member for testing purposes
+    control._handleHostClick(mockEvent);
+
+    expect(focusStub).to.have.been.calledOnce;
+
+    focusStub.restore();
+  });
+
+  it('does not focus input when layout is not summary-item', async () => {
+    const layout = html`<test-internal-frequency-control></test-internal-frequency-control>`;
+    const control = await fixture<TestControl>(layout);
+
+    const input = control.renderRoot.querySelector('input');
+    const focusStub = input ? stub(input, 'focus') : null;
+
+    const mockEvent = new MouseEvent('click', { bubbles: true });
+    Object.defineProperty(mockEvent, 'composedPath', {
+      value: () => [control],
+    });
+
+    // @ts-expect-error accessing protected member for testing purposes
+    control._handleHostClick(mockEvent);
+
+    if (focusStub) {
+      expect(focusStub).to.not.have.been.called;
+      focusStub.restore();
+    }
+  });
+
+  it('does not focus input when clicking on INPUT 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 mockEvent = new MouseEvent('click', { bubbles: true });
+    Object.defineProperty(mockEvent, 'composedPath', {
+      value: () => [input],
+    });
+
+    // @ts-expect-error accessing protected member for testing purposes
+    control._handleHostClick(mockEvent);
+
+    expect(focusStub).to.not.have.been.called;
+
+    focusStub.restore();
+  });
+
+  it('does not focus input when clicking on LABEL 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 label = document.createElement('label');
+
+    const mockEvent = new MouseEvent('click', { bubbles: true });
+    Object.defineProperty(mockEvent, 'composedPath', {
+      value: () => [label],
+    });
+
+    // @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

@@ -154,6 +154,16 @@ export class InternalFrequencyControl extends InternalEditableControl {
     if (field && field.value !== this._value) field.value = (this._value ?? '') as string;
   }
 
+  protected _handleHostClick(evt: MouseEvent): void {
+    if (this.layout !== 'summary-item') return;
+    const composedPath = evt.composedPath() as HTMLElement[];
+    const noOp = new Set(['INPUT', 'LABEL']);
+    if (!composedPath.some(el => noOp.has(el.tagName))) {
+      this.renderRoot.querySelector('input')?.focus();
+      super._handleHostClick(evt);
+    }
+  }
+
   private __renderSummaryItemLayout() {
     const value = (this._value ?? '') as string;
     const [strCount, units] = this.__i18n.parseValue(value);

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

@@ -342,4 +342,68 @@ describe('InternalNativeDateControl', () => {
     const button = control.renderRoot.querySelector('button');
     expect(button).to.have.property('disabled', true);
   });
+
+  it('focuses input when clicking outside INPUT and LABEL elements', 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 mockEvent = new MouseEvent('click', { bubbles: true });
+    Object.defineProperty(mockEvent, 'composedPath', {
+      value: () => [control],
+    });
+
+    // @ts-expect-error accessing protected member for testing purposes
+    control._handleHostClick(mockEvent);
+
+    expect(focusStub).to.have.been.calledOnce;
+
+    focusStub.restore();
+  });
+
+  it('does not focus input when clicking on INPUT 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 mockEvent = new MouseEvent('click', { bubbles: true });
+    Object.defineProperty(mockEvent, 'composedPath', {
+      value: () => [input],
+    });
+
+    // @ts-expect-error accessing protected member for testing purposes
+    control._handleHostClick(mockEvent);
+
+    expect(focusStub).to.not.have.been.called;
+
+    focusStub.restore();
+  });
+
+  it('does not focus input when clicking on LABEL 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 label = document.createElement('label');
+
+    const mockEvent = new MouseEvent('click', { bubbles: true });
+    Object.defineProperty(mockEvent, 'composedPath', {
+      value: () => [label],
+    });
+
+    // @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

@@ -112,4 +112,13 @@ export class InternalNativeDateControl extends InternalEditableControl {
   protected set _value(newValue: string) {
     super._value = newValue as unknown | undefined;
   }
+
+  protected _handleHostClick(evt: MouseEvent): void {
+    const composedPath = evt.composedPath() as HTMLElement[];
+    const noOp = new Set(['INPUT', 'LABEL']);
+    if (!composedPath.some(el => noOp.has(el.tagName))) {
+      this.renderRoot.querySelector('input')?.focus();
+      super._handleHostClick(evt);
+    }
+  }
 }

src/elements/internal/InternalNumberControl/InternalNumberControl.test.ts

@@ -381,4 +381,98 @@ describe('InternalNumberControl', () => {
 
     submitMethod.restore();
   });
+
+  it('focuses input when clicking outside INPUT and LABEL in summary-item layout', async () => {
+    const layout = html`<test-internal-number-control
+      layout="summary-item"
+    ></test-internal-number-control>`;
+    const control = await fixture<TestControl>(layout);
+
+    const input = control.renderRoot.querySelector('vaadin-number-field')?.querySelector('input');
+    if (!input) return; // Skip if input not found
+
+    const focusStub = stub(input, 'focus');
+
+    const mockEvent = new MouseEvent('click', { bubbles: true });
+    Object.defineProperty(mockEvent, 'composedPath', {
+      value: () => [control],
+    });
+
+    // @ts-expect-error accessing protected member for testing purposes
+    control._handleHostClick(mockEvent);
+
+    expect(focusStub).to.have.been.calledOnce;
+
+    focusStub.restore();
+  });
+
+  it('does not focus input when layout is not summary-item', async () => {
+    const layout = html`<test-internal-number-control></test-internal-number-control>`;
+    const control = await fixture<TestControl>(layout);
+
+    const input = control.renderRoot.querySelector('input');
+    const focusStub = input ? stub(input, 'focus') : null;
+
+    const mockEvent = new MouseEvent('click', { bubbles: true });
+    Object.defineProperty(mockEvent, 'composedPath', {
+      value: () => [control],
+    });
+
+    // @ts-expect-error accessing protected member for testing purposes
+    control._handleHostClick(mockEvent);
+
+    if (focusStub) {
+      expect(focusStub).to.not.have.been.called;
+      focusStub.restore();
+    }
+  });
+
+  it('does not focus input when clicking on INPUT element', async () => {
+    const layout = html`<test-internal-number-control
+      layout="summary-item"
+    ></test-internal-number-control>`;
+    const control = await fixture<TestControl>(layout);
+
+    const input = control.renderRoot.querySelector('vaadin-number-field')?.querySelector('input');
+    if (!input) return;
+
+    const focusStub = stub(input, 'focus');
+
+    const mockEvent = new MouseEvent('click', { bubbles: true });
+    Object.defineProperty(mockEvent, 'composedPath', {
+      value: () => [input],
+    });
+
+    // @ts-expect-error accessing protected member for testing purposes
+    control._handleHostClick(mockEvent);
+
+    expect(focusStub).to.not.have.been.called;
+
+    focusStub.restore();
+  });
+
+  it('does not focus input when clicking on LABEL element', async () => {
+    const layout = html`<test-internal-number-control
+      layout="summary-item"
+    ></test-internal-number-control>`;
+    const control = await fixture<TestControl>(layout);
+
+    const input = control.renderRoot.querySelector('vaadin-number-field')?.querySelector('input');
+    if (!input) return;
+
+    const focusStub = stub(input, 'focus');
+    const label = document.createElement('label');
+
+    const mockEvent = new MouseEvent('click', { bubbles: true });
+    Object.defineProperty(mockEvent, 'composedPath', {
+      value: () => [label],
+    });
+
+    // @ts-expect-error accessing protected member for testing purposes
+    control._handleHostClick(mockEvent);
+
+    expect(focusStub).to.not.have.been.called;
+
+    focusStub.restore();
+  });
 });

src/elements/internal/InternalNumberControl/InternalNumberControl.ts

@@ -100,6 +100,16 @@ export class InternalNumberControl 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']);
+    if (!composedPath.some(el => noOp.has(el.tagName))) {
+      this.renderRoot.querySelector('input')?.focus();
+      super._handleHostClick(evt);
+    }
+  }
+
   private __renderSummaryItemLayout() {
     return html`
       <div class="leading-xs">