I’m trying to create a google-style search bar using dash leaflet components. Currently the only way I know of doing this is to use a combination of a dcc.Input with a hidden dcc.Dropdown below. While this works “ok”, it requires an extra click from the user to click on the dcc.Dropdown before seeing the list of all matches. I’d like to remove that extra step.

The dcc.Dropdown itself is close to supporting this except it doesn’t generate an event if a user hits return after entering some text in the dropdown autocomplete textbox. A couple alternatives include creating some javascript to detect either returns in a dcc.Dropdown or a click in a dcc.Textarea component. While I am able to detect either event in javascript, I have not be successful in updating a component that will trigger a callback event. I tried updating html.Div component, but it never generates an event. Any clues? or anyone aware of a component that can support this workflow? Thanks a bunch!

I’ve tried all the LLMs and they’ve resulting in death spirals of different efforts to update that html.Div that never results in generating a callback event. It all looks good on the javascript side, but it never results in generating an event on the python dash leaflet side. Here’s one of the javascript examples. I’ve tried both updating an existing html.Div and also tried deleting and creating a new html.Div on the javascript side. Neither results in generating a callback event.

    document.addEventListener('DOMContentLoaded', function() {
        const checkElements = () => {
            const dropdown = document.getElementById('dropdown-input');
            const store = document.getElementById('return-key-store');

            if (dropdown && store) {
                console.log("Dropdown and store found!");
                console.log(dropdown);
                console.log(store);

                dropdown.addEventListener('keydown', function(evt) {
                    console.log('Key pressed:', evt.key);
                    if (evt.key === 'Enter') {
                        // Update the dcc.Store directly via a 
                        // client-side callback
                        window.dash_clientside.dash_clientside.setStoreData(
                            'return-key-store', {value: 'Return pressed'}
                        );
                        console.log('Store updated with Return pressed');
                    }
                });
            } else {
                console.log("Elements not found, retrying...");
                setTimeout(checkElements, 500); // Retry after 500ms
            }
        };

        checkElements(); // Initial call to check for elements
    });