Dropdown background and it's container not rendered correctly

[Zvetkov]

Description Dropdown background and it's container not rendered correctly

1. Changing bgcolor or focused_bgcolor has no effect on control appearance
2. When dropdown is put into the row or container, with or without other control, when we clip that row\container with external container - everything is clipped excluding focused background of dropdown

Issues are present in code sample 1 repro - see code line 42, 43 and actual appearance of "test_dropdown" 2 repro - see appearance of "test_dropdown" after choosing an option and clicking a button

Second issue could have been ad-hoc fixed if we had a way to defocus focusable controls, Dropdown and TextField, but this is also not available.

Code example to reproduce the issue:

import flet as ft
import random


def main(page: ft.Page):
    def handle_dropdown_onchange(e):
        if e.data:
            add_to_list_btn.disabled = False
            add_to_list_btn.visible = True
            add_to_list_btn.update()

    def add_to_list(e):
        list_column.controls.append(ft.Text(test_dropdown.value))
        test_dropdown.value = ""
        list_column.update()
        toggle_container()

    def toggle_container(e=None):
        if drop_container.current.height == 45:
            drop_container.current.height = 120
        else:
            drop_container.current.height = 45
        drop_container.current.update()

    page.title = "DropDown focus color test"
    page.padding = 0
    page.theme = ft.Theme(color_scheme_seed="#FFA500", visual_density=ft.ThemeVisualDensity.COMPACT)
    page.dark_theme = ft.Theme(color_scheme_seed="#FFA500", visual_density=ft.ThemeVisualDensity.COMPACT)

    list_column = ft.Column([ft.Text("We will add dropdown values here:")])

    drop_container = ft.Ref[ft.Container]()

    test_dropdown = ft.Dropdown(
        height=42,
        text_size=13,
        dense=True,
        border_color=ft.colors.RED,
        expand=True,
        hint_text="Some hint",
        on_change=handle_dropdown_onchange,
        bgcolor=ft.colors.GREEN,
        focused_bgcolor=ft.colors.BLUE,
        label_style=ft.TextStyle(size=13, weight=ft.FontWeight.BOLD),
        text_style=ft.TextStyle(size=13, weight=ft.FontWeight.BOLD),
        hint_style=ft.TextStyle(size=13, weight=ft.FontWeight.BOLD),
        label="Some label",
        options=[ft.dropdown.Option(f"path{random.randint(0, 30)}") for path in range(20)],
        )

    add_to_list_btn = ft.FilledTonalButton(
        "add to list, choose from dropdown first. Clicking will collapse hideable container",
        icon=ft.icons.ADD,
        on_click=add_to_list,
        visible=True,
        disabled=True,
        )

    test_icon = ft.Icon(ft.icons.ADD)

    hideable_container = ft.Container(
        ft.Column(
            [
                ft.Container(ft.Row([ft.Text("Hideable dropdown container")]), on_click=toggle_container),
                ft.Row([test_icon, test_dropdown])
            ], spacing=20),
        ref=drop_container, height=120,
        animate=ft.animation.Animation(300, ft.AnimationCurve.DECELERATE),
        clip_behavior=ft.ClipBehavior.HARD_EDGE,
        border=ft.border.all(2, ft.colors.SECONDARY_CONTAINER), padding=10, border_radius=10)

    page.add(hideable_container, ft.Row([add_to_list_btn]), list_column)


ft.app(target=main)

Describe the results you received: Dropdown bgcolor can't be changed Dropdown is not always clipped correctly by external container

Describe the results you expected: Dropdown bgcolor can be changed Dropdown is correctly clipped correctly by external container

Additional information you deem important (e.g. issue happens only occasionally):

Flet version (pip show flet):

Version: 0.4.2

Operating system: Windows 10

Additional environment details: Running with

flet run .\test.py -d

[azhago]

Probleme still here with flet 0.21.2

[ndonkoHenri]

A pre-release with the fix concerning this issue is now available. Try it and report if you face any further issues or have any questions:

pip install flet --pre