Searchable dcc Dropdown - Customize or Hide "No Results Found"

Dash Python
1

When using a searchable dcc dropdown, if you don’t have a match, you get prompted with a “No results found” option.

Is there any way to change that message or not even have that dropdown tab appear?

2

bumping this.

It doesn’t appear like what I am asking for is possible with this component.

The closest thing I have found is the react-select component that has a noOptionsMessage

here is what I found so far in editing the dcc.dropdown component:

You can customize the dropdown item that is currently on hover with:

.VirtualizedSelectFocusedOption {
  background-color: rgba(0, 126, 255, 0.1);
}

You can customize Disabled dropdown items with:

.VirtualizedSelectDisabledOption {
}

You can customize pressed/selected item with:

.VirtualizedSelectSelectedOption {
  font-weight: bold;
}
3

If you like, you can give dash-mantine-components a try, Select.

You can customise the message for no results like this:

dmc.Select(data=["a", "b"], searchable=True, nothingFound="Nothing matches your query")

If you want to remove this message altogether, just pass empty string or None to nothingFound prop.

dmc.Select(data=["a", "b"], searchable=True, nothingFound="")
3 Likes
5

I already use dmc for a variety of things … I can’t believe I missed this when looking through the docs

Thanks a lot

2 Likes