Describe the bug
When using the keyboard to search or select values within the day_filter dropdown (which is not wrapped by an EventListener), the type_event callback, which is associated with the color_dropdown_listener (which is wrapped by an EventListener), is triggered. This is unexpected, as the day_filter interaction should not affect the color_dropdown_listener or its associated callback.
Code to reproduce the issue
from dash_extensions.enrich import DashProxy, html, Input, Output, State
from dash_extensions import EventListener
import dash_core_components as dcc
import json
app = DashProxy()
app.layout = html.Div([
EventListener(
children=dcc.Dropdown(
id=f"color_filter",
className=f"class_color_filter",
options=['Azul', 'Verde', 'Rojo'],
value=[],
multi=True,
clearable=True,
),
id=f"color_dropdown_listener",
className=f"class_color_dropdown_listener",
events=[{"event": "keydown", "props": ["key", "srcElement.value", "srcElement.className", "srcElement.id"]}],
),
html.Div(id="log"),
dcc.Dropdown(
id=f"day_filter",
className=f"day_filter",
options=['Lunes', 'Martes', 'Jueves'],
value=[],
multi=True,
clearable=True,
),
])
@app.callback(
Output("log", "children"),
Input("color_dropdown_listener", "event"),
State("color_dropdown_listener", "n_events")
)
def type_event(e, n_events):
return json.dumps(e)
if __name__ == "__main__":
app.run(debug=True)
Expected behavior
The click_event callback should only be triggered when a keydown event occurs within the color_filter dropdown, as that is the only interaction the EventListener is listening for. Interactions with the day_filter dropdown, whether by mouse or keyboard, should not trigger this callback.
Actual behavior
When typing in the day_filter dropdown to search or select options, the click_event callback is triggered. This is incorrect. The keyboard events within the day_filter dropdown are somehow being incorrectly associated with the color_dropdown_listener and triggering its callback.
Additional context
This issue seems to indicate a potential problem with how dash_extensions.EventListener interacts with keyboard events on other components in the Dash layout, especially when those components are also dropdowns. The EventListener appears to be capturing keyboard events globally, rather than just those specifically targeted at its child component. This unintended behavior makes it difficult to isolate events and create predictable interactions within a Dash application.
Describe the bug
When using the keyboard to search or select values within the
day_filterdropdown (which is not wrapped by anEventListener), thetype_eventcallback, which is associated with thecolor_dropdown_listener(which is wrapped by anEventListener), is triggered. This is unexpected, as theday_filterinteraction should not affect thecolor_dropdown_listeneror its associated callback.Code to reproduce the issue
Expected behavior
The click_event callback should only be triggered when a keydown event occurs within the color_filter dropdown, as that is the only interaction the EventListener is listening for. Interactions with the day_filter dropdown, whether by mouse or keyboard, should not trigger this callback.
Actual behavior
When typing in the day_filter dropdown to search or select options, the click_event callback is triggered. This is incorrect. The keyboard events within the day_filter dropdown are somehow being incorrectly associated with the color_dropdown_listener and triggering its callback.
Additional context
This issue seems to indicate a potential problem with how dash_extensions.EventListener interacts with keyboard events on other components in the Dash layout, especially when those components are also dropdowns. The EventListener appears to be capturing keyboard events globally, rather than just those specifically targeted at its child component. This unintended behavior makes it difficult to isolate events and create predictable interactions within a Dash application.