From cdb0627c87299ba36da670c81f9d4e3446bb500d Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 18 Apr 2023 10:54:02 -0400
Subject: [PATCH] fix(input): string values are emitted (#27226)

Issue number: N/A

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The `InputChangeEventDetail` and `InputInputEventDetail` interfaces were
updated to add a number type to the value key:
https://github.com/ionic-team/ionic-framework/pull/26176

This was done to align with the value property on ion-input which allows
for strings and numbers. However, this is incorrect as the value emitted
is always forced to a string:
https://github.com/ionic-team/ionic-framework/blob/c9bddbdb4cd45fea6a7a57d9427a0294db0b4027/core/src/components/input/input.tsx#L416


We likely copied the the type definition for the `value` prop not
realizing that number values are never emitted.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The `InputChangeEventDetail` and `InputInputEventDetail` interfaces no
longer have the `number` type
- The value passed to `ionInput` is converted to a string. (This isn't
really needed since the native `<input>` element will have a type of
string when the user types, but I added it for consistency with the
`ionChange` emission).
- Added a code comment to highlight this behavior

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

Note: This is not a breaking change because `number` values were never
emitted in the first place.

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---
 core/src/components/input/input-interface.ts | 9 +++++++--
 core/src/components/input/input.tsx          | 6 +++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/core/src/components/input/input-interface.ts b/core/src/components/input/input-interface.ts
index 6b87d102a4..a03fbae922 100644
--- a/core/src/components/input/input-interface.ts
+++ b/core/src/components/input/input-interface.ts
@@ -1,12 +1,17 @@
+/**
+ * Values are converted to strings when emitted which is
+ * why we do not have a `number` type here even though the
+ * `value` prop accepts a `number` type.
+ */
 export interface InputChangeEventDetail {
-  value?: string | number | null;
+  value?: string | null;
   event?: Event;
 }
 
 // We recognize that InputInput is not an ideal naming pattern for this type.
 // TODO (FW-2199): Explore renaming this type to something more appropriate.
 export interface InputInputEventDetail {
-  value?: string | number | null;
+  value?: string | null;
   event?: Event;
 }
 
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 4ce1f39156..166f5c2539 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -424,7 +424,11 @@ export class Input implements ComponentInterface {
    */
   private emitInputChange(event?: Event) {
     const { value } = this;
-    this.ionInput.emit({ value, event });
+
+    // Checks for both null and undefined values
+    const newValue = value == null ? value : value.toString();
+
+    this.ionInput.emit({ value: newValue, event });
   }
 
   private shouldClearOnEdit() {