Sprints: Custom <select> Component for styling

[mattiapontonio]

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

Request type

• [X] New documentation
• [ ] Correction or update

Details

Provide a custom basic vanilla workaround example for customizing the style of the select element.
A similar approach as done here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

Sub issues

• [X] Adding a bit of description on how it works.
• [x] Fixing the width of the select to be as wide as the widest option. Currently, when you select the shortest option, the overall box changes to be as wide as that one, and the wider options get cut off.
• [ ] Is
• [ ] Fixing the issue whereby you have to click twice to select an option in the drop-down in Firefox (it works in Chrome ;-) )
• [x] Looking at keyboard accessibility — this solution is currently not keyboard accessible at all.
• [x] Looking at making it so that you can close the options list again by clicking the select itself.
• [ ] No multiselect supported
• [ ] No optgroup supported
• [ ] Probably others features are not supported
• [ ] Mention Web Components?

[mattiapontonio]

https://github.com/mattiapontonio/select/blob/main/index.html

[chrisdavidmills]

Hi @mattiapontonio !

Thanks again for another great example. I've moved it to be part of the examples section, improved the formatting a bit, and added a little bit of description at the top.

I was wondering if you could look at:

• Adding a bit of description on how it works. The addition of the <datalist> element via JS is interesting; I also wonder how accessible that is.
• Fixing the width of the select to be as wide as the widest option. Currently, when you select the shortest option, the overall box changes to be as wide as that one, and the wider options get cut off.
• Fixing the issue whereby you have to click twice to select an option in the drop down in Firefox (it works in Chrome ;-) )
• Looking at keyboard accessibility — this solution is currently not keyboard accessible at all.
• Looking at making it so that you can close the options list again by clicking the select itself.

[chrisdavidmills]

I don't know if this can scale 🙂
I'm joking. Thank You, yes I Will look at It.

It's all good ;-)

Obviously, there's no tight timescale for this, just some things to think about to make it even better.

[chrisdavidmills]

I've had another look at this, and it works pretty well now, @mattiapontonio . The main things for me were keyboard accessibility and maintaining a fixed width. I think this is good enough to leave as is for now, although I'm obviously not going to stop you from adding more improvements!

[mattiapontonio]

@chrisdavidmills thank You.
Deployed this: https://github.com/mattiapontonio/select/tree/0.0.1