Automatically close keyboard popup (on mobile) when dropdown option is selected?

Dash Python
1

The title is self-explanatory.

On mobile, when exploring a searchable dropdown, the keyboard popup opens (as expected) to let the user type. When the user finds the wanted option, he/she will click on it. This, however, still leaves the keyboard open (at least on Android) which is annoying because it covers most of the page. The user has to then perform another action (depending on mobile OS) to hide the keyboard.

So, as the keyboard is not anymore useful when an option from the dropdown is selected…is there any way to hide it whenever an option of the dropdown is pressed? This would avoid having to perform an additional action on the user side.

2

Hello @guidocioni,

Do you have something we can test this one?

You can setup different props to allow for this to close, or maybe even introduce a clientside callback where on the value change and the client is not desktop that you blur the currently focused element. :smiley:

3

I didn’t include a MWE because a simple app with just a dcc.Dropdown element would do :smile:

Only issue is that you can only test this on a mobile device (not even on the mobile emulation in the developer tool) because only here the keyboard is used.

The thing I was trying to understand is whether the browser can trigger a close action on the keyboard (don’t know how to describe it). In the end it could be triggered just by having as Input the selected value of the drop-down, but I’m not sure what it should change on the client side.

4

You’ll just need to use a clientside callback to document.activeElement.blur this will take the focus off of the current element. But should leave the screen where it was.

5

Thanks, this was exactly what I was looking for!

A simple solution like this worked like a charm (to be fair, I think this should be the default behaviour on mobile devices)

# Remove focus from dropdown once an element has been selected
clientside_callback(
    """
    function(value) {
        // Remove focus from the dropdown element
        document.activeElement.blur();
    }
    """,
    Output('garbage', 'data', allow_duplicate=True),
    Input('location_search_new', 'value'),
    prevent_initial_call=True
)
1 Like