Black Lives Matter. Please consider donating to Campaign Zero's mission of ending police violence in America.
https://www.joincampaignzero.org

Disable Autocomplete for Dropdown's Input Box in Dash

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:

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

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

1 Like

Any update to this?

I’m having the same issue.

@faivre @collerek @adityapat3l

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?

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

@faivre

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.