Safari web autofill has an issue where the autofill dialog flickers and doesn't completely render and allow users to fill any forms.

This is caused by a collision between default browser behavior on the pointerdown event and the programatic focusing of our inputs.

Problem

When we click into an input, the element is created, placed, and (explicitly) focused. However, all of this is done before the pointerdown event can finish. Since all pointerdown elements target the flutter-view (formerly flt-glass-pane), default browser behavior is to trigger a blur event since the target doesn't match what's currently focused, which is the input element. This doesn't manifest as an issue in most text editing use cases because we listen for blur events on the input and call focus(). However, in Safari, this near-instant focus/blur results in the disappearance of the autofill popup.

The current chain of events looks like:

pointerdown event starts -> input is created + focused -> pointerdown event ends, and triggers a blur -> input refocuses on blur

Solution

This change ensures that we don't focus the input until after the pointerdown event concludes, thus preventing any rapid-fire blur event from being emitted. We do this via wrapping the focus logic within a zero-duration Timer.

The new chain of events looks like:

pointerdown event starts -> pointerdown event ends -> input is created + focused

Alternative approach

Note: Another option was to call preventDefault() on the pointerdown event to prevent the blur from occurring that way. There may be unintended side effects from that approach, especially as it relates to platform views. The surface area of the chosen approach is much more contained and should result in no side effects outside of Safari Desktop's text editing strategy.

Fixes flutter/flutter#127960

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 Hixie said 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.