Give a "Blank option name" for dropdown options

The dropdown option when dynamic only shows the options
If the dropdown is not required, the blank option would only show a blank space. Wouldn’t it be nice to be able to set the ‘blank’ option into a name so users can know what a blank option would represent (ie “All options”, “none”, etc)

1 Like

Hi, :wave:t2:

I don’t understand you very well, but you can have in your database a record for “All Options” but I think that would be better to use the placeholder.

So, when the user selects an option and wants to select again the “blank” value to be “All Options” you can reset the dropdown following these steps.

  1. Set the placeholder of the dropdown to “All Options” or “All Users” or the name you want.

  1. Group the dropdown inside a transparent group (this is to reset it later and show again the text of the placeholder when you select a “blank” option)

  1. Set an easily remembering name to the transparent group.

  1. Add workflow to reset the group that contains the dropdown when the value is changed.

  1. Add a condition to reset only WHEN THE DROPDOWN'S VALUE IS EMPTY (to show the label “All Options” after a user select another option or the “blank” option)

  1. You can also add a condition on the dropdown, to change the placeholder color to be the same color of the normal selected values. For example, If your font color is black, and your placeholders gray, you can show it black too with this condition.

I created an example for you in an app editor. You can see it clicking here::point_down:t2:

Hope it works for you.

Bests wishes,

Juan

3 Likes

+1 for this. The blank option is annoying. @allenyang would you be able to suggest this to the team at the next hackathon?

3 Likes

Placeholder is different. This is the blank option:
image

It would be nice to just be able to rename it rather than going to a long workaround

1 Like

Sure, It will be Nice.

Sometimes I do what I explained to you before, to achieve a similar effect:
ezgif.com-video-to-gif

or you can use a record in your database called “All Users” or your specific name, but you will need another actions or conditionals if you’re filtering or doing other workflows with the dropdown’s value.

Maybe in the forum, some others can have other ideas, that can share with us.

Best wishes,

Juan

But the user still only see blank on the display of the menu and not the label “All Users”
As I said, it’s a simple feature and going through a lot of workaround will definitely add workflow and weight on the app.

Sure, it will be very useful when bubble give us a native way to do it and display it perfectly :ok_hand:t2:.

THE OPTION THAT SHAL NOT BE NAMED ! I’ve been putting this off… Now I gotta deal with it. Did you ever find a solution?

Please let me/us know.

None :frowning:

5 Likes

Thanks @lottement.md, this is a great work around. A bit cumbersome, yet effective. Thanks again for sharing. Does anyone know if bubble is working for correct this?

1 Like

Thanks! Great solution!

1 Like

thanks!

1 Like

This was super helpful! Thanks!

For others interested in this approach, I adapted it to a filtering system using multiple dropdowns, like this:

$("option[value*=’“BLANK_’]”).each((i, cell) => {
if (cell.parentElement.id == “dd-filter-event-type”){
cell.innerHTML = “All Event Types”
} else if (cell.parentElement.id == “dd-filter-event-location”){
cell.innerHTML = “All Locations”
} else if (cell.parentElement.id == “dd-filter-event-language”){
cell.innerHTML = “All Languages”
};
});

This allowed me to give each drop down an id (dd-filter-something), then specify a unique text for each (basically a simpler ‘reset filter’ UI for users).

2 Likes

@launchable Didn;t work for me. “All Locations” should show in Location dropdown, but it isn’t showing. It is showing with the original script shared above as solution but not with multiple dropdown approach you shared.

Please work on this! You just enabled much better display options for tagging with the horizontal wrap. Now add the key missing feature. Reference this thread for a recent discussion of this issue / potentially relevant solution if needed.

2 years later, and this still needs to happen! For a while I had custom JS overriding the empty dropdown option, but recent Bubble updates have made is so no matter what I do with JS, I can’t get it to override the dropdown anymore. Would be great to give users a quality UX with dropdowns by having a simple “blank option” field for the element.

1 Like

There is a blank option…if ‘this is input should not be empty’ is NOT ticked there will be a blank option at the top that allows users to clear the input.

If that option is ticked then not blank value will appear.

That’s not what we’re referring to, but I appreciate your willingness to help! Many of us would like to make it so the dropdown can be empty, but the “empty” option should have some text so that if a user clicks the dropdown, they don’t see a blank option at the top. This is useful when showing a list that you want users to be able to filter but want the option of a non-filtered list when the dropdown is empty.

Oh right - didn’t read the whole thread thoroughly hahaha

Yeah that would be helpful