OnShortcutPress stopped working on web

[andrewbeckley]

Can we access your project?

• [X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

The key press triggers that were working yesterday aren't today on my web app. The only way to make them work is to log out and log in again. Same behaviour in Test and Run modes.

The only thing that changed is the new ff release.

Expected Behavior

Pressing the relevant key should trigger the action

Steps to Reproduce

1. Add new OnShortcutPress to a page to launch an alert dialog
2. Instant reload your test, OnShortcutPress doesn't work
3. Log out
4. Log in and OnShortcutPress will work

Reproducible from Blank

• [ ] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

IT40kMnlsMlNm+FR+s2NacFHlgAjKW4VapIFqNlRaCsofePrOpkAf8/7UFtUOM+4Y39IPmf9gTgX/MrXiM7uUvErOSmWGohbyc9hWw3vZEKnVKq7EpS3b0dSGZ1mCh2MyLa3ohV+WcluSl463E+Xe9m+aAHZJufpOFUdReaeXdeK2SrDX1iXc2URm05KZDPz

Visual documentation

Here's a video https://www.dropbox.com/scl/fi/4s3lp69irpdrf8putvgr2/screen-recording-2024-10-24-at-080411_QRfDLB8w.mp4?rlkey=pyv1x9qgbn29mm1e6m1jzkhd6&st=duagva6p&dl=0

Environment

- FlutterFlow version: 5.0.8
- Platform: web
- Browser name and version: Chrome
- Operating system and version affected: MacOS

Additional Information

[andrewbeckley]

Here's a link to a video recreating issue https://www.dropbox.com/scl/fi/4s3lp69irpdrf8putvgr2/screen-recording-2024-10-24-at-080411_QRfDLB8w.mp4?rlkey=pyv1x9qgbn29mm1e6m1jzkhd6&st=duagva6p&dl=0

[andrewbeckley]

https://github.com/user-attachments/assets/e004bb9d-566c-41fa-9b2a-b0cab5629446

also this video with brand new fresh project. no firebase or auth connection. shortcut key doesn't work.. and obviously in this case no way to log out and in to test if that makes it work.

[andrewbeckley]

after more investigation, this test app does work on when i publish, so it might just be a test / run issue. but makes it hard to develop stuff without impacting live app

[mmearly]

Hi @andrewbeckley, thanks for reporting this issue. Also thanks for the video -- it really helped clear up some confusion.

I've done a bit of digging, and it seems to be an issue of focus being properly passed to the project when the test/run session is embedded in an iframe. We use an iframe in test and run mode to wrap the project in our overhead UI (e.g. debug pannel, the window size options). We upgraded from Flutter 3.22 to 3.24 in the most recent FF release and it seems that there are a few known issues on the Flutter side related to this present in 3.24 (issue one, issue two, issue three). This behavior is likely a result of some combination of these issues -- not quite sure exactly which ones yet.

We'll work on a temporary fix, but unfortunately it's impossible for us to guarantee that we'll be able to resolve the issue fully until Flutter resolves their issues.

In the meantime, I found two workarounds that seem to reliably work:

• Use run mode's View Full Screen mode. This way the project does not run in an iframe, so the issue is not present.
• It is possible to force focus to return to the project by clicking into a text field. If using View Full Screen mode isn't acceptable (probably because you need access to debug pannel), adding a temporary dummy text field to click on to cause the project to start listening for keyboard shortcuts again will let you take focus back when it gets stolen. (I assume that's why logging in fixed the issue -- because you needed to click on text fields to enter the email and password.)

[andrewbeckley]

Amazing, very helpful, thank you!

[DerLeole]

Funnily enough the problem seems to happen in reverse too (at least in firefox, couldnt reproduce in chrome).

I have a bug with an exported web build from FF that makes text fields unable to receive any keyboard input if you tap on any html element. While it might look like you can reselect the text element (the style changes), it does not receive any actual text input. That wouldn't be too bad, but sadly Flutterflow wraps the entirety of the screen in a WebView aware for Fullscreen bottom sheets, and WebViewAwares are just HTML elements which means in the current FF version, if you have a Text Field in a Widget that is used as a pop-up via bottom sheet, you cannot write anything in it, once you clicked anywhere on the screen (including on the text field itself) in Firefox.

Seems like the new Flutter update majorly messed up some kind of keyboard focus change managment between HTML elements and native elements.