mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
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:
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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() {
|
||||
|
Reference in New Issue
Block a user