Skip to content

Commit a056a26

Browse files
CopilotCopilot
committed
Fix pip label clicks with prefix/suffix to move handle correctly
1 parent 7a93f62 commit a056a26

File tree

7 files changed

+84
-24
lines changed

7 files changed

+84
-24
lines changed

‎dist/range-slider-pips.js‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1993,8 +1993,8 @@
19931993
let html_tag;
19941994
let raw_value = /*formatter*/ ctx[16](/*val*/ ctx[37], /*i*/ ctx[39], valueAsPercent(/*val*/ ctx[37], /*min*/ ctx[1], /*max*/ ctx[2], /*precision*/ ctx[17])) + "";
19951995
let t1;
1996-
let if_block0 = create_if_block_8$1(ctx);
1997-
let if_block1 = create_if_block_7$1(ctx);
1996+
let if_block0 = /*prefix*/ ctx[14] && create_if_block_8$1(ctx);
1997+
let if_block1 = /*suffix*/ ctx[15] && create_if_block_7$1(ctx);
19981998

19991999
return {
20002000
c() {
@@ -2016,26 +2016,32 @@
20162016
if (if_block1) if_block1.m(span, null);
20172017
},
20182018
p(ctx, dirty) {
2019-
{
2019+
if (/*prefix*/ ctx[14]) {
20202020
if (if_block0) {
20212021
if_block0.p(ctx, dirty);
20222022
} else {
20232023
if_block0 = create_if_block_8$1(ctx);
20242024
if_block0.c();
20252025
if_block0.m(span, t0);
20262026
}
2027+
} else if (if_block0) {
2028+
if_block0.d(1);
2029+
if_block0 = null;
20272030
}
20282031

20292032
if (dirty[0] & /*formatter, min, max, finalPipStep, step, precision*/ 2293774 && raw_value !== (raw_value = /*formatter*/ ctx[16](/*val*/ ctx[37], /*i*/ ctx[39], valueAsPercent(/*val*/ ctx[37], /*min*/ ctx[1], /*max*/ ctx[2], /*precision*/ ctx[17])) + "")) html_tag.p(raw_value);
20302033

2031-
{
2034+
if (/*suffix*/ ctx[15]) {
20322035
if (if_block1) {
20332036
if_block1.p(ctx, dirty);
20342037
} else {
20352038
if_block1 = create_if_block_7$1(ctx);
20362039
if_block1.c();
20372040
if_block1.m(span, null);
20382041
}
2042+
} else if (if_block1) {
2043+
if_block1.d(1);
2044+
if_block1 = null;
20392045
}
20402046
},
20412047
d(detaching) {
@@ -2049,7 +2055,7 @@
20492055
};
20502056
}
20512057

2052-
// (137:14) {#if true || prefix}
2058+
// (137:14) {#if prefix}
20532059
function create_if_block_8$1(ctx) {
20542060
let span;
20552061
let t;
@@ -2075,7 +2081,7 @@
20752081
};
20762082
}
20772083

2078-
// (139:14) {#if true || suffix}
2084+
// (139:14) {#if suffix}
20792085
function create_if_block_7$1(ctx) {
20802086
let span;
20812087
let t;
@@ -4561,7 +4567,7 @@
45614567

45624568
// for touch devices we want the handle to instantly
45634569
// move to the position touched for more responsive feeling
4564-
if (event.type === 'touchstart' && !target.matches('.rsPipVal')) {
4570+
if (event.type === 'touchstart' && !target.closest('.rsPipVal')) {
45654571
handleInteract(clientPos);
45664572
}
45674573
}
@@ -4634,7 +4640,7 @@
46344640

46354641
// don't trigger interact if the target is a handle (no need) or
46364642
// if the target is a label (we want to move to that value from rangePips)
4637-
if (!targetIsHandle(target) && !target.matches('.rsPipVal')) {
4643+
if (!targetIsHandle(target) && !target.closest('.rsPipVal')) {
46384644
handleInteract(normalisedClient(event));
46394645
}
46404646
}

‎dist/range-slider-pips.mjs‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1987,8 +1987,8 @@ function create_if_block_6$1(ctx) {
19871987
let html_tag;
19881988
let raw_value = /*formatter*/ ctx[16](/*val*/ ctx[37], /*i*/ ctx[39], valueAsPercent(/*val*/ ctx[37], /*min*/ ctx[1], /*max*/ ctx[2], /*precision*/ ctx[17])) + "";
19891989
let t1;
1990-
let if_block0 = create_if_block_8$1(ctx);
1991-
let if_block1 = create_if_block_7$1(ctx);
1990+
let if_block0 = /*prefix*/ ctx[14] && create_if_block_8$1(ctx);
1991+
let if_block1 = /*suffix*/ ctx[15] && create_if_block_7$1(ctx);
19921992

19931993
return {
19941994
c() {
@@ -2010,26 +2010,32 @@ function create_if_block_6$1(ctx) {
20102010
if (if_block1) if_block1.m(span, null);
20112011
},
20122012
p(ctx, dirty) {
2013-
{
2013+
if (/*prefix*/ ctx[14]) {
20142014
if (if_block0) {
20152015
if_block0.p(ctx, dirty);
20162016
} else {
20172017
if_block0 = create_if_block_8$1(ctx);
20182018
if_block0.c();
20192019
if_block0.m(span, t0);
20202020
}
2021+
} else if (if_block0) {
2022+
if_block0.d(1);
2023+
if_block0 = null;
20212024
}
20222025

20232026
if (dirty[0] & /*formatter, min, max, finalPipStep, step, precision*/ 2293774 && raw_value !== (raw_value = /*formatter*/ ctx[16](/*val*/ ctx[37], /*i*/ ctx[39], valueAsPercent(/*val*/ ctx[37], /*min*/ ctx[1], /*max*/ ctx[2], /*precision*/ ctx[17])) + "")) html_tag.p(raw_value);
20242027

2025-
{
2028+
if (/*suffix*/ ctx[15]) {
20262029
if (if_block1) {
20272030
if_block1.p(ctx, dirty);
20282031
} else {
20292032
if_block1 = create_if_block_7$1(ctx);
20302033
if_block1.c();
20312034
if_block1.m(span, null);
20322035
}
2036+
} else if (if_block1) {
2037+
if_block1.d(1);
2038+
if_block1 = null;
20332039
}
20342040
},
20352041
d(detaching) {
@@ -2043,7 +2049,7 @@ function create_if_block_6$1(ctx) {
20432049
};
20442050
}
20452051

2046-
// (137:14) {#if true || prefix}
2052+
// (137:14) {#if prefix}
20472053
function create_if_block_8$1(ctx) {
20482054
let span;
20492055
let t;
@@ -2069,7 +2075,7 @@ function create_if_block_8$1(ctx) {
20692075
};
20702076
}
20712077

2072-
// (139:14) {#if true || suffix}
2078+
// (139:14) {#if suffix}
20732079
function create_if_block_7$1(ctx) {
20742080
let span;
20752081
let t;
@@ -4555,7 +4561,7 @@ function instance($$self, $$props, $$invalidate) {
45554561

45564562
// for touch devices we want the handle to instantly
45574563
// move to the position touched for more responsive feeling
4558-
if (event.type === 'touchstart' && !target.matches('.rsPipVal')) {
4564+
if (event.type === 'touchstart' && !target.closest('.rsPipVal')) {
45594565
handleInteract(clientPos);
45604566
}
45614567
}
@@ -4628,7 +4634,7 @@ function instance($$self, $$props, $$invalidate) {
46284634

46294635
// don't trigger interact if the target is a handle (no need) or
46304636
// if the target is a label (we want to move to that value from rangePips)
4631-
if (!targetIsHandle(target) && !target.matches('.rsPipVal')) {
4637+
if (!targetIsHandle(target) && !target.closest('.rsPipVal')) {
46324638
handleInteract(normalisedClient(event));
46334639
}
46344640
}

‎dist/svelte/components/RangePips.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,9 +121,9 @@ function labelUp(pipValue, event) {
121121
>
122122
{#if all === 'label' || rest === 'label'}
123123
<span class="rsPipVal">
124-
{#if true || prefix}<span class="rsPipValPrefix">{prefix}</span>{/if}
124+
{#if prefix}<span class="rsPipValPrefix">{prefix}</span>{/if}
125125
{@html formatter(val, i, valueAsPercent(val, min, max, precision))}
126-
{#if true || suffix}<span class="rsPipValSuffix">{suffix}</span>{/if}
126+
{#if suffix}<span class="rsPipValSuffix">{suffix}</span>{/if}
127127
</span>
128128
{/if}
129129
</span>

‎dist/svelte/components/RangeSlider.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -440,7 +440,7 @@ function sliderInteractStart(event) {
440440
handleActivated = true;
441441
handlePressed = true;
442442
activeHandle = getClosestHandle(clientPos);
443-
if (event.type === "touchstart" && !target.matches(".rsPipVal")) {
443+
if (event.type === "touchstart" && !target.closest(".rsPipVal")) {
444444
handleInteract(clientPos);
445445
}
446446
}
@@ -477,7 +477,7 @@ function bodyMouseUp(event) {
477477
if (handleActivated) {
478478
if (slider && (target === slider || slider.contains(target))) {
479479
focus = true;
480-
if (!targetIsHandle(target) && !target.matches(".rsPipVal")) {
480+
if (!targetIsHandle(target) && !target.closest(".rsPipVal")) {
481481
handleInteract(normalisedClient(event));
482482
}
483483
}

‎src/lib/components/RangePips.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -159,9 +159,9 @@
159159
>
160160
{#if all === 'label' || rest === 'label'}
161161
<span class="rsPipVal">
162-
{#if true || prefix}<span class="rsPipValPrefix">{prefix}</span>{/if}
162+
{#if prefix}<span class="rsPipValPrefix">{prefix}</span>{/if}
163163
{@html formatter(val, i, valueAsPercent(val, min, max, precision))}
164-
{#if true || suffix}<span class="rsPipValSuffix">{suffix}</span>{/if}
164+
{#if suffix}<span class="rsPipValSuffix">{suffix}</span>{/if}
165165
</span>
166166
{/if}
167167
</span>

‎src/lib/components/RangeSlider.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -672,7 +672,7 @@
672672
activeHandle = getClosestHandle(clientPos);
673673
// for touch devices we want the handle to instantly
674674
// move to the position touched for more responsive feeling
675-
if (event.type === 'touchstart' && !target.matches('.rsPipVal')) {
675+
if (event.type === 'touchstart' && !target.closest('.rsPipVal')) {
676676
handleInteract(clientPos);
677677
}
678678
}
@@ -740,7 +740,7 @@
740740
focus = true;
741741
// don't trigger interact if the target is a handle (no need) or
742742
// if the target is a label (we want to move to that value from rangePips)
743-
if (!targetIsHandle(target) && !target.matches('.rsPipVal')) {
743+
if (!targetIsHandle(target) && !target.closest('.rsPipVal')) {
744744
handleInteract(normalisedClient(event));
745745
}
746746
}

‎tests/playwright/RangePips.formatters.spec.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,54 @@ test.describe('Pip Formatter Tests', () => {
169169
await expect(pips.nth(10)).toHaveText('50');
170170
});
171171

172+
test('should move handle when clicking on prefix or suffix in pip label', async ({ page }) => {
173+
const slider = page.locator('#dynamic-formatter');
174+
const handle = slider.locator('.rangeHandle');
175+
const prefixButton = page.locator('#btn_prefix');
176+
const suffixButton = page.locator('#btn_suffix');
177+
178+
// Add prefix and suffix
179+
await prefixButton.click();
180+
await suffixButton.click();
181+
182+
// Get pip at value 70 (index 14)
183+
const targetPip = slider.locator('.rsPip').filter({ has: page.locator('[data-val="70"]') });
184+
const targetPipLabel = targetPip.locator('.rsPipVal');
185+
186+
// Verify the label has prefix and suffix
187+
await expect(targetPipLabel).toHaveText('Value: 70 units');
188+
189+
// Get the prefix span specifically
190+
const prefixSpan = targetPipLabel.locator('.rsPipValPrefix');
191+
await expect(prefixSpan).toHaveText('Value: ');
192+
193+
// Get the suffix span specifically
194+
const suffixSpan = targetPipLabel.locator('.rsPipValSuffix');
195+
await expect(suffixSpan).toHaveText(' units');
196+
197+
// Click on the prefix span
198+
await prefixSpan.click();
199+
200+
// Wait a moment for the handle to move
201+
await page.waitForTimeout(100);
202+
203+
// Check that handle moved to value 70
204+
await expect(handle).toHaveAttribute('aria-valuenow', '70');
205+
206+
// Reset handle position by moving to value 30
207+
const resetPip = slider.locator('.rsPip').filter({ has: page.locator('[data-val="30"]') });
208+
await resetPip.click();
209+
await page.waitForTimeout(100);
210+
await expect(handle).toHaveAttribute('aria-valuenow', '30');
211+
212+
// Now click on the suffix span of value 70 pip
213+
await suffixSpan.click();
214+
await page.waitForTimeout(100);
215+
216+
// Check that handle moved to value 70 again
217+
await expect(handle).toHaveAttribute('aria-valuenow', '70');
218+
});
219+
172220
test('should handle formatter enable/disable toggle', async ({ page }) => {
173221
const slider = page.locator('#formatter-toggle');
174222
const pips = slider.locator('.rsPipVal');

0 commit comments

Comments
 (0)