`Dropdown`'s value can't be reset/cleared

[madhavcs]

Duplicate Check

• I have searched the opened issues and there are no duplicates

Describe the bug

When a dropdown is disabled in Flet 0.27.6, its value remains visible instead of resetting to no selection, even after programmatically setting value=None and calling page.update(). This issue occurs in a hierarchical dropdown setup where the second dropdown (DD2) should reset and disable when the first dropdown (DD1) changes, and similarly, the third dropdown (DD3) should reset when DD2 changes. Despite setting value=None, the dropdown retains its previous selection visually, which is unexpected behavior.
Steps to Reproduce
Create a simple Flet application with three hierarchical dropdowns:
Dropdown 1 (DD1) with options "1", "2", "3".

Dropdown 2 (DD2) with options "a", "b", "c", initially disabled.

Dropdown 3 (DD3) with options "A", "B", "C", initially disabled.

Set up the hierarchy:
DD2 is enabled only when DD1 has a value.

DD3 is enabled only when DD2 has a value.

When DD1 changes, DD2 and DD3 should reset to no selection (value=None) and DD3 should be disabled.

When DD2 changes, DD3 should reset to no selection.

Run the application:
Select a value in DD1 (e.g., "1").

Select a value in DD2 (e.g., "a").

Change DD1 to another value (e.g., "2").

Observe the behavior of DD2.

Expected Behavior
When DD1 changes to "2", DD2 should:
Be disabled (disabled=True).

Reset to no selection (visually empty, showing no value).

This should happen because the code sets dd2.value = None and calls page.update().

Actual Behavior
When DD1 changes to "2", DD2:
Is correctly disabled (disabled=True).

Retains its previous value (e.g., "a") visually, despite dd2.value being set to None.

The dropdown does not visually reset to no selection, even after page.update() is called.

Environment
Operating System: [Specify your OS, e.g., Windows 11]

Python Version: [Specify your Python version, e.g., Python 3.11]

Flet Version: 0.27.6

Additional Information
Workaround Attempted: I tried a workaround by clearing the dropdown's options (dd2.options = []), setting value=None, and then re-adding the options (dd2.options = [ft.dropdown.Option(opt) for opt in dd2_options]). However, this still did not reset the visual state of the dropdown, confirming the issue is with Flet 0.27.6's rendering or state management.

Impact: This bug affects applications relying on hierarchical dropdowns, where resetting dependent dropdowns is critical for user experience. It forces developers to either find complex workarounds or switch to alternative frameworks like Tkinter.

Suggestion: It would be helpful if the Flet team could investigate whether this issue is fixed in newer versions (e.g., the latest version as of March 2025) or provide a recommended workaround for Flet 0.27.6.

How the App is Run: Using flet run or python sample_form.py

Sample Code
Below is the minimal code to reproduce the issue:

import flet as ft
from flet import Page, Column, Row, Dropdown, Text, Container, Border, BorderSide, colors

Code sample

Code

[Paste your code here]

To reproduce

Steps to Reproduce
Create a simple Flet application with three hierarchical dropdowns:
Dropdown 1 (DD1) with options "1", "2", "3".

Dropdown 2 (DD2) with options "a", "b", "c", initially disabled.

Dropdown 3 (DD3) with options "A", "B", "C", initially disabled.

Set up the hierarchy:
DD2 is enabled only when DD1 has a value.

DD3 is enabled only when DD2 has a value.

When DD1 changes, DD2 and DD3 should reset to no selection (value=None) and DD3 should be disabled.

When DD2 changes, DD3 should reset to no selection.

Run the application:
Select a value in DD1 (e.g., "1").

Select a value in DD2 (e.g., "a").

Change DD1 to another value (e.g., "2").

Observe the behavior of DD2.

Expected behavior

Expected Behavior
When DD1 changes to "2", DD2 should:
Be disabled (disabled=True).

Reset to no selection (visually empty, showing no value).

This should happen because the code sets dd2.value = None and calls page.update().

Actual Behavior
When DD1 changes to "2", DD2:
Is correctly disabled (disabled=True).

Retains its previous value (e.g., "a") visually, despite dd2.value being set to None.

The dropdown does not visually reset to no selection, even after page.update() is called.

Screenshots / Videos

Captures

[Upload media here]

Operating System

Windows

Operating system details

Windows 11

Flet version

0.27.6

Regression

No, it isn't

Suggestions

No response

Logs

def main(page: Page):
# Setup window
page.title = "Sample Hierarchical Dropdown Form"
page.window.width = 400
page.window.height = 300
page.window.resizable = True

# Dropdown options
dd1_options = ["1", "2", "3"]
dd2_options = ["a", "b", "c"]
dd3_options = ["A", "B", "C"]

# Create dropdowns
dd1 = Dropdown(
    label="Dropdown 1",
    width=150,
    text_align=ft.TextAlign.CENTER,
    options=[ft.dropdown.Option(opt) for opt in dd1_options],
    value=None  # Initially no selection
)

dd2 = Dropdown(
    label="Dropdown 2",
    width=150,
    text_align=ft.TextAlign.CENTER,
    options=[ft.dropdown.Option(opt) for opt in dd2_options],
    value=None,
    disabled=True  # Initially disabled
)

dd3 = Dropdown(
    label="Dropdown 3",
    width=150,
    text_align=ft.TextAlign.CENTER,
    options=[ft.dropdown.Option(opt) for opt in dd3_options],
    value=None,
    disabled=True  # Initially disabled
)

# Event handlers
def on_dd1_change(e):
    # If DD1 has a value, enable DD2; otherwise, reset and disable both DD2 and DD3
    if dd1.value:
        dd2.disabled = False
        dd2.value = None  # Reset DD2
        dd3.value = None  # Reset DD3
        dd3.disabled = True
    else:
        dd2.value = None
        dd2.disabled = True
        dd3.value = None
        dd3.disabled = True
    page.update()

def on_dd2_change(e):
    # If DD2 has a value, enable DD3; otherwise, reset and disable DD3
    if dd2.value:
        dd3.disabled = False
        dd3.value = None  # Reset DD3
    else:
        dd3.value = None
        dd3.disabled = True
    page.update()

# Attach event handlers
dd1.on_change = on_dd1_change
dd2.on_change = on_dd2_change

# Create form layout
form = Container(
    content=Column([
        Row([
            Text("Hierarchical Dropdown Test", weight=ft.FontWeight.BOLD, size=16),
        ], alignment=ft.MainAxisAlignment.CENTER),
        Row([
            dd1,
            dd2,
            dd3
        ], spacing=10, alignment=ft.MainAxisAlignment.CENTER)
    ], spacing=10),
    padding=10,
    border=Border(
        top=BorderSide(1, colors.BLACK),
        bottom=BorderSide(1, colors.BLACK),
        left=BorderSide(1, colors.BLACK),
        right=BorderSide(1, colors.BLACK)
    )
)

# Add form to page
page.add(form)
page.update()

Run the app

if name == "main":
ft.app(target=main)

Additional details

No response

[ndonkoHenri]

Dropdown's value can't be cleared, whereas DropdownM2's value can be cleared.

Opened a Flutter issue: flutter/flutter#165877

Repro code

import flet as ft


def main(page: ft.Page):
    fruits = [
        "Apple",
        "Banana",
        "Cherry",
    ]

    def handle_dropdown_clear(e):
        val = None
        d1.value = val
        d2.value = val
        page.update()

    options = [ft.DropdownOption(f) for f in fruits]

    page.add(
        d1 := ft.Dropdown(
            label="Dropdown",
            options=options,
        ),
        d2 := ft.DropdownM2(
            label="DropdownM2",
            options=options,
        ),
        ft.Button("Clear", on_click=handle_dropdown_clear),
    )


ft.app(main)

[madhavcs]

Is there any documentation available for DropdownM2 ? Not able to find and simple find and replace does not help as syntax and properties seem different. Tried find and replace and many properties went into exception

[urn216]

DropdownM2 is deprecated, so you're encouraged to avoid it if possible - though there is documentation available here. You're supposed to be able to do everything you can with M2 in the new Dropdown - unfortunately a couple bugs still need to be worked out, but most of the functionality is there

[madhavcs]

Ok. I was planning for coding in flet 0.27.6 as I wanted a common code for android and windows. So technically if M2 is a deprecated function it means it may not work in android so the purpose of keeping flet for both OS wont happen. Looks like I will have to wait till next version of flet

[ndonkoHenri]

So technically if M2 is a deprecated function it means it may not work in android

@madhavcs it will work. Gave it a try?

[patel-jay]

For anyone struggling with not being able to reset/clear the dropdown:
#4719 (comment)

[JCarlosH300]

Hi, Has anyone been able to resolve this issue by resetting the dropdown? I'm using version 0.28.0.

[patel-jay]

Hi, Has anyone been able to resolve this issue by resetting the dropdown? I'm using version 0.28.0.

Yes, check this out: #4719 (comment)