instantsearch icon indicating copy to clipboard operation
instantsearch copied to clipboard

Buttons should have a type "button" ?

Open aaronbushnell opened this issue 6 years ago • 4 comments

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?

aaronbushnell avatar Jan 07 '19 14:01 aaronbushnell

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.

samouss avatar Jan 08 '19 17:01 samouss

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?

aaronbushnell avatar Jan 09 '19 16:01 aaronbushnell

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.

samouss avatar Jan 10 '19 11:01 samouss

That makes sense! Appreciate the info.

aaronbushnell avatar Jan 10 '19 12:01 aaronbushnell