search

benbowes / react-responsive-select

A customisable, touchable, React select / multi-select form control. Built with keyboard and screen reader accessibility in mind
https://benbowes.github.io/react-responsive-select/
MIT License
108 stars 17 forks source link

Close button for Mobile view #149

Closed carlospence closed 4 years ago

carlospence commented 4 years ago

Can the mobile pop view have a close button ?

benbowes commented 4 years ago

Possibly. Certainly not currently possible.

It currently requires a tap on the background in multi select mode. And either a selection or a tap on the background in single select mode.

Currently the modal view is all css driven - essentially the css resizes the dropdown panel.

benbowes commented 4 years ago

Hi @carlospence I have published a new version of https://www.npmjs.com/package/react-responsive-select-next

react-responsive-select-next@6.0.0-aplha.8

I have added a close button, and made the spread props changes to the svg's and added a formik multiselect example

carlospence commented 4 years ago

Ok will check it out and will get back to you

benbowes commented 4 years ago

A heads up. The close button I have implemented in react-responsive-select-next does not work in Safari yet because of the position fixed property

benbowes commented 4 years ago

@carlospence I have fixed the Safari CSS

benbowes commented 4 years ago

see https://github.com/benbowes/react-responsive-select/pull/150

benbowes commented 4 years ago

released in 6.0.0

carlospence commented 4 years ago

@benbowes Is it release in react-responsive-select or in -next?

carlospence commented 4 years ago

@benbowes , thanks for all your efforts so far. I have checked it out and it is much more better now. Though I forked another multiselect library and added mobile close button and used in my previous situation. I just implemented yours now and it is quite good.

One quick question. What if you don't want a default "Any" or "None" as first item in your multiselect box. You just want to List just your items only, thus the first item must be selectable with other items. In your current model, you can't select the first Item with any other Item.

benbowes commented 4 years ago

@carlospence check the noSelectionLabel example