React-instantsearch: Buttons should have a type "button" ?

[aaronbushnell]

It appears that in the latest version of React InstantSearch (5.3.2) the "Show More" button when used in a <RefinementList /> does not have type="button" on the button itself. Some browsers interpret this as a submit button and will attempt to submit a parent <form> element if clicked. Can type="button" be added so that clicking this only interacts with the <RefinementList /> options?

[samouss]

Yes indeed none of the buttons have a type inside the codebase. When omitted the default type is submit, it means that it sends the parent form (if present) on click. Not sure which default value we should adopt for this.

In the meantime you have to override the DOM output of the widget with the connectors API. You have to use the connectRefinementList connector to create your own RefinementList widget.

[aaronbushnell]

Thanks, @samouss. It seems like using

<button type=“button”>

Might be a better option so it’s still functional but doesn’t interact with any other elements outside the AIS root. Is that a sensible default?

[samouss]

Yes it sounds a sensible default. It's just that users might rely on the default behaviour that we have now. It means that a change would break their application. Those kind of issues can be hard to detect. Plus if we choose to change it, we have to do it not only on React but also on the Vanilla, Vue and Angular version. That's why we have to discuss with the team about the change.

[aaronbushnell]

That makes sense! Appreciate the info.