fix(slider): Add id for the proper DOM tracking of the progress bar (#…

…1061)
AmadeusITGroup · Dec 12, 2024 · 2e68fa4 · 2e68fa4
1 parent aa20258
commit 2e68fa4
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 5 deletions.
diff --git a/angular/bootstrap/src/components/slider/slider.component.ts b/angular/bootstrap/src/components/slider/slider.component.ts
@@ -87,7 +87,7 @@ export class SliderStructureDirective {
 	imports: [SlotDirective, SliderStructureDirective, UseDirective],
 	template: `
 		<ng-template auSliderStructure #structure let-state="state" let-directives="directives" let-api="api">
-			@for (option of state.progressDisplayOptions(); track option) {
+			@for (option of state.progressDisplayOptions(); track option.id) {
 				<div [auUse]="[directives.progressDisplayDirective, {option}]"></div>
 			}
 			<div [auUse]="directives.clickableAreaDirective"></div>

diff --git a/core/src/components/slider/slider.spec.ts b/core/src/components/slider/slider.spec.ts
@@ -31,6 +31,7 @@ const defaultState: () => SliderState = () => ({
 			top: null,
 			height: 100,
 			width: 0,
+			id: 0,
 		},
 	] as ProgressDisplayOptions[],
 	combinedLabelPositionLeft: 0,
@@ -135,6 +136,7 @@ describe(`Slider basic`, () => {
 						top: null,
 						height: 100,
 						width: 0,
+						id: 0,
 					},
 				],
 			}),
@@ -177,6 +179,7 @@ describe(`Slider basic`, () => {
 						top: null,
 						height: 100,
 						width: 60,
+						id: 0,
 					},
 				],
 			}),
@@ -214,6 +217,7 @@ describe(`Slider basic`, () => {
 						top: null,
 						height: 100,
 						width: 100,
+						id: 0,
 					},
 				],
 			}),
@@ -254,6 +258,7 @@ describe(`Slider basic`, () => {
 						top: null,
 						height: 100,
 						width: 60,
+						id: 0,
 					},
 				],
 			}),
@@ -290,6 +295,7 @@ describe(`Slider basic`, () => {
 						top: null,
 						height: 100,
 						width: 50,
+						id: 0,
 					},
 				],
 			}),
@@ -1085,6 +1091,7 @@ describe(`Slider basic`, () => {
 						top: null,
 						height: 100,
 						width: 33.333333333333336,
+						id: 0,
 					},
 				],
 				values: [1.5],
@@ -1136,6 +1143,7 @@ describe(`Slider basic`, () => {
 						top: null,
 						height: 100,
 						width: 100,
+						id: 0,
 					},
 				],
 				handleDisplayOptions: [
@@ -1165,6 +1173,7 @@ describe(`Slider basic`, () => {
 						top: null,
 						height: 100,
 						width: 80,
+						id: 0,
 					},
 				],
 				values: [2.5],
@@ -1215,6 +1224,7 @@ describe(`Slider basic`, () => {
 						top: null,
 						height: 100,
 						width: 11.49425287356322,
+						id: 0,
 					},
 				],
 				handleDisplayOptions: [
@@ -1489,6 +1499,7 @@ describe(`Slider range`, () => {
 						top: null,
 						width: 25,
 						height: 100,
+						id: 0,
 					},
 				],
 				sortedHandles: [
@@ -1539,6 +1550,7 @@ describe(`Slider range`, () => {
 						top: null,
 						width: 40,
 						height: 100,
+						id: 0,
 					},
 				],
 				sortedHandles: [
@@ -1584,6 +1596,7 @@ describe(`Slider range`, () => {
 						top: null,
 						width: 50,
 						height: 100,
+						id: 0,
 					},
 				],
 				sortedHandles: [
@@ -1633,6 +1646,7 @@ describe(`Slider range`, () => {
 						top: null,
 						width: 40,
 						height: 100,
+						id: 0,
 					},
 				],
 				sortedHandles: [
@@ -1678,6 +1692,7 @@ describe(`Slider range`, () => {
 						top: null,
 						width: 50,
 						height: 100,
+						id: 0,
 					},
 				],
 				sortedHandles: [
@@ -1723,6 +1738,7 @@ describe(`Slider range`, () => {
 						top: null,
 						width: 30,
 						height: 100,
+						id: 0,
 					},
 				],
 				sortedHandles: [
@@ -1772,6 +1788,7 @@ describe(`Slider range`, () => {
 						top: null,
 						width: 5,
 						height: 100,
+						id: 0,
 					},
 				],
 				sortedHandles: [
@@ -1818,6 +1835,7 @@ describe(`Slider range`, () => {
 						top: null,
 						width: 25,
 						height: 100,
+						id: 0,
 					},
 				],
 				sortedHandles: [
@@ -1869,6 +1887,7 @@ describe(`Slider range`, () => {
 						top: null,
 						width: 4.9,
 						height: 100,
+						id: 0,
 					},
 				],
 				sortedHandles: [
@@ -1916,6 +1935,7 @@ describe(`Slider range`, () => {
 						right: null,
 						top: null,
 						width: 69.9,
+						id: 0,
 					},
 				],
 				sortedValues: [1000, 700000],
@@ -1968,6 +1988,7 @@ describe(`Slider range`, () => {
 						top: null,
 						width: 40,
 						height: 100,
+						id: 0,
 					},
 				],
 				rtl: true,

diff --git a/core/src/components/slider/slider.ts b/core/src/components/slider/slider.ts
@@ -34,9 +34,13 @@ export interface ProgressDisplayOptions {
 	 */
 	width: number;
 	/**
-	 * Height of hte progress in %
+	 * Height of the progress in %
 	 */
 	height: number;
+	/**
+	 * Id of the progress
+	 */
+	id: number;
 }
 
 /**
@@ -581,6 +585,7 @@ export function createSlider(config?: PropsConfig<SliderProps>): SliderWidget {
 					top: vertical ? (rtl ? 0 : null) : null,
 					width: vertical ? 100 : sortedValuesPercent[0],
 					height: vertical ? sortedValuesPercent[0] : 100,
+					id: 0,
 				},
 			];
 		} else {
@@ -593,6 +598,7 @@ export function createSlider(config?: PropsConfig<SliderProps>): SliderWidget {
 						top: vertical ? (rtl ? array[index] : null) : null,
 						width: vertical ? 100 : index === array.length - 1 ? svp : array[index + 1] - svp,
 						height: vertical ? (index === array.length - 1 ? svp : array[index + 1] - svp) : 100,
+						id: index,
 					};
 				})
 				.slice(0, sortedValuesPercent.length - 1);

diff --git a/react/bootstrap/src/components/slider/slider.tsx b/react/bootstrap/src/components/slider/slider.tsx
@@ -70,8 +70,8 @@ const CombinedLabel = (slotContext: SliderContext) => (
  */
 export const SliderDefaultSlotStructure = (slotContext: SliderContext) => (
 	<>
-		{slotContext.state.progressDisplayOptions.map((option, index) => (
-			<ProgressDisplay key={index} directive={slotContext.directives.progressDisplayDirective} option={option} />
+		{slotContext.state.progressDisplayOptions.map((option) => (
+			<ProgressDisplay key={option.id} directive={slotContext.directives.progressDisplayDirective} option={option} />
 		))}
 		<div {...useDirective(slotContext.directives.clickableAreaDirective)} />
 		{slotContext.state.showMinMaxLabels && <MinMaxLabels {...slotContext} />}

diff --git a/svelte/bootstrap/src/components/slider/SliderDefaultStructure.svelte b/svelte/bootstrap/src/components/slider/SliderDefaultStructure.svelte
@@ -6,7 +6,7 @@
 	let {state, directives} = widget;
 </script>
 
-{#each state.progressDisplayOptions as option}
+{#each state.progressDisplayOptions as option (option.id)}
 	<div use:directives.progressDisplayDirective={{option}}></div>
 {/each}
 <div use:directives.clickableAreaDirective></div>