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

fix(range): assign auto increment id by default (#26740)

Browse Source 
BREAKING CHANGE:

The `name` property on `ion-range` defaults to `ion-r-${rangeIds++}` where `rangeIds` is a number that is incremented for every instance of the component.
This commit is contained in:
Liam DeBeasi
2023-02-06 16:37:39 -05:00
committed by GitHub
parent f98e5750b4
commit 92b06f2eb6
4 changed files with 25 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
core/src/components/range/range.tsx
View File

@ -46,7 +46,7 @@ import type {
shadow: true,
})
export class Range implements ComponentInterface {
private rangeId?: string;
private rangeId = `ion-r-${rangeIds++}`;
private didLoad = false;
private noUpdate = false;
private rect!: ClientRect;
@ -91,12 +91,10 @@ export class Range implements ComponentInterface {
this.ionInput = debounce === undefined ? originalIonInput ?? ionInput : debounceEvent(ionInput, debounce);
}
// TODO: In Ionic Framework v6 this should initialize to this.rangeId like the other form components do.
/**
* The name of the control, which is submitted with the form data.
*/
@Prop() name = '';
@Prop() name = this.rangeId;
/**
* Show two knobs.
@ -302,7 +300,9 @@ export class Range implements ComponentInterface {
* If user has custom ID set then we should
* not assign the default incrementing ID.
*/
this.rangeId = this.el.hasAttribute('id') ? this.el.getAttribute('id')! : `ion-r-${rangeIds++}`;
if (this.el.hasAttribute('id')) {
this.rangeId = this.el.getAttribute('id')!;
}
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
@ -553,9 +553,9 @@ export class Range implements ComponentInterface {
private renderLegacyRange() {
if (!this.hasLoggedDeprecationWarning) {
printIonWarning(
`Using ion-range with an ion-label has been deprecated. To migrate, remove the ion-label and pass your label directly into ion-toggle instead.
`Using ion-range with an ion-label has been deprecated. To migrate, remove the ion-label and pass your label directly into ion-range instead.
Example: <ion-range>Volume:</ion-range>
Example: <ion-range><div slot="label">Volume:</div></ion-range>
For ranges that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the range.