Dropdown that allows "selecting" a non-existing option

Dash Python
1

Hi all,

I’d like my users to select from an existing list in a dropdown, but also allow them to add a new item if needed.

Obviously I can create separate elements like a button to add a new item, a text input to enter it, etc.
But I’d like to solve this more elegantly using a single dropdown.

From my experience and after a thorough read of the documentation, this doesn’t seem natively possible.

I’ve been thinking of the following hack using a clientside callback (required to best track typing speed).

  1. Ouput is the ‘options’ of the dropdown
  2. Input is the ‘search_value’
  3. State of ‘options’
  4. Code checks if search_value is not in ‘options’, in which case it adds it there. It also stores in a dcc.store the new option and on the next callback fire (character added/deleted) it deletes the old “new” option and adds a new one.

I didn’t implement this yet so not sure how cleanly it will actually work. Will update after I do.

Can anyone suggest more or better solutions?

Thank you.

2

Hi @mingw64

You could try using the dmc.TagsInput

3

Interesting! This is close to what I had it mind.
Do I need to use the whole MantineProvider structure and other dmc stuff for that? Because right now I’m using dbc for most of the app and I prefer not to bring the entire dmc scaffolding just for a single component.