add js to input container instead

src/components/card/_card.scss

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

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/input.dom.js

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

src/components/input/input.js

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

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 {