[web] - Fix for Safari partially autofilling form

lib/web_ui/lib/src/engine/text_editing/text_editing.dart

@@ -101,8 +101,12 @@ void _setStaticStyleAttributes(DomHTMLElement domElement) {
 /// element.
 ///
 /// They are assigned once during the creation of the DOM element.
-void _hideAutofillElements(DomHTMLElement domElement,
-    {bool isOffScreen = false}) {
+void _styleAutofillElements(
+  DomHTMLElement domElement, {
+  bool isOffScreen = false,
+  bool shouldHideElement = true,
+  bool shouldDisablePointerEvents = false,
+}) {
   final DomCSSStyleDeclaration elementStyle = domElement.style;
   elementStyle
     ..whiteSpace = 'pre-wrap'
@@ -115,8 +119,6 @@ void _hideAutofillElements(DomHTMLElement domElement,
     ..outline = 'none'
     ..border = 'none'
     ..resize = 'none'
-    ..width = '0'
-    ..height = '0'
     ..textShadow = 'transparent'
     ..transformOrigin = '0 0 0';
 
@@ -126,6 +128,16 @@ void _hideAutofillElements(DomHTMLElement domElement,
       ..left = '${offScreenOffset}px';
   }
 
+  if (shouldHideElement) {
+    elementStyle
+      ..width = '0'
+      ..height = '0';
+  }
+
+  if (shouldDisablePointerEvents) {
+    elementStyle.pointerEvents = 'none';
+  }
+
   if (browserHasAutofillOverlay()) {
     domElement.classList.add(transparentTextEditingClass);
   }
@@ -191,6 +203,7 @@ class EngineAutofillForm {
     final Map<String, DomHTMLElement> elements = <String, DomHTMLElement>{};
     final Map<String, AutofillInfo> items = <String, AutofillInfo>{};
     final DomHTMLFormElement formElement = createDomHTMLFormElement();
+    final bool isSafariDesktopStrategy = textEditing.strategy is SafariDesktopTextEditingStrategy;
     DomHTMLElement? insertionReferenceNode;
 
     // Validation is in the framework side.
@@ -201,7 +214,10 @@ class EngineAutofillForm {
       e.preventDefault();
     }));
 
-    _hideAutofillElements(formElement);
+    // We need to explicitly disable pointer events on the form in Safari Desktop,
+    // so that we don't have pointer event collisions if users hover over or click
+    // into the invisible autofill elements within the form.
+    _styleAutofillElements(formElement, shouldDisablePointerEvents: isSafariDesktopStrategy);
 
     // We keep the ids in a list then sort them later, in case the text fields'
     // locations are re-ordered on the framework side.
@@ -233,7 +249,16 @@ class EngineAutofillForm {
           final DomHTMLElement htmlElement = engineInputType.createDomElement();
           autofill.editingState.applyToDomElement(htmlElement);
           autofill.applyToDomElement(htmlElement);
-          _hideAutofillElements(htmlElement);
+
+          // Safari Desktop does not respect elements that are invisible (or
+          // have no size) and that leads to issues with autofill only partially
+          // working (ref: https://github.com/flutter/flutter/issues/71275).
+          // Thus, we have to make sure that the elements remain invisible to users,
+          // but not to Safari for autofill to work. Since these elements are
+          // sized and placed on the DOM, we also have to disable pointer events.
+          _styleAutofillElements(htmlElement,
+              shouldHideElement: !isSafariDesktopStrategy,
+              shouldDisablePointerEvents: isSafariDesktopStrategy);
 
           items[autofill.uniqueIdentifier] = autofill;
           elements[autofill.uniqueIdentifier] = htmlElement;
@@ -277,7 +302,7 @@ class EngineAutofillForm {
     // In order to submit the form when Framework sends a `TextInput.commit`
     // message, we add a submit button to the form.
     final DomHTMLInputElement submitButton = createDomHTMLInputElement();
-    _hideAutofillElements(submitButton, isOffScreen: true);
+    _styleAutofillElements(submitButton, isOffScreen: true);
     submitButton.className = 'submitBtn';
     submitButton.type = 'submit';
 
@@ -303,7 +328,7 @@ class EngineAutofillForm {
 
   void storeForm() {
     formsOnTheDom[formIdentifier] = formElement;
-    _hideAutofillElements(formElement, isOffScreen: true);
+    _styleAutofillElements(formElement, isOffScreen: true);
   }
 
   /// Listens to `onInput` event on the form fields.
@@ -1325,7 +1350,7 @@ abstract class DefaultTextEditingStrategy with CompositionAwareMixin implements
         inputConfiguration.autofillGroup?.formElement != null) {
       // Subscriptions are removed, listeners won't be triggered.
       activeDomElement.blur();
-      _hideAutofillElements(activeDomElement, isOffScreen: true);
+      _styleAutofillElements(activeDomElement, isOffScreen: true);
       inputConfiguration.autofillGroup?.storeForm();
     } else {
       activeDomElement.remove();

lib/web_ui/test/engine/text_editing_test.dart

@@ -2290,6 +2290,69 @@ Future<void> testMain() async {
       expect(formChildNodes[3].type, 'submit');
     });
 
+    test(
+        'hidden autofill elements should have a width and height of 0 on non-Safari browsers',
+        () {
+      final List<dynamic> fields = createFieldValues(<String>[
+        'email',
+        'username',
+        'password',
+      ], <String>[
+        'field1',
+        'field2',
+        'field3'
+      ]);
+      final EngineAutofillForm autofillForm =
+          EngineAutofillForm.fromFrameworkMessage(
+              createAutofillInfo('email', 'field1'), fields)!;
+      final List<DomHTMLInputElement> formChildNodes =
+          autofillForm.formElement.childNodes.toList()
+              as List<DomHTMLInputElement>;
+      final DomHTMLInputElement username = formChildNodes[0];
+      final DomHTMLInputElement password = formChildNodes[1];
+
+      expect(username.name, 'username');
+      expect(password.name, 'current-password');
+      expect(username.style.width, '0px');
+      expect(username.style.height, '0px');
+      expect(username.style.pointerEvents, isNot('none'));
+      expect(password.style.width, '0px');
+      expect(password.style.height, '0px');
+      expect(password.style.pointerEvents, isNot('none'));
+      expect(autofillForm.formElement.style.pointerEvents, isNot('none'));
+    }, skip: isSafari);
+
+    test(
+        'hidden autofill elements should not have a width and height of 0 on Safari',
+        () {
+      final List<dynamic> fields = createFieldValues(<String>[
+        'email',
+        'username',
+        'password',
+      ], <String>[
+        'field1',
+        'field2',
+        'field3'
+      ]);
+      final EngineAutofillForm autofillForm =
+          EngineAutofillForm.fromFrameworkMessage(
+              createAutofillInfo('email', 'field1'), fields)!;
+      final List<DomHTMLInputElement> formChildNodes =
+          autofillForm.formElement.childNodes.toList()
+              as List<DomHTMLInputElement>;
+      final DomHTMLInputElement username = formChildNodes[0];
+      final DomHTMLInputElement password = formChildNodes[1];
+      expect(username.name, 'username');
+      expect(password.name, 'current-password');
+      expect(username.style.width, isNot('0px'));
+      expect(username.style.height, isNot('0px'));
+      expect(username.style.pointerEvents, 'none');
+      expect(password.style.width, isNot('0px'));
+      expect(password.style.height, isNot('0px'));
+      expect(password.style.pointerEvents, 'none');
+      expect(autofillForm.formElement.style.pointerEvents, 'none');
+    }, skip: !isSafari);
+
     tearDown(() {
       clearForms();
     });