docs(core): ionChange will not emit from programmatically changing value (#29407)

Issue number: resolves
https://github.com/ionic-team/ionic-docs/issues/3588

---------

<!-- 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 documentation around `ionChange` not being emitted when
programmatically changing the property associated to the "value" is
either inconsistent or missing from certain components.

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

- Adds the documentation to the missing components.
- Makes the documentation consistent across components.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## 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/accordion-group/accordion-group.tsx

@@ -59,10 +59,9 @@ export class AccordionGroup implements ComponentInterface {
   @Prop() expand: 'compact' | 'inset' = 'compact';
 
   /**
-   * Emitted when the value property has changed
-   * as a result of a user action such as a click.
-   * This event will not emit when programmatically setting
-   * the value property.
+   * Emitted when the value property has changed as a result of a user action such as a click.
+   *
+   * This event will not emit when programmatically setting the `value` property.
    */
   @Event() ionChange!: EventEmitter<AccordionGroupChangeEventDetail>;
 

core/src/components/checkbox/checkbox.tsx

@@ -97,10 +97,9 @@ export class Checkbox implements ComponentInterface {
   @Prop() alignment: 'start' | 'center' = 'center';
 
   /**
-   * Emitted when the checked property has changed
-   * as a result of a user action such as a click.
-   * This event will not emit when programmatically
-   * setting the checked property.
+   * Emitted when the checked property has changed as a result of a user action such as a click.
+   *
+   * This event will not emit when programmatically setting the `checked` property.
    */
   @Event() ionChange!: EventEmitter<CheckboxChangeEventDetail>;
 

core/src/components/datetime/datetime.tsx

@@ -477,6 +477,8 @@ export class Datetime implements ComponentInterface {
 
   /**
    * Emitted when the value (selected date) has changed.
+   *
+   * This event will not emit when programmatically setting the `value` property.
    */
   @Event() ionChange!: EventEmitter<DatetimeChangeEventDetail>;
 

core/src/components/input/input.tsx

@@ -296,6 +296,8 @@ export class Input implements ComponentInterface {
    * from a date picker for `<ion-input type="date">`, pressing the "Enter" key, etc.).
    * - When the element loses focus after its value has changed: for elements
    * where the user's interaction is typing.
+   *
+   * This event will not emit when programmatically setting the `value` property.
    */
   @Event() ionChange!: EventEmitter<InputChangeEventDetail>;
 

core/src/components/picker-column/picker-column.tsx

@@ -66,6 +66,8 @@ export class PickerColumn implements ComponentInterface {
 
   /**
    * Emitted when the value has changed.
+   *
+   * This event will not emit when programmatically setting the `value` property.
    */
   @Event() ionChange!: EventEmitter<PickerColumnChangeEventDetail>;
 

core/src/components/radio-group/radio-group.tsx

@@ -47,6 +47,8 @@ export class RadioGroup implements ComponentInterface {
 
   /**
    * Emitted when the value has changed.
+   *
+   * This event will not emit when programmatically setting the `value` property.
    */
   @Event() ionChange!: EventEmitter<RadioGroupChangeEventDetail>;
 

core/src/components/range/range.tsx

@@ -235,7 +235,7 @@ export class Range implements ComponentInterface {
    * - When the user releases the knob after dragging;
    * - When the user moves the knob with keyboard arrows
    *
-   * `ionChange` is not fired when the value is changed programmatically.
+   * This event will not emit when programmatically setting the `value` property.
    */
   @Event() ionChange!: EventEmitter<RangeChangeEventDetail>;
 

core/src/components/searchbar/searchbar.tsx

@@ -225,6 +225,8 @@ export class Searchbar implements ComponentInterface {
    * by the user. This can happen when the element loses focus or
    * when the "Enter" key is pressed. `ionChange` can also fire
    * when clicking the clear or cancel buttons.
+   *
+   * This event will not emit when programmatically setting the `value` property.
    */
   @Event() ionChange!: EventEmitter<SearchbarChangeEventDetail>;
 

core/src/components/segment/segment.tsx

@@ -94,8 +94,9 @@ export class Segment implements ComponentInterface {
   @Prop() selectOnFocus = false;
 
   /**
-   * Emitted when the value property has changed and any
-   * dragging pointer has been released from `ion-segment`.
+   * Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`.
+   *
+   * This event will not emit when programmatically setting the `value` property.
    */
   @Event() ionChange!: EventEmitter<SegmentChangeEventDetail>;
 

core/src/components/select/select.tsx

@@ -197,6 +197,8 @@ export class Select implements ComponentInterface {
 
   /**
    * Emitted when the value has changed.
+   *
+   * This event will not emit when programmatically setting the `value` property.
    */
   @Event() ionChange!: EventEmitter<SelectChangeEventDetail>;
 

core/src/components/textarea/textarea.tsx

@@ -263,6 +263,8 @@ export class Textarea implements ComponentInterface {
    * The `ionChange` event is fired when the user modifies the textarea's value.
    * Unlike the `ionInput` event, the `ionChange` event is fired when
    * the element loses focus after its value has been modified.
+   *
+   * This event will not emit when programmatically setting the `value` property.
    */
   @Event() ionChange!: EventEmitter<TextareaChangeEventDetail>;
 

core/src/components/toggle/toggle.tsx

@@ -107,8 +107,9 @@ export class Toggle implements ComponentInterface {
   @Prop() alignment: 'start' | 'center' = 'center';
 
   /**
-   * Emitted when the user switches the toggle on or off. Does not emit
-   * when programmatically changing the value of the `checked` property.
+   * Emitted when the user switches the toggle on or off.
+   *
+   * This event will not emit when programmatically setting the `checked` property.
    */
   @Event() ionChange!: EventEmitter<ToggleChangeEventDetail>;