Windows touch keyboard persists after input control unmounts

[erikmwerner]

Description

On Windows touchscreen devices the touch keyboard will appear every time the flet app receives touch input. This happens whether or not a control that requires the keyboard has focus.

Code example to reproduce the issue:

import flet as ft

def main(page: ft.Page):
    page.title = "Keyboard focus bug example"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    # forward declare button click handler
    def button_click(_e):
        switch_content(_e)

    content_1 = ft.Column(
            [
                ft.TextField(
                    value="1. Tap here to show the touch keyboard",
                    text_align=ft.TextAlign.RIGHT,
                    width=400),
                ft.OutlinedButton(
                    "2. Then tap or click me to change the page content",
                    on_click=button_click),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        )
    
    content_2 = ft.Column(
            [
                ft.Text("3. Now tap anywhere else inside the flet window. "
                        "The touch keyboard will appear after each tap, even"
                        "if you close it and there are no controls that use "
                        "keyboard focus. It does not happen when you click, "
                        "it only happens when you tap. You can stop it by "
                        "focusing on another application and then returning "
                        "to the flet application."),
                ft.OutlinedButton("3. Buttons make the keyboard show, too."),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        )
    
    switcher = ft.AnimatedSwitcher(content=content_1, duration=100)

    def switch_content(_e):
        switcher.content = content_2
        page.update()

    page.add(ft.SafeArea(switcher))


ft.app(target=main)

Describe the results you received:

The touch keyboard appears when I tap on controls that do not require a keyboard (ie buttons). If I dismiss the keyboard, it will reappear again the next time I tap on anything. This behavior will continue until I switch focus to another application and then back to the flet application.

Describe the results you expected:

The touch keyboard should only appear when a control that requires keyboard input has user focus. When that control is blurred or unmounted, the keyboard should disappear.

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

• The touch keyboard must be enabled. Go to Settings > Time & Language > Typing and set Show the touch keyboard to Always or When no Keyboard Attached
• This issue pertains to the Touch keyboard, not the On-Screen Keyboard
• This behavior appears to only happen after the TextField unmounted from the page. It makes no difference if the touch keyboard is showing or not while the TextField is unmounted, once the touch keyboard has been shown and the control unmounted, the touch keyboard will continue to pop up until the flet application loses focus.

Flet version (pip show flet):

Version: 0.22.0

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

flet~=0.22.0

Operating system:

Windows 11 Pro 23H2

Additional environment details:
Tested on Microsoft Surface Go 2, Microsoft Surface Pro 8, Microsoft Surface Laptop 3

[erikmwerner]

This might be related to an open issue with flutter flutter/flutter#99050

For anyone else with this problem, the flutter workaround also worked for me in flet. Add an invisible button to your page to absorb the focus and the keyboard will retract.

import flet as ft

class Invisibutton(ft.ElevatedButton):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.autofocus = True
        self.height = 1
        self.width = 1
        self.style = ft.ButtonStyle(
            bgcolor={
                ft.MaterialState.HOVERED:ft.colors.TRANSPARENT,
                ft.MaterialState.FOCUSED:ft.colors.TRANSPARENT,
                ft.MaterialState.DEFAULT:ft.colors.TRANSPARENT
            },
            shadow_color={
                ft.MaterialState.HOVERED:ft.colors.TRANSPARENT,
                ft.MaterialState.FOCUSED:ft.colors.TRANSPARENT,
                ft.MaterialState.DEFAULT:ft.colors.TRANSPARENT
            },
            surface_tint_color={
                ft.MaterialState.HOVERED:ft.colors.TRANSPARENT,
                ft.MaterialState.FOCUSED:ft.colors.TRANSPARENT,
                ft.MaterialState.DEFAULT:ft.colors.TRANSPARENT
            },
            overlay_color={
                ft.MaterialState.HOVERED:ft.colors.TRANSPARENT,
                ft.MaterialState.FOCUSED:ft.colors.TRANSPARENT,
                ft.MaterialState.DEFAULT:ft.colors.TRANSPARENT
            }
        )

[FeodorFitsner]

Thanks for sharing your findings!
Subscribed to Flutter issue - let's hope for a proper fix.