diff --git a/src/components/Examples/ExamplesContent.test.tsx b/src/components/Examples/ExamplesContent.test.tsx index 5d3ccef6f7..9c38ce80b7 100644 --- a/src/components/Examples/ExamplesContent.test.tsx +++ b/src/components/Examples/ExamplesContent.test.tsx @@ -75,7 +75,7 @@ describe('ExamplesContent', () => { }); it('filters examples based on product filter selection', () => { - // Make the screen wider than the default of 1024px as desktop filtering only works >= 1040px + // Desktop filter auto-commits at the `sm` breakpoint (768px) and above Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 1600 }); window.dispatchEvent(new Event('resize')); @@ -86,4 +86,19 @@ describe('ExamplesContent', () => { expect(screen.queryByText('Online status')).not.toBeInTheDocument(); expect(screen.getByText('Member location')).toBeInTheDocument(); }); + + // DX-1449: between the `sm` (768px) and `md` (1040px) breakpoints the inline + // desktop filter renders without an Apply button, but selections previously + // only committed at >= 1040px, leaving the filter inert in that range. + it('filters examples at widths between the sm and md breakpoints', () => { + Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 818 }); + window.dispatchEvent(new Event('resize')); + + render(); + const productFilterInput = screen.getByTestId('product-spaces'); + fireEvent.click(productFilterInput); + + expect(screen.queryByText('Online status')).not.toBeInTheDocument(); + expect(screen.getByText('Member location')).toBeInTheDocument(); + }); }); diff --git a/src/components/Examples/ExamplesFilter.tsx b/src/components/Examples/ExamplesFilter.tsx index 0ca712d337..abbedf28c7 100644 --- a/src/components/Examples/ExamplesFilter.tsx +++ b/src/components/Examples/ExamplesFilter.tsx @@ -12,6 +12,11 @@ import { useOnClickOutside } from 'src/hooks/use-on-click-outside'; import { navigate } from 'gatsby'; import { ProductName } from '@ably/ui/core/ProductTile/data'; +// Matches Tailwind's `sm` screen (768px), where the filter switches from the +// mobile drawer (with an Apply button) to the inline desktop sidebar. Above +// this width selections must auto-commit, since no Apply button is rendered. +const SM_BREAKPOINT = 768; + const ExamplesFilter = ({ selected, setSelected, @@ -85,7 +90,7 @@ const ExamplesFilter = ({ useEffect(() => { const handleResize = () => { - if (window.innerWidth >= 1040) { + if (window.innerWidth >= SM_BREAKPOINT) { setExpandFilterMenu(false); } }; @@ -95,7 +100,7 @@ const ExamplesFilter = ({ }, []); useEffect(() => { - if (window.innerWidth >= 1040) { + if (window.innerWidth >= SM_BREAKPOINT) { setSelected(localSelected); } }, [expandFilterMenu, localSelected, setSelected]);