Comments (4)
I'm going to close this as I feel you could typically solve this by just using a different selector to target Dropkick specifically.
Where you might currently have something like this:
.input:focus {
/* ... */
}
You could add a similar class to Dropkick and target it this way:
.input:focus,
.dk-input .dk-selected:focus {
/* ... */
}
Of course, this might not always be so easy if you're using a CSS framework. In either case, I don't feel like this is a bug as adding classes to the generated markup after initialization was never intended. If you must, I think reattaching it in the change handler as you did should work fine.
from dropkick.
Dropkick allows you to add classes to the select and the individual options to allow for some extra customizations.
Example:
http://jsbin.com/bivudi/edit?html,css,js,output
The reason that line removes the old classes is so previous classes added from other options aren't persisted when the selected option changes.
from dropkick.
Ah, I missed that in the docs. Thanks @wwilsman
from dropkick.
Think I have closed this too soon. On my bin, the input
class is attached to the dk-selected
div.
On yours, it's attached to the root element (dk-select
). It cause some buggy styling in my case as I have some :focus
on .input
.
One solution could be to pass the option.className
to the root element instead (so we can also always reattach the select className to preserve current behavior), but this is a breaking change.
For now, I simply reattach the class on the change handler, a bit ugly but it does the job.
Reopening in case you want to chime in, feel free to close if you don't think there's need for change.
from dropkick.
Related Issues (20)
- IE11 Issue: Change event. HOT 2
- Disabled state isn't relayed to the screen reader
- Multiselects on mobile are broken
- Disabled optgroup not detected
- Select with all options disabled breaks HOT 1
- JAWS 17 not reading dropkick dropdown
- this object doesn't support this property or method dropkick HOT 1
- How to handle autocomplete
- This isn't really an issue, but HOT 1
- UglifyJS error because of ES6 HOT 8
- Not working on IE 11 HOT 2
- TypeError default is not a constructor HOT 5
- Cross-Origin blocking on forms using dropkick HOT 1
- Using an icon font displays unexpected results HOT 12
- toggleClass throws "is not a function" HOT 2
- Hiding the Selected Option From the Dropdown List HOT 7
- Bubble Option not triggering change on the native select HOT 1
- Accessibility issue HOT 1
- Dropkick does not correctly handle selects with optgroups
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 dropkick.