[web] Transfer focus to view rootElement on blur/remove.

[tugorez]

The safeBlur/safeRemove/safeRemoveSync methods in the view manager should become the standard way to "blur" and "remove" elements within the web engine.

Calling these method ensures the blur operation doesn't disrupt the framework's view focus management because these methods transfer the focus from the current element to its containing EngineFlutterView's rootElement, so focus never abandons the Flutter view unless the user wants to.

This is a generalization of the former DefaultTextEditingStrategy.scheduleFocusFlutterView, which turns out is needed in anything that touches elements that may receive focus in the engine, not just text editing.

Issue

(Maybe) Part of flutter/flutter#157387
(Opportunistically) Fixes flutter/flutter#46638

Pre-launch Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene wiki page, which explains my responsibilities.
• I read and followed the Flutter Style Guide and the C++, Objective-C, Java style guides.
• I listed at least one issue that this PR fixes in the description above.
• I added new tests to check the change I am making or feature I am adding, or the PR is test-exempt. See testing the engine for instructions on writing and running engine tests.
• I updated/added relevant documentation (doc comments with ///).
• I signed the CLA.
• All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

[yjbanov]

element is not always the target of the focus. See, for example,

engine/lib/web_ui/lib/src/engine/semantics/label_and_value.dart

Line 81 in 656117f

/// The element that gets focus when [focusAsRouteDefault] is called.

.

Maybe what we need is have an abstract getter DomElement get focusTarget on the SemanticRole class, and then pass role.focusTarget to safelyBlurElement. Then each concrete SemanticRole class will implement the getter, returning the element that's meant to have focus.

[yjbanov]

Some roles will remove their DOM children that may have focus in their implementation of dispose().

[tugorez]

I didn't see any test break. Is this a behavior that can/will be added later? Do I need to change other classes as well?

Apologies, I have zero experience with semantics.

[ditman]

I have created a small "repro" of this in JS so I can understand better what's happening. The goal is to move the focus away from the element and to the rootElement of the container view (if any) instead of calling .blur() on it.

This more or less prevents the focus from ever leaving the Flutter View (to the body), at least when the DOM modifications are performed in the engine.

As @tugorez alludes to in the PR, this method should be used every time we want to do ".blur()" or ".remove()" on elements that are focusable. I'm not sure what other parts of the engine this would need to be applied to, but worst case scenario we could potentially apply this to our implementations of .blur() and .remove() in the dom.dart file (that sounds too blunt to me though)

I have some changes to this PR (mainly shuffling code around, and prevent creating a new blur function every time we call the safelyBlurElement). I'm attempting to write/update some tests to verify it works as expected.

[ditman]

Some questions from an offline review:

• (@mdebbar) How to prevent this regressing, do we want to make the default "remove/blur" method names "scary to use", and make this code part of the general "remove/blur" methods that we expose? (change dom.dart), so at least we force people to read docs and choose the right one?
• (@yjbanov) Do we need a "target" element to move focus to (not only the flutter view?), or would the framework "blur this, then focus that" always?
• When deleting element that contains activeElement we need to safely blur as well. FIXED.

[ditman]

Woops, some more tests broke when I flipped the element == activeElement check to element == activeElement || removeElement && element.contains(activeElement)

https://ci.chromium.org/ui/p/flutter/builders/try/Linux%20Engine%20Drone/2834484/overview

[yjbanov]

LGTM if LGT @mdebbar

[mdebbar]

Thanks for the additional checks ✅

[ditman]

autosubmit applied, I'm feeling lucky! :P