Choices: Use native select on mobile

[jkrehm]

I looked at the documentation, issues, and PR's, so forgive me if this is answered somewhere else.

Is there a way to tell Choices to use the native select, e.g. an option that is passed into the constructor? That way the UI would benefit from the style but the UX would be native to the client.

I didn't see anything like that, so I looked at adding it into the code myself, but when I saw I'd need to add the selected item to Redux using info that I don't necessarily have, I figured I should ask if this has been attempted before.

[jshjohnson]

Hey @jkrehm,

I'm a bit confused by the request - the title of this issue and the description don't really add up 😄

Could you please clarify?

[marzubov]

Hello.

I think what @jkrehm meant is to show selected options as it is and have configuration option to open native options list on showDropdown rather than choices__list--dropdown for mobile devices.

[jkrehm]

Sorry for the confusion. @marzubov is correct that I would like to be able to open the native options list on mobile, but I wouldn't want Choices.js to try to determine what is and is not a mobile device. I would like my own code to do that, and Choices have an option – e.g. useNativeSelect – that would tell it to show the native select. The Choices-styled element would show except when the user clicks on it.

The easiest way I figured to do that is to have the <select> absolutely positioned, with left, right, top, bottom set to 0 so it entirely fills the area, then set opacity to 0. That way it will accept the click without being visible to the user.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.