SearchBox widget does not accept queryHook prop

[joshgeller]

🐛 Bug description

SearchBox widget does not accept queryHook prop.

🔍 Bug reproduction

Steps to reproduce the behavior:

import { SearchBox } from "react-instantsearch-hooks-web";
<SearchBox
  queryHook={(query, search) => search(query)}
/>

Check console for error:

Warning: React does not recognize the queryHook prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase queryhook instead. If you accidentally passed it from a parent component, remove it from the DOM element.

💭 Expected behavior

SearchBox widget should accept queryHook prop in accordance with the docs:

https://www.algolia.com/doc/api-reference/widgets/search-box/react-hooks/#widget-param-queryhook

Environment

• React InstantSearch Hooks version: 6.26.0
• React version: 17.0.2
• Browser: Version 102.0.5005.61 (Official Build) (arm64)
• OS: macOS Monterey 12.0.1

[jadenguitarman]

@joshgeller having this same problem right now. What do you mean by wrapping SearchBox in a higher-order component? Shouldn't queryHook work correctly no matter what? From what I'm looking at, InstantSearch is actually passing the queryHook prop to the HTML element <div> inside the SearchBox, as part of the ...props, which is not what the docs say should happen.

[jadenguitarman]

Relevant error:

Warning: React does not recognize the queryHook prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase queryhook instead. If you accidentally passed it from a parent component, remove it from the DOM element. at div at SearchBox (webpack-internal:///./node_modules/react-instantsearch-hooks-web/dist/es/ui/SearchBox.js:71:24) at SearchBox (webpack-internal:///./node_modules/react-instantsearch-hooks-web/dist/es/widgets/SearchBox.js:16:94) at div at InstantSearch (webpack-internal:///./node_modules/react-instantsearch-hooks/dist/es/components/InstantSearch.js:17:23)

It's the trace that seems to highlight the issue here. The SearchBox component is passing all of its props to its

child, when it should only pass the props that don't match one of the props defined in the docs for SearchBox, like queryHook.

[francoischalifour]

Indeed there's an issue in the <SearchBox> component. We should destructure the props to forward only the DOM props to the UI component.