javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(select): ionChange will only emit from user committed changes (#26066)

Browse Source 
BREAKING CHANGE:

`ionChange` is no longer emitted when the `value` of `ion-select` is modified externally. `ionChange` is only emitted from user committed changes, such as confirming a selected option in the select's overlay.
This commit is contained in:
Liam DeBeasi
2022-10-10 08:36:51 -05:00
committed by GitHub
parent b052d3b262
commit 34c4137868
12 changed files with 153 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
core/src/components/select/select.tsx
View File

@ -40,7 +40,6 @@ import type { SelectCompareFn } from './select-interface';
export class Select implements ComponentInterface {
private inputId = `ion-sel-${selectIds++}`;
private overlay?: OverlaySelect;
private didInit = false;
private focusEl?: HTMLButtonElement;
private mutationO?: MutationObserver;
@ -150,12 +149,11 @@ export class Select implements ComponentInterface {
@Watch('value')
valueChanged() {
this.emitStyle();
// TODO: FW-1160 - Remove the `didInit` property when ionChange behavior is changed in v7.
if (this.didInit) {
this.ionChange.emit({
value: this.value,
});
}
}
private setValue(value?: any | null) {
this.value = value;
this.ionChange.emit({ value });
}
async connectedCallback() {
@ -174,10 +172,6 @@ export class Select implements ComponentInterface {
}
}
componentDidLoad() {
this.didInit = true;
}
/**
* Open the select overlay. The overlay is either an alert, action sheet, or popover,
* depending on the `interface` property on the `ion-select`.
@ -279,7 +273,7 @@ export class Select implements ComponentInterface {
text: option.textContent,
cssClass: optClass,
handler: () => {
this.value = value;
this.setValue(value);
},
} as ActionSheetButton;
});
@ -340,7 +334,7 @@ export class Select implements ComponentInterface {
checked: isOptionSelected(selectValue, value, this.compareWith),
disabled: option.disabled,
handler: (selected: any) => {
this.value = selected;
this.setValue(selected);
if (!this.multiple) {
this.close();
}
@ -463,7 +457,7 @@ export class Select implements ComponentInterface {
{
text: this.okText,
handler: (selectedValues: any) => {
this.value = selectedValues;
this.setValue(selectedValues);
},
},
],