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:
c9bddbdb4c/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. -->
This commit is contained in:
Liam DeBeasi
2023-04-18 10:54:02 -04:00
committed by GitHub
parent c9bddbdb4c
commit cdb0627c87
2 changed files with 12 additions and 3 deletions

View File

@ -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;
}

View File

@ -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() {