iOS/macOS safari/chrome password manager can't insert/suggest password

[MalyshevDenSer]

Question

Hi!

I'm creating a simple login page, and everything works fine on Android and Windows platforms. If the user has saved their login and password in a browser's password manager, the credentials are correctly suggested and autofilled into the text fields.

However, when attempting the same on iOS or macOS using Safari or Chrome, the password is not autofilled into the text field, even after being saved in the password manager.

Steps to reproduce:

1. Create a web app.
2. Open the app's URL on an iOS or macOS platform.
3. Enter any random login and password.
4. The browser will prompt you to save the login and password in its password manager.
5. Reload the page or open a new browser tab.
6. Begin typing your login.
7. The browser will suggest autofilling the login and password or just the password.
8. After accepting the autofill suggestion, the password does not get added to the text field on these platforms.

Code sample

import flet as ft

def main(page: ft.Page):

    login_field = ft.TextField(label="Your name", autofill_hints=ft.AutofillHint.NICKNAME, adaptive=True)
    password_field = ft.TextField(
        label="password",
        password=True,
        can_reveal_password=True,
        autofill_hints=ft.AutofillHint.PASSWORD,
        adaptive=True
    )


    page.add(
        ft.AutofillGroup(
            ft.Column(
                controls=[login_field,
                          password_field],
                adaptive=True
                )
        )
    )


ft.app(main, port=8014, view=ft.AppView.WEB_BROWSER)

What I’ve Tried

I used autofill hints (there is a discussion with a similar problem) and adaptive property, it doesn't work

[ndonkoHenri]

Instead of just nickname I suggest you try username too: autofill_hints=[ft.AutofillHint.NICKNAME, ft.AutofillHint.USERNAME],
If the issue persists, please share a screen recording.

The infos got correctly filled on my mac/Chrome:

I however noticed that, when using the material textfield (remove adaptive=True) as seen in image 2, the autofill popup shows up when in both fields, while with the cupertino fields (image 1), the popup is shown only when I use the password field. In both cases, both textfields get autofilled with the correct text though.

[MalyshevDenSer]

Ok, I have run several tests.

0. Code sample for all test cases

import flet as ft


def main(page: ft.Page):
    login_field = ft.TextField(
        label="Your name",
        autofill_hints=[
            ft.AutofillHint.NICKNAME,
            ft.AutofillHint.USERNAME
        ],
    )
    password_field = ft.TextField(
        label="password",
        password=True,
        can_reveal_password=True,
        autofill_hints=ft.AutofillHint.PASSWORD,
    )


    page.add(
        ft.AutofillGroup(
            ft.Column(
                controls=[
                    login_field,
                    password_field
                ],
                )
        )
    )


ft.app(main, port=8014, view=ft.AppView.WEB_BROWSER)

1. First test case: launching chrome browser, first autofilling flet, next github

Macbook Pro M1, Sonoma 14.6.1, Chrome Version 128.0.6613.138 (Official Build) (arm64)

Chrome was closed before launching this text. Test was run after launching Chrome app, so the first autofilling was in the flet web app:

https://youtu.be/mPKoxEgCWgc

As you can see, Chrome is acting wierdly. If I want to get autofilling, it fails before entering my password to access flet web app login and password, you see a window to enter your macbook user password and then it quickly disappears. If you move to another browser tab and try to do same thing with github it works fine.

2. Second test case: launching chrome browser, first autofilling github, next flet

Same system configuration

Chrome was closed before launching this text. Test was run after launching Chrome app, so the first autofilling was in the github:

https://youtu.be/6L2HSm8e4gk

Suddenly, Chrome is acting fine now if your first attempt of autofilling was on different website, for example, github.

3. Third test case: iPhone Chrome autofilling

iPhone 11, iOS 17.6.1, Chrome Version 129.0.6668.69

https://youtube.com/shorts/d_2G1he6lRs

Here you can see just instance loop. You can't see my taps, but I use both 'Use password' and 'Use keyboard' buttons, nothing works. It could take a lot of tries before it works.

4. What is more

I however noticed that, flet app text fields needs two clicks in Chrome browser to show autofill suggestion. Comparing to github or any other website you just need 1 click and chrome will suggest to autofill login and password. Is that fine?

5. Summary

From these tests, it seems that autofill works inconsistently in the Flet web app, particularly when compared to other websites like GitHub. The issues are observed primarily when the Flet app is the first site opened after launching Chrome. Furthermore, the iPhone autofill experience appears buggy, with multiple attempts needed to trigger the autofill.

While this might indicate a Flet-related issue, I’m unsure whether it's a Flet bug or an interaction problem between Flet and Chrome's autofill feature.

If more information is needed, feel free to ask. Any help or suggestions for resolving this issue would be greatly appreciated.

[MalyshevDenSer]

I have run one more test

0. Code sample

Just took this code somewhere in the internet

import flet as ft
from flet import TextField, Checkbox, ElevatedButton, Row, Column, Text
from flet_core.control_event import ControlEvent


def main(page: ft.Page) -> None:
    page.title = "Login"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.theme_mode = ft.ThemeMode.DARK
    page.window_width = 400
    page.window_height = 400
    page.window_resizable = False

    username_text: TextField = TextField(
        label="Username", text_align=ft.TextAlign.LEFT, width=200,  autofill_hints=[
            ft.AutofillHint.NICKNAME,
            ft.AutofillHint.USERNAME
        ],
    )
    password_text: TextField = TextField(
        label="Password", text_align=ft.TextAlign.LEFT, width=200, password=True, autofill_hints=ft.AutofillHint.PASSWORD,
    )
    checkbox_signup: Checkbox = Checkbox(
        label="I agree to the Terms and Conditions", value=False
    )
    submit_button: ElevatedButton = ElevatedButton(
        text="Login", disabled=True, width=200
    )

    def validate(param: ControlEvent) -> None:
        if all([username_text.value, password_text.value, checkbox_signup.value]):
            submit_button.disabled = False
        else:
            submit_button.disabled = True
        page.update()

    def submit(param: ControlEvent) -> None:
        print("Username: ", username_text.value)
        print("Password: ", password_text.value)

        page.clean()
        page.add(
            Row(
                controls=[
                    Text(
                        value=f"Welcome {username_text.value}", size=20, disabled=False
                    )
                ],
                alignment=ft.MainAxisAlignment.CENTER
            )
        )

    username_text.on_change = validate
    password_text.on_change = validate
    checkbox_signup.on_change = validate
    submit_button.on_click = submit

    page.add(
        Row(
            controls=[
                Column(
                    [
                        username_text,
                        password_text,
                        checkbox_signup,
                        submit_button,
                    ]
                )
            ],
            alignment=ft.MainAxisAlignment.CENTER
        )
    )


ft.app(main, port=8014, view=ft.AppView.WEB_BROWSER)

Test case

Macbook Pro M1, Sonoma 14.6.1, Chrome Version 128.0.6613.138 (Official Build) (arm64)

Chrome was relaunched before recording this video.
As you can see, login was not added to login field even if you have autofill hints NICKNAME and USERNAME:

https://www.youtube.com/watch?v=8rNH-n14KS8

[ndonkoHenri]

I am coming up with a fix. Will let you know when you can test it through a pre-release.

[ndonkoHenri]

Sub to this issue for updates: #4102

[MalyshevDenSer]

Yo, great! Thanks so much for your work. I really appreciate it.

Just to clarify, after the pre-release, should we be using the adaptive property in this situation?
Also, could you let me know when the pre-release is expected to be available?

[ndonkoHenri]

Sub to the aforementioned issue. Will share updates from there.
Basically, when the issue get closed, you can install the latest prerelease using pip install flet --pre -U, then retry.

[MalyshevDenSer]

Yes, I have already subscribed!
Thank you twice!

[MalyshevDenSer]

Sub to the aforementioned issue. Will share updates from there. Basically, when the issue get closed, you can install the latest prerelease using pip install flet --pre -U, then retry.

Hi!

Issue was closed today. does that mean I can already get the Flet version with this fix now?
I mean by using:

pip install flet --pre -U

[FeodorFitsner]

yes