feat(SearchBox): expose formRef

[esaborit4code]

Summary
This change is motivated from a very specific use case:

I have a custom form input component which includes a SearchBox, so I my own <form> tag is wrapping the <form> that's within SearchBox. This leads to an unexpected form submission when pressing the Enter key in the search box text input.

I've already tried preventDefault and stopPropagation in the onSubmit callback available for SearchBox but it seems the way React handles events makes this useless. Getting a ref for the form allowed me to stop the submit event by using addEventListener on the ref.current element.

Since there's already an inputRef I think having a formRef won't hurt and would help others that may find themselves in a similar form nesting situation.

Result
A new formRef prop analog to current inputRef is added to SearchBox.

[Haroenv]

It makes sense to me, as we'd like people to mainly use the official SearchBox component, however; this should have some added tests too.

Thanks for your PR already!

[dhayab]

Hi, we'll be able to move forward after you address the comments and add a test case for formRef.

Thanks again for your contribution!

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit af3dddb:

Sandbox	Source
react-instantsearch-app	Configuration
hooks-example	Configuration

[netlify]

✅ Deploy Preview for react-instantsearch ready!

Name	Link
🔨 Latest commit	af3dddb
🔍 Latest deploy log	https://app.netlify.com/sites/react-instantsearch/deploys/63316bd27bdb3d000806c711
😎 Deploy Preview	https://deploy-preview-3565--react-instantsearch.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.