Defocus iframe on blur or mouseout (#22153)

[alexeyinkin]

Fixes #22153

---

Thank you for your contribution! Follow this checklist to help us incorporate your contribution quickly and easily:

• Choose reviewer(s) and mention them in a comment (R: @username).
• Mention the appropriate issue in your description (for example: addresses #123), if applicable. This will automatically add a link to the pull request in the issue. If you would like the issue to automatically close on merging the pull request, comment fixes #<ISSUE NUMBER> instead.
• Update CHANGES.md with noteworthy changes.
• If this contribution is large, please file an Apache Individual Contributor License Agreement.

See the Contributor Guide for more tips on how to make review process smoother.

To check the build health, please visit https://github.com/apache/beam/blob/master/.test-infra/BUILD_STATUS.md

GitHub Actions Tests Status (on master branch)

See CI.md for more information about GitHub Actions CI.

[alexeyinkin]

R: @damondouglas

[alexeyinkin]

The package code: https://github.com/alexeyinkin/flutter-issue-106664-workaround/blob/main/lib/src/web.dart

[alexeyinkin]

The workaround:

If not in iframe, do nothing.

If Safari, do nothing because it is not affected.

If in Firefox, programmatically release focus on iframe's blur event. In Firefox it is sufficient. The downside is that selection is lost on clicking outside.

Otherwise programmatically release focus on iframe's mouseout event. In Chrome the solution for Firefox is insufficient. On the first outside click, it still scrolls back to the iframe, and only the second click is free to leave the iframe.

[alexeyinkin]

Please hold this PR. It uses my personal package. We have decided to re-publish it at Akvelon's pub.dev account. We are busy doing this now.

All set, ready for review.

[alexeyinkin]

Before:

After:

(Note that we lose selection when moving mouse pointer out from the iframe.)

[alexeyinkin]

I also took this chance to rename enabled param to editable. enabled was vague, it gives an impression that disabled playground is unable to run the code. editable is more precise.

I did it in this branch because it is likely the fastest way to deploy it, and we want this change before URLs start to spread.

[damondouglas]

@alexeyinkin Thank you for doing this work.

[damondouglas]

Instead of publishing a package on pub.dev, could you create a local one and reference? One could also reference a depedency via local or GitHub references: https://dart.dev/tools/pub/dependencies. If a pub package is absolutely needed, I noticed two issues flagged in the scores: https://pub.dev/packages/akvelon_flutter_issue_106664_workaround/score

[alexeyinkin]

This is how I compare these options:

Local package in Beam repo, referenced in pubspec.yaml by relative path

++ Totally under Apache's control.
-- Low chance that anyone will update the code if the behavior of the bug changes in some Flutter versions or browsers since people will just forget about the issue.

In-project code

Same as above, but
-- Even less chance anyone will update the code since there is even no hint in pubspec.yaml that this is a issue.
-- The import of dart:html produces a linter warning ("Avoid web libraries in non-web packages") that has to be silenced. This is one of the reasons I like outsourcing it to dedicated packages so the main code is platform-agnostic and warning-free.
-- Cannot be reused in ToB or other projects even within the same Beam repository.

Git repo, referenced by URL in pubspec.yaml

++ Can be reused in ToB (should it go in Flutter) or even other apps outside of Beam repository.
++ Higher chance of receiving updates since it is a separate unit at Akvelon.
-- The least robust way from Apache's perspective since the repository can be removed, or hidden, or the branch can be force-pushed into a broken state.

Pub.dev package

All benefits of the above, and
++ Package will always be there since pub.dev does not allow to change or delete what was published, unlike git.
++ Highest chance of receiving updates since 3rd parties will adopt this too.
++ Notification when the bug is fixed. Pub.dev packages can be flagged as discontinued, and this will produce a warning on Playground build. It will hint the Playground maintainers to remove the package which will improve user experience (no selection losses on mouse out).

So pub.dev package is not necessary, but I see it as the most beneficial way to all parties.

[alexeyinkin]

I have updated the package. It now have the max score, and the source is public here:
https://github.com/akvelon/flutter-issue-106664-workaround

[damondouglas]

@pabloem This LGTM. However, could you look closely at the use of a published package? I'm on the fence about it. The reasoning seems well thought out but I wanted your opinion as well.

[pabloem]

fair enough. I'll merge this for now.

[pabloem]

I'm thinking it might make sense to eventually separate the Beam Playground into its own repository to isolate these issues from the main repo