Dropdown with `None` initial value and custom values enabled causes JavaScript error in Gradio v4.19.1+

[Paillat-dev]

Summary

When using a dropdown component in Gradio with both the allow_custom_value option set to True and its initial value set to None, the interface fails to load, and a JavaScript error is displayed in the browser console. This issue has been observed starting from Gradio version 4.19.1 and persists in later versions. The expected behavior is for the dropdown to load with no initial selection and allow for custom values to be entered without causing interface failures.

Steps to Reproduce

1. Install Gradio version 4.19.1 or later.

2. Execute the following Python script:

   import gradio as gr
   
   text = gr.Dropdown(["a", "b", "c"], label="Select a letter", value=None, allow_custom_value=True)
   iface = gr.Interface(fn=lambda x: print(x), inputs=[text], outputs=[])
   iface.launch()

3. Open the provided URL in a web browser to view the Gradio interface.
4. Observe that the interface does not load, and a JavaScript error appears in the console.

Expected Behavior

The dropdown should be displayed without any initial selection, and users should be able to enter custom values.

Actual Behavior

The interface fails to load, and the JavaScript console displays the following error:

Uncaught (in promise) TypeError: input_text.toLowerCase is not a function

System Info

• Gradio Version: 1.19.1 or later
• Operating System: Windows 11
• Browser: Firefox

Screenshots

Logs

No relevant logs available.

Severity

This issue is blocking the usage of the Gradio interface with dropdowns that allow custom values, as it prevents the interface from loading entirely.

[dawoodkhan82]

Thanks for filing this issue @Paillat-dev, will take a look!