Feature Request: 'interim-value' or 'search-value' component property for searchable Dropdown menu

[SterlingButters]

The searchable feature in the dropdown component is awesome yet it requires that all options be pre-specified. That is, the dropdown options cannot be populated via "external" search. Normally this would never be an issue but if one was populating the dropdown with results from an external database, there is no callback to effectively accommodate this. An example:

@app.callback(
    Output('stock-ticker-input', 'options'), # dcc.Dropdown
    [Input('add-results-button', 'n_clicks')],
    [State('keyword', 'value'), # (dcc.Input)
     State('stock-ticker-input', 'options')]) 
def create_dropdown(n_clicks, keyword, options):
    list = []
    if n_clicks > 0:
        list.extend(options)

        results = pd.DataFrame(ts.get_symbol_search('{}'.format(keyword))[0][['2. name', '1. symbol']])
        results.columns = ['label', 'value']

        list.extend(results.to_dict('rows'))

    return list

where ts.get_symbol_search(...) is an API call to the external database. You can see from this example that I am required to make the search using text input and button where results from the search are manually entered into the dropdown to be searched again.

I am suggesting a revision so that the above could look like the following:

@app.callback(
    Output('stock-ticker-input', 'options'), # dcc.Dropdown
    [Input('stock-ticker-input', 'search_value')],) 
def create_dropdown(keyword, options):

        results = pd.DataFrame(ts.get_symbol_search('{}'.format(keyword))[0][['2. name', '1. symbol']]) 
        results.columns = ['label', 'value']

    return results.to_dict('rows')

Notice that once an option is selected to assume the 'value' property of the dropdown component and the 'search-value' == None, the 'option' is no longer available to the dropdown component thus sustaining the 'value' of a selection becomes questionable.

[Marc-Andre-Rivet]

@SterlingButters Thanks for reporting this issue. Looking into what's possible with the underlying react-virutalized-select component.

[Marc-Andre-Rivet]

@SterlingButters While it is possible to hook up to the internal input state of the twice nested react-select component, my testing indicates that modifying the options prop (or sending back the same options) while the dropdown is open clears the dropdown and makes value selection impossible (sending back None causes handled errors on the JS side).

There are plans for creating a in-house dropdown component (driven by the dash-table) that could incorporate this feature request.

I'll transfer this issue over to the dash-core-components repo and crosslink the issues.

[Marc-Andre-Rivet]

Crosslink with in-house dropdown component plotly/dash-table#250

[SterlingButters]

@Marc-Andre-Rivet Thank for confirming "that modifying the options prop (or sending back the same options) while the dropdown is open clears the dropdown and makes value selection impossible ". This is exactly what I meant by "once an option is selected to assume the 'value' property of the dropdown component and the 'search-value' == None, the 'option' is no longer available to the dropdown component thus sustaining the 'value' of a selection becomes questionable."

I'll keep on the lookout for incorporation of the request, thanks for your help

[alexcjohnson]

search_value was added in #660 (thanks @inytar 🎉)