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 into most text editing issues 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. <img width="699" alt="Screenshot 2023-06-15 at 7 34 02 PM" src="https://github.com/flutter/engine/assets/110993981/3548d1ea-65f7-412f-b3c7-f94db2658127"> Fixes https://github.com/flutter/flutter/issues/127960
Flutter Engine
Flutter is Google's SDK for crafting beautiful, fast user experiences for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.
The Flutter Engine is a portable runtime for hosting Flutter applications. It implements Flutter's core libraries, including animation and graphics, file and network I/O, accessibility support, plugin architecture, and a Dart runtime and compile toolchain. Most developers will interact with Flutter via the Flutter Framework, which provides a modern, reactive framework, and a rich set of platform, layout and foundation widgets.
If you want to run/contribute to Flutter Web engine, more tooling can be found at felt. This is a tool written to make web engine development experience easy.
If you are new to Flutter, then you will find more general information on the Flutter project, including tutorials and samples, on our Web site at Flutter.dev. For specific information about Flutter's APIs, consider our API reference which can be found at the docs.flutter.dev.
Flutter is a fully open source project, and we welcome contributions. Information on how to get started can be found at our contributor guide.