After Selecting Option in dcc.dropdown, make new click render "placeholder text"

Sorry for the confusing title, but basically I was wondering the following. I have a normal dcc.dropdown, which is loaded to one of the values to start with. I want to make it so when I click on the dropdown box, instead of still showing the currently selected value, it shows the placeholder text.

Right now I have to click the x for it to show the placeholder text, or press backspace. However, I want it to show the placeholder text anytime someone clicks the box because then they know they can search.

Thanks!

Hi @niraekjs,

I think that the only way is to assign a None or Null to the ‘value’ porperty at the end of the callback.
That means you made all the things you need to do with the ‘value’ selected by the user and after that assign an empty ‘value’ to the dropdown.

The problem you will have is that you will have Input an Output ‘value’ in the same callback but there are ways to solve that.

But of you have a one of the values loaded when it starts, which shows the user that a value has been chosen. Do you prefer that the super only see the placeholder?
Similar to what @Eduardo said, maybe you don’t set a value in the dcc.dropdown but you filter the data and plot inside the callback function as if a value was chosen

Hi, thank you both for your replies! I see. That’s correct, I have a value in the beginning showing.

I want the flow in particular to look like:

  1. User enters websites.

  2. Dropdown shows value A currently

  3. When user clicks on A (to change the value), the box renders “Please Select…”

  4. After a user selects a new value, that value shows in the dropdown.

  5. Repeat 3-4

Also, until a user selects a “new” selection, I still want the old selected to be “selected” under the hood. Not none. Basically all I want is when they click the box for it to show the placeholder text. If they click away without making a selection, it could go back to the selected item. Thank you!

If this can’t be done, at the very least, I would like to color the “x” a different color so users know they can click it to remove the current selection (which would therefore mean none was selected under the hood).

That’s a good question, I’m not sure how to do that or if it’s possible.

Ah I see. That would be unfortunate. The only reason I really want this is because I think it’s a bit weird when the user clicks the dropdown for it to show the old selection with a cursor flashing in the beginning: it’s hard for the user to know they can search if there is already a text selection there.

I think the best option is to leave the dropdown without assigning a value and showing the placeholder text to say the user what to do.

dcc.Dropdown do not have n_clicks property or any other to trigger a callback when the user select it.

Perhaps there is a way using className and a CSS file that do something when the element is selected, but I’m not know how to do it. :woozy_face: