AutoComplete does not work properly or maybe need a documentation

[caotuan123]

Description

Code example to reproduce the issue:

import flet as ft


def main(page: ft.Page):
    auto_complete = ft.AutoComplete(
        suggestions=[
            ft.AutoCompleteSuggestion(key="one 1", value="One"),
            ft.AutoCompleteSuggestion(key="two 2", value="Two"),
            ft.AutoCompleteSuggestion(key="three 3", value="Three"),
        ],
        on_select=lambda e: print(e.selection),
    )
    text_file = ft.TextField(width=400)
    page.add(ft.Row([ft.Column([text_file, auto_complete]), ft.Column([text_file, auto_complete])]))


ft.app(target=main)

Describe the results you expected:

I think maybe it should works like a normal TextField.

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

Flet version (pip show flet):

0.22.1

Give your requirements.txt file (don't pip freeze, instead give direct packages):

(The requirements)

Operating system: Windows

Additional environment details:

Thank you all for such a great library.

Today, I'd like to bring up an issue. I've tried to adjust the width of the AutoComplete component or add a border, but I haven't found a way to do so. Additionally, when I try to combine the AutoComplete component with a TextField in a Row or nested Row/Column (like this: Column[TextField, AutoComplete]), some strange UI issues appear.

[hahelui]

Yeah, same here. I noticed that issue, and now I can't develop my app further because of it. The problem appears to be caused by putting ft.AutoComplete inside an ft.Row. You can put it inside an ft.ResponsiveRow, but it will stretch and expand, leaving no space for the other elements in the same row.

After experimenting more with the widget, I found that you can place it as a child of ft.Stack and change the width of the stack to the desired size. Then, wrap everything inside ft.ResponsiveRow, and it sort of works, but the suggestion's dropdown will not follow the stack size or the widget width.

However, there's a bigger problem: Sadly, ft.AutoComplete is not supported yet on Android or iOS. I don't know why, maybe the widget is still under development.

The same problem on IOS

[hahelui]

By the way, this is how I did it if that can help your case:
But don't close The Issue because the problems are not fixed yet.

import flet as ft


def main(page: ft.Page):
    list_example = ["one 1", "two 2", "three 3"]
    auto_complete = ft.AutoComplete(
        suggestions=[ft.AutoCompleteSuggestion(value=i) for i in list_example],
        on_select=lambda e: print(e.selection),
    )
    text_file = ft.TextField(width=400)
    page.add(ft.Row([ft.Column([text_file, ft.Stack(controls=[auto_complete],width=400)]),
                                ft.Column([text_file, ft.Stack(controls=[auto_complete],width=400)])]))


ft.app(target=main)