Skip to content

Callback triggered by keyboard input in non-event-listener dropdown #371

@andre996

Description

@andre996

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions