Dash: Input list option: updating the datalist from external api

Dash Python
4

I found out that the focus isn’t the only problem. I made it so that the datalist updates in response to changes in the input itself, and ignores the button. This will result in spamming the api I’m using, but it’s the best path I see:

import dash
from dash.dependencies import Output, Input, State
import dash_core_components as dcc
import dash_html_components as html


app = dash.Dash()

items = [dcc.Input(id='book-input',
                   list='suggested-datalist',
                   type='text'),
         html.Button(id='submit-button',
                     n_clicks=0,
                     children='btn',
                     className='button-primary'),
         html.Datalist(id='suggested-datalist'),
         html.P(id='text-message')]
datalist_polyfill_url = "https://codepen.io/TCProctor/pen/PepWYP.js"
app.css.append_css({"external_url": datalist_polyfill_url})
app.layout = html.Div(items, id='parent-div')


@app.callback(Output(component_id='suggested-datalist',
                     component_property='children'),
              [Input(component_id='book-input',
                     component_property='value')])
def update_datalist(value):
    return [html.Option(value=value + 'spam')] * 3


if __name__ == "__main__":
    app.run_server(debug=True, port=8051)

In chrome (Version 65), this actually works great, but in Firefox (59), the datalist oddly only shows if you delete characters. This isn’t just a Firefox problem, as it works just fine with the dynamic datalist updates using javascript that I’ve found.

Note: datalist_polyfill_url is a url for the datalist-polyfill npm package, a javascript library that adds datalist support to otherwise unsupported browsers (Safari, IE).