Does anyone know how to add text to the empty value inside a dropdown placeholder value? I tried using JavaScript and CSS, it didn’t work for me.
ps: Got several comments on how to create a workaround around this, that’s not what I’m looking for. I’m looking for a way to fill in some text in the empty placeholder when focused.
Looking forward to some tips and tricks here. Currently doing a workaround to reset the dropdown whenever the value changes to a blank value.
That’s not an option, I want the empty placeholder to contain the Placeholder text as I need to allow resetting the filters in an easy way customers can understand. I know about the workarounds but I’m looking specifically for this solution as it’s part of my UX.
That’s true, I’ve done that several times for clients. I do find that an inefficient way of working as it’s not something I want to do for every project, especially my personal projects. Which in this case, it’s a personal project.
Hey @lottemint.md Any idea if it’s possible to have this HTML only effect one dropdown on the page instead of all of them? Possible to select by ID or something?
This is great. I bookmarked this a while back and just had a reason to come back to use it.
I tweaked the conditional a bit. When using the ‘is focused’ I experience a bit of a quirk in that it seems like there is a flash where it looks like the values reset to show the ‘empty one’ value. I ended up making the conditional when the dropdown is visible and no longer see the flash and still works great.
its working, but I have to open the dropdown twice. after the second time its working, but first time unfortunately not
so my question: why the conditional?
I tried it without conditional → not working at all
I just came back to this again…my conditional that I used in another app that worked ‘when dropdown is visible’ no longer worked. I changed it to ‘when dropdown is hovered’ and that works and doesn’t have issue the same way the conditional of ‘when dropdown is focused’ does.
How to reset to placeholder:
Just as I came across this and solved a related problem in in a different way. In my use-case I have a complex filter system with 19 categories.
My goal was to allow a user to deselect a dropdown’s selection and show him the placeholder again (e.g “select your fav animal”).
So I added a workflow: When dropdown’s value is empty → reset relevant inputs.
Result: When a user selects the “blank” option, the dropdown is reset.
Anyways, just leaving this here as some might be looking for this