search

Shopify / polaris

Shopify’s design system to help us work together to build a great experience for all of our merchants.
https://polaris.shopify.com
Other
5.81k stars 1.17k forks source link

Using the RangeSlider inside the Filter component is broken when it's not the first filter #12480

Open vividviolet opened 3 months ago

vividviolet commented 3 months ago

Summary

The Range Slider filter doesn't work if it's set as the second filter.

Expected behavior

Dragging inside the RangeSlider should work

Actual behavior

Range Slider works fine as the first applied filter. It breaks when applied as a second filter.

https://github.com/user-attachments/assets/e80a01a1-4192-40c1-a28a-94cb02abbca7

Steps to reproduce

  1. Go to the Polaris example page: https://polaris.shopify.com/components/selection-and-input/filters?example=filters-with-a-resource-list
  2. Select "Account status" as the first filter
  3. Select "Money spent" as the second filter and try to set the range
  4. See error

Are you using React components?

None

Polaris version number

13.8.0

Browser

Chrome

Device

MacOS Sonoma 14.5

goldenpine commented 1 month ago

The same issue can be reproduced on the 'IndexTable' as well, https://polaris.shopify.com/components/tables/index-table?example=index-table-with-views-search-filter-sorting.

Also reproducible in my App dev environment: Chrome Version 128.0.6613.138 (Official Build) (64-bit) Polaris version used in my App: 12.22.1. OS: Windows 11 Pro.

It really impacts the App development if a range filter is used.