[BUG] Multi-output callback not firing on dynamically-added components #798

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

app = dash.Dash(__name__, suppress_callback_exceptions=True)

layout1 = html.Div([
    dcc.Dropdown(id='ca_city_dropdown', options=[], value=None),
    dcc.Dropdown(id='us_city_dropdown', options=[], value=None),
])


# ------------- Single callback with multiple outputs does not work -----------
# @app.callback(
#     [Output('ca_city_dropdown', 'options'),
#      Output('us_city_dropdown', 'options')],
#     [Input('cities_div', 'children')])
# def display_cities(cities):
#     opts = [{'label': i, 'value': i} for i in cities]
#     return [opts[:3], opts[3:]]


# ------------- Separate callbacks work -------------
@app.callback(
    Output('ca_city_dropdown', 'options'),
    [Input('cities_div', 'children')])
def display_ca_cities(cities):
    return [{'label': i, 'value': i} for i in cities[:3]]


@app.callback(
    Output('us_city_dropdown', 'options'),
    [Input('cities_div', 'children')])
def display_us_cities(cities):
    return [{'label': i, 'value': i} for i in cities[3:]]


_cities = [
    "Toronto", "Montreal", "Vancouver", "New York", "Austin", "Los Angeles"
]

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='cities_div', style={'display': 'none'}, children=_cities),
    html.Div(id='page-content'),
])


@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/':
        return layout1
    else:
        return '404'

if __name__ == '__main__':
    app.run_server(debug=True)