React-instantsearch: searchState breaks with multiRange and connectNumericMenu

[Jbartsch]

InstantSearch breaks when adding multirange to the searchState
When implementing the url based searchState as per the documentation

A TypeError: Cannot read property 'label' of undefined
The error seems to originate from this file
node_modules/react-instantsearch-core/dist/es/connectors/connectNumericMenu.js (184:0)

The searchState looks like this

{
  multiRange: { messageCreatedAtUtcTimestamp: '1590337403013:1590423803013' },
...
}

To Reproduce 🔍
Sandbox: https://codesandbox.io/s/broken-lake-4tq2y
(breaks on reload)

[francoischalifour]

The NumericMenu component reads from the search state and therefore needs to contain the multiRange value passed via the search state. In the sandbox you sent, it expects the range 0:99 (not 0:100) which is covered in the NumericMenu items prop.

<InstantSearch
  // ...
  searchState={{
    multiRange: {
      price: '0:99',
    },
  }}
>
  <NumericMenu
    attribute="price"
    items={[
      {
        label: '0-99',
        start: 0,
        end: 99,
      },
      {
        label: '100-500',
        start: 100,
        end: 500,
      },
    ]}
  />
</InstantSearch>

However, we should gracefully fallback when the item is not present because the search state can be extracted with the URL, which can cause problems.

Feature request to contributors: gracefully fallback when the multiRange value is not covered in the NumericMenu.

[Jbartsch]

Thank you @francoischalifour for the swift response, this will help me fix it on my end for now.