Placeholder text dropdown value

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.

Naamloos

1 Like

Check ‘this input shouldn’t be empty’.

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.

I appreciate your advice though. Thanks!

1 Like

You can build a custom drop-down using input field and repeating group.

1 Like

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.

@Bubble Please add a simple placeholder for us :wink:

1 Like



Preview:
https://just4tests5.bubbleapps.io/version-test/dropdown

Editor:

16 Likes

You’re unbelievable. I love it, thanks Sergey!

2 Likes

This is great!!!

Thanks :wink:

1 Like

Wonderful !

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?

1 Like

Yes, sure!

Editor:

6 Likes

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.

Thanks for sharing this!

2 Likes

its working, but I have to open the dropdown twice. after the second time its working, but first time unfortunately not :frowning:
so my question: why the conditional?
I tried it without conditional → not working at all

thanks for your help!

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.

having the same issue…

Try when dropdown “is pressed”. It worked for me

1 Like

Set empty value - Dropdown

I just released this plugin that perfectly solves this problem.
Consider checking it out to see if it suits you.

1 Like

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 :slight_smile:

6 Likes

Screenshot of what @kkirner92 describes:

image

Works like a charm.

1 Like