Comments (15)
I see the same issue. When it is wrapped in the label it does not work.
Chrome 62 stable on macOS 10.12
from choices.
It immediately closes because the focus is no longer on the actual input, it is on the label (as far as I know). By testing whether the passed input is wrapped within a label, this could be resolved. I'm just wondering whether it is a normal pattern wrapping a select input within a label? I've not come across that before 🤔
from choices.
Yes it is! w3 spec recommends it, and has many examples of it:
If the for attribute is not specified, but the label element has a labelable element descendant, then the first such descendant in tree order is the label element's labeled control.
https://dev.w3.org/html5/spec-preview/the-label-element.html
It lets the entire label + input + the box around it be clickable to focus on the input.
ALA says it's a good practice to do: http://www.alistapart.com/articles/prettyaccessibleforms/
from choices.
Afaik it works like this: clicking a label
triggers a click on the input
. So when you click an input in the label, it triggers a click for input
and for label
.
from choices.
Ah that seems to behave the same as supplying a for
attribute: https://www.w3.org/wiki/HTML/Elements/label
Interesting.
from choices.
Thanks so much by the way for choices. I've been fed up with Select2 for a while :-)
from choices.
I'm glad you like it!
I've just tried wrapping a multiple select element within a label on Chrome and it worked fine. Would you mind sending me your browser details please?
Thanks
from choices.
Hey, any chance you could send me your browser details please?
Thanks
from choices.
We've noticed this (or similar issue as well).
In short, when wrapping a select
with a label
, you can only click the label to open the select box.
Observations:
- Choices seems to receive the click, but (as you stated) looses focus.
- Keyboard navigation works fine.
Here's a codepen: https://codepen.io/khawkins98/pen/aWBOwP
Any initial thoughts/suggestions?
Tested in Chrome 57, FireFox 52 (Mac).
from choices.
Got the same issue, not sure why this issue has been closed? @jshjohnson
from choices.
Closed due to lack of information of browser.
from choices.
Hey friends, the workaround is to not nest your select elements inside a label. Instead, use <label for="someid">
in conjunction with <select id="someid">
. Not the most ideal solution, but it should at least be a somewhat clean workaround.
from choices.
Hey friends, the workaround is to not nest your select elements inside a label. Instead, use in conjunction with . Not the most ideal solution, but it should at least be a somewhat clean workaround. Sure but this is not always the case and also wrapping it in label is valid according to W3C (afaik?).
from choices.
wrapping it in label is valid according to W3C
Yes it is, but Choices.js doesn't support this at the moment.
from choices.
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.
from choices.
Related Issues (20)
- Unable to suppress warnings and errors
- How do I use this with Vue 3 Composition API?
- classNames spaces
- Add matches for highlight support
- duplicateItemsAllowed not working
- Items Not Display HOT 1
- Keep the [name='search_terms'] input value after selection
- Accessibility problems - Google PageSpeed
- Does not show the icon (HTML) HOT 1
- how to pass a single value instead of a array when you single select
- Cannot read properties of undefined (reading 'removeLoadingState')
- setChoiceByValue success but item is not highlighted HOT 1
- Behaviour of dropout elements on mobile device
- Choices does not behave like other HTML elements in a disabled fieldset
- iOS Firefox Virtual Keyboard / Disappearing Options Issue
- Dark Theme
- Search input outside the dropdown elements
- Can I add a choice that not existing in the choices (multiple select) HOT 1
- Wrong handling of ampersand in option text HOT 3
- to remove selected item we should click on it twice in a row (choices with Adjax-history in drupal)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from choices.