Selecting an input prefix/suffix should should focus the associated input

src/components/card/_card.scss

@@ -11,7 +11,7 @@
     & > .ons-card__title {
       margin-bottom: 0;
     }
-  } 
+  }
 
   &__link:hover {
     text-decoration-thickness: 3px;

src/components/input/_input-type.scss

@@ -14,12 +14,12 @@
     z-index: 1;
 
     &:focus {
-      // Overide default input focus so it can wrap prefix/suffix too
+      // Override default input focus so it can wrap prefix/suffix too
       box-shadow: none;
       outline: none;
     }
 
-    // Overide default input error style so it can wrap prefix/suffix too
+    // Override default input error style so it can wrap prefix/suffix too
     &.ons-input--error:not(:focus) {
       border-right: $input-border-width solid var(--ons-color-input-border);
       box-shadow: none;

src/components/input/_macro.njk

@@ -76,7 +76,7 @@
                     {% set prefixClass = " ons-input-type--prefix" %}
                 {% endif %}
 
-                <span class="ons-input-type{{ prefixClass }}">
+                <span class="ons-input-type{{ prefixClass }}{% if params.prefix or params.suffix %} ons-js-input-container-abbr{% endif %}">
                     <span class="ons-input-type__inner">
                         {{ input | safe }}
 

src/components/input/_macro.spec.js

@@ -3,7 +3,7 @@
 import * as cheerio from 'cheerio';
 
 import axe from '../../tests/helpers/axe';
-import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+import { renderComponent, templateFaker} from '../../tests/helpers/rendering';
 
 const EXAMPLE_INPUT_MINIMAL = {
   id: 'example-id',
@@ -245,7 +245,7 @@ describe('macro: input', () => {
     expect($('.ons-input').attr('autocomplete')).toBe('on');
   });
 
-  it.each([['email'], ['tel'], ['text']])('outputs `type` attribute of "%s"', type => {
+  it.each([['email'], ['tel'], ['text']])('outputs `type` attribute of "%s"', (type) => {
     const $ = cheerio.load(
       renderComponent('input', {
         ...EXAMPLE_INPUT_MINIMAL,
@@ -421,11 +421,7 @@ describe('macro: input', () => {
 
       expect($('.ons-input-type--prefix .ons-js-input-abbr').attr('id')).toBe('example-prefix-id');
       expect($('.ons-input-type--prefix .ons-js-input-abbr').attr('title')).toBe('Example prefix title');
-      expect(
-        $('.ons-input-type--prefix .ons-js-input-abbr')
-          .text()
-          .trim(),
-      ).toBe('Example prefix text');
+      expect($('.ons-input-type--prefix .ons-js-input-abbr').text().trim()).toBe('Example prefix text');
     });
 
     it('does not render prefix element when `prefix.id` not set', () => {
@@ -483,11 +479,7 @@ describe('macro: input', () => {
 
       expect($('.ons-js-input-abbr').attr('id')).toBe('example-suffix-id');
       expect($('.ons-js-input-abbr').attr('title')).toBe('Example suffix title');
-      expect(
-        $('.ons-js-input-abbr')
-          .text()
-          .trim(),
-      ).toBe('Example suffix text');
+      expect($('.ons-js-input-abbr').text().trim()).toBe('Example suffix text');
     });
 
     it('does not render suffix element when `suffix.id` not set', () => {
@@ -653,11 +645,7 @@ describe('macro: input', () => {
       );
 
       expect($('a.ons-input__post-link').attr('href')).toBe('https://example.com/link');
-      expect(
-        $('a.ons-input__post-link')
-          .text()
-          .trim(),
-      ).toBe('Example link');
+      expect($('a.ons-input__post-link').text().trim()).toBe('Example link');
     });
   });
 

src/components/input/input.dom.js

@@ -0,0 +1,11 @@
+import domready from '../../js/domready';
+
+domready(async () => {
+  const abbrInputs = [...document.querySelectorAll('.ons-js-input-container-abbr')];
+
+  if (abbrInputs.length) {
+    const abbrInput = (await import('./input')).default;
+
+    abbrInputs.forEach((element) => new abbrInput(element));
+  }
+});

src/components/input/input.js

@@ -0,0 +1,14 @@
+export default class AbbrInput {
+  constructor(context) {
+    this.abbrInput = context;
+    this.bindEventListeners();
+  }
+
+  bindEventListeners() {
+    this.abbrInput.querySelector('.ons-js-input-abbr').addEventListener('click', this.handleClick.bind(this));
+  }
+
+  handleClick() {
+    this.abbrInput.querySelector('.ons-input').focus();
+  }
+}

src/components/input/input.spec.js

@@ -0,0 +1,28 @@
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_INPUT_MINIMAL = {
+  id: 'example-id',
+  name: 'example-name',
+};
+
+describe('script: input', () => {
+  it('focuses input when abbreviation is clicked', async () => {
+    await setTestPage(
+      '/test',
+      renderComponent('input', {
+        ...EXAMPLE_INPUT_MINIMAL,
+        prefix: {
+          id: 'example-prefix-id',
+          title: 'Example prefix title',
+          text: 'Example prefix text',
+        },
+      }),
+    );
+    await page.click('.ons-js-input-abbr');
+    const focusedElementId = await page.evaluate(() => document.activeElement.id);
+    expect(focusedElementId).toEqual('example-id');
+  });
+});

src/js/main.js

@@ -18,6 +18,7 @@ import '../components/radios/radios.dom';
 import '../components/autosuggest/autosuggest.dom';
 import '../components/address-input/autosuggest.address.dom';
 import '../components/input/character-check.dom';
+import '../components/input/input.dom';
 import '../components/cookies-banner/cookies-banner.dom';
 import '../components/button/button.dom';
 import '../components/reply/reply.dom';

src/scss/objects/_page.scss

@@ -21,13 +21,11 @@
   @include mq(xxs, m) {
     margin-top: 1.5rem;
   }
-
 }
 
 // Adjust margin-top when .ons-page__main contains .ons-panel--error */
-.ons-breadcrumbs ~ .ons-grid .ons-grid__col .ons-page__main:has(.ons-panel--error){
-  margin-top: 1rem; 
-
+.ons-breadcrumbs ~ .ons-grid .ons-grid__col .ons-page__main:has(.ons-panel--error) {
+  margin-top: 1rem;
 }
 
 .ons-page__body {

src/tests/helpers/puppeteer.spec.js

@@ -70,7 +70,7 @@ describe('PuppeteerEndpointFaker', () => {
         `,
       );
 
-      const paths = apiFaker.requestHistory.map(entry => entry.path);
+      const paths = apiFaker.requestHistory.map((entry) => entry.path);
       expect(paths).toEqual(['/text?abc=123', '/json?abc=456']);
     });
 
@@ -87,7 +87,7 @@ describe('PuppeteerEndpointFaker', () => {
         `,
       );
 
-      const paths = apiFaker.requestHistory.map(entry => entry.path);
+      const paths = apiFaker.requestHistory.map((entry) => entry.path);
       expect(paths).toEqual(['/text?abc=123', '/text?abc=789', '/other', '/json?abc=456']);
     });
 
@@ -103,7 +103,7 @@ describe('PuppeteerEndpointFaker', () => {
         `,
       );
 
-      const paths = apiFaker.requestHistory.map(entry => entry.path);
+      const paths = apiFaker.requestHistory.map((entry) => entry.path);
       expect(paths).toEqual(['/text?abc=123', '/json?abc=456']);
     });
 
@@ -117,7 +117,7 @@ describe('PuppeteerEndpointFaker', () => {
         `,
       );
 
-      const entry = apiFaker.requestHistory.find(entry => entry.path === '/text?abc=123');
+      const entry = apiFaker.requestHistory.find((entry) => entry.path === '/text?abc=123');
       expect(entry.url.href).toBe(`http://localhost:${process.env.TEST_PORT}/test/fake/api/text?abc=123`);
     });
 
@@ -135,7 +135,7 @@ describe('PuppeteerEndpointFaker', () => {
         `,
       );
 
-      const entry = apiFaker.requestHistory.find(entry => entry.path === '/text?abc=123');
+      const entry = apiFaker.requestHistory.find((entry) => entry.path === '/text?abc=123');
       expect(entry.headers).toHaveProperty('foo', '123');
     });
   });
@@ -195,7 +195,7 @@ describe('PuppeteerEndpointFaker', () => {
       await setTestPage('/test', TEST_HTML_REQUEST_DATA_FROM_ENDPOINT);
       await page.waitForSelector('#output.test');
 
-      const output = await page.$eval('#output', node => node.textContent);
+      const output = await page.$eval('#output', (node) => node.textContent);
       expect(output).toBe('200:123');
     });
   });
@@ -209,7 +209,7 @@ describe('PuppeteerEndpointFaker', () => {
       await setTestPage('/test', TEST_HTML_REQUEST_DATA_FROM_ENDPOINT);
       await page.waitForSelector('#output.test');
 
-      const output = await page.$eval('#output', node => node.textContent);
+      const output = await page.$eval('#output', (node) => node.textContent);
       expect(output).toBe('200:123');
     });
 
@@ -222,13 +222,13 @@ describe('PuppeteerEndpointFaker', () => {
       await setTestPage('/test', TEST_HTML_REQUEST_DATA_FROM_ENDPOINT);
       await page.waitForSelector('#output.test');
 
-      const output = await page.$eval('#output', node => node.textContent);
+      const output = await page.$eval('#output', (node) => node.textContent);
       expect(output).toBe('400:123');
     });
   });
 
   describe('setOverrides(paths, response)', () => {
-    it('calls `setOveride` for each provided path', () => {
+    it('calls `setOverride` for each provided path', () => {
       const faker = new puppeteer.PuppeteerEndpointFaker('/test/fake/api');
       const calls = [];
       faker.setOverride = (path, response) => {
@@ -256,7 +256,7 @@ describe('PuppeteerEndpointFaker', () => {
       await setTestPage('/test', TEST_HTML_REQUEST_DATA_FROM_ENDPOINT);
       await page.waitForSelector('#output.test');
 
-      const output = await page.$eval('#output', node => node.textContent);
+      const output = await page.$eval('#output', (node) => node.textContent);
       expect(output).toBe('200:456');
     });
 
@@ -272,7 +272,7 @@ describe('PuppeteerEndpointFaker', () => {
       await setTestPage('/test', TEST_HTML_REQUEST_DATA_FROM_ENDPOINT);
       await page.waitForSelector('#output.test');
 
-      const output = await page.$eval('#output', node => node.textContent);
+      const output = await page.$eval('#output', (node) => node.textContent);
       expect(output).toBe('400:456');
     });
   });