algolia / react-instantsearch

⚡️ Lightning-fast search for React and React Native applications, by Algolia.
https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/
MIT License
1.97k stars 386 forks source link

`connectRange` and `RangeInput` not returning values #3699

Closed joepio closed 1 year ago

joepio commented 1 year ago

🐛 Bug description

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

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

Environment

FabienMotte commented 1 year ago

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

This issue might be a duplicate of https://github.com/algolia/react-instantsearch/issues/3571

You can take a look at the sandbox provided by @dhayab: https://github.com/algolia/react-instantsearch/issues/3571#issuecomment-1196484162

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