fix(vue): input components update refs on ionInput (#26876)

resolves #26700
ionic-team · Mar 2, 2023 · 7d9ce74 · 7d9ce74
1 parent e11aa15
commit 7d9ce74
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 11 deletions.
diff --git a/core/stencil.config.ts b/core/stencil.config.ts
@@ -136,10 +136,16 @@ export const config: Config = {
           externalEvent: 'ionChange'
         },
         {
-          elements: ['ion-datetime', 'ion-input', 'ion-radio-group', 'ion-radio', 'ion-range', 'ion-searchbar', 'ion-segment', 'ion-segment-button', 'ion-select', 'ion-textarea', 'ion-accordion-group'],
+          elements: ['ion-datetime', 'ion-radio-group', 'ion-radio', 'ion-range', 'ion-segment', 'ion-segment-button', 'ion-select', 'ion-accordion-group'],
           targetAttr: 'value',
           event: 'v-ion-change',
           externalEvent: 'ionChange'
+        },
+        {
+          elements: ['ion-input', 'ion-searchbar', 'ion-textarea'],
+          targetAttr: 'value',
+          event: 'v-ion-input',
+          externalEvent: 'ionInput'
         }
       ],
     }),

diff --git a/packages/vue/src/ionic-vue.ts b/packages/vue/src/ionic-vue.ts
@@ -10,10 +10,19 @@ import type { App, Plugin } from "vue";
  * otherwise the binding's callback will fire before any
  * v-model values have been updated.
  */
-const toKebabCase = (eventName: string) =>
-  eventName === "ionChange"
-    ? "v-ion-change"
-    : eventName.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+const toKebabCase = (eventName: string) => {
+  const kebabConvert = (name: string) =>
+    name.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+
+  switch (eventName) {
+    case "ionInput":
+      return "v-ion-input";
+    case "ionChange":
+      return "v-ion-change";
+    default:
+      return kebabConvert(eventName);
+  }
+};
 
 const getHelperFunctions = () => {
   return {

diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
@@ -434,7 +434,7 @@ export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput>('ion-input',
   'ionFocus',
   'ionStyle'
 ],
-'value', 'v-ion-change', 'ionChange');
+'value', 'v-ion-input', 'ionInput');
 
 
 export const IonItem = /*@__PURE__*/ defineContainer<JSX.IonItem>('ion-item', defineIonItem, [
@@ -695,7 +695,7 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar>('ion
   'ionFocus',
   'ionStyle'
 ],
-'value', 'v-ion-change', 'ionChange');
+'value', 'v-ion-input', 'ionInput');
 
 
 export const IonSegment = /*@__PURE__*/ defineContainer<JSX.IonSegment>('ion-segment', defineIonSegment, [
@@ -818,7 +818,7 @@ export const IonTextarea = /*@__PURE__*/ defineContainer<JSX.IonTextarea>('ion-t
   'ionBlur',
   'ionFocus'
 ],
-'value', 'v-ion-change', 'ionChange');
+'value', 'v-ion-input', 'ionInput');
 
 
 export const IonThumbnail = /*@__PURE__*/ defineContainer<JSX.IonThumbnail>('ion-thumbnail', defineIonThumbnail);

diff --git a/packages/vue/test/base/src/views/Inputs.vue b/packages/vue/test/base/src/views/Inputs.vue
@@ -85,10 +85,10 @@
       <div class="ion-padding">
         Checkbox: {{ checkbox }}<br>
         Toggle: {{ toggle }}<br>
-        Input: {{ input }}<br>
+        Input: <span id="input-ref">{{ input }}</span><br>
         Range: {{ range }}<br>
-        Textarea: {{ textarea }}<br>
-        Searchbar: {{ searchbar }}<br>
+        Textarea: <span id="textarea-ref">{{ textarea }}</span><br>
+        Searchbar: <span id="searchbar-ref">{{ searchbar }}</span><br>
         Datetime: {{ datetime }}<br>
         Radio Group: {{ radio }}<br>
         Segment: {{ segment }}<br>

diff --git a/packages/vue/test/base/tests/e2e/specs/inputs.cy.js b/packages/vue/test/base/tests/e2e/specs/inputs.cy.js
@@ -42,4 +42,22 @@ describe('Inputs', () => {
     cy.get('ion-segment').should('have.prop', 'value').and('eq', 'dogs');
     cy.get('ion-select').should('have.prop', 'value').and('eq', 'apples');
   });
+
+  describe('updating text input refs', () => {
+    it('typing into input should update ref', () => {
+      cy.get('ion-input input').type('Hello Input', { scrollBehavior: false });
+
+      cy.get('#input-ref').should('have.text', 'Hello Input');
+    });
+    it('typing into searchbar should update ref', () => {
+      cy.get('ion-searchbar input').type('Hello Searchbar', { scrollBehavior: false });
+
+      cy.get('#searchbar-ref').should('have.text', 'Hello Searchbar');
+    });
+    it('typing into textarea should update ref', () => {
+      cy.get('ion-textarea textarea').type('Hello Textarea', { scrollBehavior: false });
+
+      cy.get('#textarea-ref').should('have.text', 'Hello Textarea');
+    });
+  });
 })