Dropdown freezes interface when `allow_custom_value=True` and `interactive=True` and choices are updated by another component

[jjshoots]

Describe the bug

The dropdown option freezes the interface when allow_custom_value=True and interactive=True and choices are updated by another component.

Have you searched existing issues? 🔎

• [X] I have searched and found no existing issues

Reproduction

import gradio as gr

choices = [(c, i) for i, c in enumerate("abcdefghijklmnopqrstuvwxyz")]

with gr.Blocks() as app:
    dropdown1 = gr.Dropdown(choices=[("null", 1337)], interactive=True, allow_custom_value=True)
    button1 = gr.Button(value="Click me to enable options")
    button1.click(fn=lambda: choices, outputs=[dropdown1])

    dropdown2 = gr.Dropdown(choices=[("null", 1337)])
    button2 = gr.Button(value="Click me to enable options")
    button2.click(fn=lambda: choices, outputs=[dropdown2])

app.launch()

Screenshot

No response

Logs

No response

System Info

Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 4.12.0
gradio_client version: 0.8.0

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
altair: 5.2.0
fastapi: 0.108.0
ffmpy: 0.3.1
gradio-client==0.8.0 is not installed.
httpx: 0.25.2
huggingface-hub: 0.19.4
importlib-resources: 6.1.1
jinja2: 3.1.2
markupsafe: 2.1.3
matplotlib: 3.8.2
numpy: 1.26.3
orjson: 3.9.10
packaging: 23.2
pandas: 2.1.4
pillow: 10.2.0
pydantic: 2.5.2
pydub: 0.25.1
python-multipart: 0.0.6
pyyaml: 6.0.1
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.9.0
typing-extensions: 4.9.0
uvicorn: 0.25.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.

gradio_client dependencies in your environment:

fsspec: 2023.12.2
httpx: 0.25.2
huggingface-hub: 0.19.4
packaging: 23.2
typing-extensions: 4.9.0
websockets: 11.0.3

I'm using the Brave browser.

Severity

I can work around it

[abidlabs]

Hi @jjshoots thanks for creating the issue. The code to update the choices here is actually incorrect. You should return gr.Dropdown(choices=...) from your function if you want to update the choices. Here's the working version of the code:

import gradio as gr

choices = [(c, i) for i, c in enumerate("abcdefghijklmnopqrstuvwxyz")]

with gr.Blocks() as app:
    dropdown1 = gr.Dropdown(choices=[("null", 1337)], interactive=True, allow_custom_value=True)
    button1 = gr.Button(value="Click me to enable options")
    button1.click(fn=lambda: gr.Dropdown(choices=choices), outputs=[dropdown1])

app.launch()