algolia/react-instantsearch

`connectRange` and `RangeInput` not returning values

joepio opened this issue ยท 1 comments

๐Ÿ› Bug description

I'm trying to show a range component, but for some reason I can't see any values.

  • I can see the relevant facetDistribution values are present in the responses (I'm interested in bag-pnd-oppervlakte and bag-pnd-oorspronkelijk-bouwjaar
  • I tried both the RangeInput component and building a custom useRangeSlider hook using this guide/ canRefine is false, and there

Screenshot 2022-12-12 at 13 44 20

๐Ÿ” Bug reproduction

You can try running this:

git clone https://github.com/joepio/gebouwenpaspoort
cd gebouwenpaspoort
git checkout 
pnpm i
pnpm dev

In RangeSlider.tsx:

import { useConnector } from 'react-instantsearch-hooks-web';
import connectRange from 'instantsearch.js/es/connectors/range/connectRange';

import type {
  RangeConnectorParams,
  RangeWidgetDescription,
} from 'instantsearch.js/es/connectors/range/connectRange';

export type UseRangeSliderProps = RangeConnectorParams;

export function useRangeSlider(props?: UseRangeSliderProps) {
  return useConnector<RangeConnectorParams, RangeWidgetDescription>(
    connectRange,
    props
  );
}

export function RangeSlider(props: UseRangeSliderProps) {
  const {
    start,
    range,
    canRefine,
    refine,
    sendEvent,
  } = useRangeSlider(props);

  return <>{JSON.stringify({
    attribute: props.attribute,
    start,
    range,
    canRefine,
    refine,
    sendEvent,
  })}</>;
}

Screenshot 2022-12-12 at 14 04 29

๐Ÿ’ญ Expected behavior

  • I expect rangeInput to have values, and be selectable
  • connectRange hook to return a min and max value, and a true for canRefine

Environment

  • React InstantSearch Hooks version: tried 6.24.0, 6.36.0 and 6.38.1
  • React version: 18.2.0
  • Browser: Firefox & chrome
  • OS: macOS

We're doing a round of cleanup before migrating this repository to the new InstantSearch monorepo.

This issue might be a duplicate of #3571

You can take a look at the sandbox provided by @dhayab: #3571 (comment)

Feel free to reopen it if you still encounter the issue.