Rendering Hits without a Search box doesn't use search state

[zackify]

Bug: What is the current behavior?
Render hits inside of <InstantSearch /> without a searchbox, nothing gets refined:

https://jsfiddle.net/ar80rgpc/8/

With the same thing, but also a searchbox, it works.
https://jsfiddle.net/ar80rgpc/9/
Bug: What is the expected behavior?
To be able to refine results without showing a searchbox.

Bug: What browsers are impacted? Which versions?
All

What project are you opening an issue for?

• react-instantsearch

What is the version you are using? Always use the latest one before opening a bug issue.
3.2.1

[zackify]

Any word on this? Kind of a big deal that I have to render an empty connector in production. the results seem to load in all at once, then quickly after the query from the state is applied if i do this. feels very weird :P

[mthuret]

Hi @zackify,

What you need to do here is using a virtual searchbox.

Here's an example combined with defaultRefinement: https://jsfiddle.net/kcjjdLqk/

Check out this guide also: https://community.algolia.com/instantsearch.js/react/guide/Virtual_widgets.html

[zackify]

This doesn't solve two problems:

1. I don't want to display a search box at all. Just the hits. Doing a defaultRefinement still shows the searchbox. So I still have to render a blank connector for my usecase

2. I also want to only return 15 results, doing a default refinement for hitsPerPage doesn't work either since I have to give that a list of items.

Is there no way to just set 15 hits per page and the search query and only display hits? Thanks :)

Edit: I see that the example wants you to render an empty connector, this feels so weird. Why can it not just take the state from searchState on teh root instantsearch? Also still need a solution for #2 either way. Should I make a new issue? Thanks!

[bobylito]

@zackify We will need to sync on that issue with the rest of the team, we usually do that at the beginning of the week. Thanks for your patience.

[mthuret]

Hello @zackify

Virtual Widgets are the way to go when needing a refinement without any rendering.
In order for a part of the search state to be applied, then you need to have the corresponding widget mounted.

Also, if you want to limit the results at 15, then you can use our Configure widget like: <Configure hitsPerPage={15}/>. This widget can apply all the search parameters that are not covered by any widget. See: https://community.algolia.com/instantsearch.js/react/guide/Search_parameters.html

Does this answer your use case?

[zackify]

Ah okay, that works fine. I guess I just want to mention how weird it is to have a searchState prop that doesn't actually do anything without components being rendered. Closing!