Keyboard not working when resizing the web

[garlen-javier]

What happened?

So I was testing my game itch.io and I suddenly encounter this bug that when I hit the full screen button the keyboard stop responding to my inputs.

What do you expect?

Expected: Keyboard should be working on itch.io even if I press the fullscreen button.

How can we reproduce this?

Steps to reproduce:

1. Make any component that you can have KeyboardHandler like this

import 'package:flame/components.dart';
import 'package:flutter/services.dart';
import 'player.dart';

class PlayerController extends Component with KeyboardHandler
{
  @override
  bool onKeyEvent(RawKeyEvent event, Set<LogicalKeyboardKey> keysPressed) {
    print("ON KEY!!");
    return super.onKeyEvent(event, keysPressed);
  }
}

2. Log a print to check if it's working

3. build and upload your flame game in itch.io "make sure the Fullscreen button is mark as check."
   

4. Save and try to play your game

5. "Make sure it is minimize or on default size at first" and hit the full screen button, here the keyboard shouldn't stop working unless you will resize the browser again and sometimes it will stop working also on certain browser size.

What steps should take to fix this?

No response

Do have an example of where the bug occurs?

Sorry the game is not release yet.

Relevant log output

No response

Execute in a terminal and put output into the code block below

[√] Flutter (Channel stable, 3.13.9, on Microsoft Windows [Version 10.0.22631.3155], locale en-US)
• Flutter version 3.13.9 on channel stable at C:\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision d211f42860 (4 months ago), 2023-10-25 13:42:25 -0700
• Engine revision 0545f8705d
• Dart version 3.1.5
• DevTools version 2.25.0

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at C:\Android\AndroidStudioSDK
• Platform android-34, build-tools 34.0.0
• ANDROID_SDK_ROOT = C:\Android\AndroidStudioSDK
• Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)
• All Android licenses accepted.

[√] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2019 16.11.13)
• Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
• Visual Studio Community 2019 version 16.11.32413.511
• Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2022.3)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)

[√] VS Code (version 1.85.2)
• VS Code at C:\Users\Shuin\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.80.0

[√] Connected device (4 available)
• sdk gphone x86 (mobile) • emulator-5554 • android-x86 • Android 11 (API 30) (emulator)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22631.3155]
• Chrome (web) • chrome • web-javascript • Google Chrome 122.0.6261.95
• Edge (web) • edge • web-javascript • Microsoft Edge 122.0.2365.66

[√] Network resources
• All expected network resources are available.

• No issues found!

Affected platforms

Web

Other information

Packages using:

cupertino_icons: ^1.0.2
flame: ^1.14.0
flame_tiled: ^1.18.3
flame_forge2d: ^0.16.0+4
flame_bloc: ^1.10.9
equatable: ^2.0.5
flutter_bloc: ^8.1.3
flame_audio: ^1.3.3
hive: ^2.2.3
hive_flutter: ^1.1.0
path_provider: ^2.1.2

Are you interested in working on a PR for this?

• I want to work on this

[spydon]

Does it start working again if you click the game? I'm guessing that it loses the focus.

[garlen-javier]

Found the problem, it was out of focus when i'm trying to fullscreen it.

[garlen-javier]

@spydon May I ask how to return the focus inside the game when I click a fullscreen button? Or is that even possible?

[spydon]

Pass in a FocusNode to the GameWidget and then add a listener to that one and when it loses focus you just take back the focus to that FocusNode.

[garlen-javier]

@spydon thnx a lot FocusNode works!