Disable Autocomplete for Dropdown's Input Box in Dash

Dash Python
1

I am currently working on a side project and I’m using dash in python to create some visualizations. I have a dropdown box for player name which plots the data for the respective player. When you enter start entering a players name, the auto complete generated 2 suggestion boxes.

I have tried turning off the autocomplete for dash but thats actually the autocomplete I wanna retain.

My Code so far:

...,

    html.Div([
        dcc.Dropdown(
            id='player_name',
            options=dp.get_clan_player_dropdown_list(),
            placeholder="Select a player to plot",
             ),
    ]),
    dcc.Graph(id='my-graph'
              ), ...

Currently - I am getting 2 autocomplete boxes (one over the other). I only expect one. Don’t know where the second one is coming from. Maybe its Chrome’s default autocomplete that it remembers from before? Pic below:

image
image738×706 15.4 KB

2 Likes
2

Hi, Yes the second one comes from the browser. You need to set autocomplete=off on input element to prevent this behavior (although it is often ignored in login/password etc.). Luckily the dash Input component has an option autoComplete that you can set in your layout

1 Like
3

@adityapat3l - did you ever get an answer to this question? I’m having the same issue.

1 Like
4

Any update to this?

I’m having the same issue.

@faivre @collerek @adityapat3l

6

Hi @ptz - digging into this some more myself. Thanks for the reminder. This doesn’t seem to be an issue for me in Edge but it is in Chrome. Are you seeing variation based on the browser?

7

Where do you add the autocomplete=off in the dropdown code? Im on chrome.

@faivre

8

It doesn’t exist yet that I know of. The input has this option, and the dropdown appears to use and input, so it seems that it should be possible. Issues on GitHub here.

1 Like
9

This would be great to have implemented

10

The autoComplete flag is available in the the comparable dbc.Select component. Perhaps @tcbegley could help provide this addition to dcc.Dropdown. Thanks.

2 Likes
11

One way to solve this issue is:


dcc.Dropdown(id=DROPDOWN_TAG1, multi=True),
html.Script(children=f'document.getElementById("{DROPDOWN_TAG1}").getAttribute("autocomplete") = "off";'),
12

Pretty hacky… and it does not seem to work.

13

Are there any updates for this? I’m facing the same issue

14

Found the real solution is to wrap the inputs in a html.Form like:

import dash_html_components as html
html.Form(autoComplete="off", children=[
     dcc.Dropdown(id="id",
                          options=[{"label": val, "value": val} for val in some_list],
                     multi=False)
    ])
4 Likes