[Property Editor] Add workaround for embedded TextField focus issues (#8957)

Author: elliette

packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_view.dart

@@ -64,7 +64,7 @@ class PropertyEditorView extends StatelessWidget {
   }
 }
 
-class _PropertiesList extends StatelessWidget {
+class _PropertiesList extends StatefulWidget {
   const _PropertiesList({
     required this.editableProperties,
     required this.editProperty,
@@ -76,16 +76,34 @@ class _PropertiesList extends StatelessWidget {
   static const defaultItemPadding = borderPadding;
   static const denseItemPadding = defaultItemPadding / 2;
 
+  @override
+  State<_PropertiesList> createState() => _PropertiesListState();
+}
+
+class _PropertiesListState extends State<_PropertiesList> {
+  @override
+  void initState() {
+    super.initState();
+    // Workaround for https://github.com/flutter/devtools/issues/8929.
+    setUpTextFieldFocusFixHandler();
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    // Workaround for https://github.com/flutter/devtools/issues/8929.
+    removeTextFieldFocusFixHandler();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Column(
       children: <Widget>[
-        ...editableProperties.map(
-          (property) => _EditablePropertyItem(
+        for (final property in widget.editableProperties)
+          _EditablePropertyItem(
             property: property,
-            editProperty: editProperty,
+            editProperty: widget.editProperty,
           ),
-        ),
       ].joinWith(const PaddedDivider.noPadding()),
     );
   }

packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/utils/_utils_desktop.dart

@@ -0,0 +1,11 @@
+// Copyright 2025 The Flutter Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file or at https://developers.google.com/open-source/licenses/bsd.
+
+void addBlurListener() {
+  // No-op for desktop platforms.
+}
+
+void removeBlurListener() {
+  // No-op for desktop platforms.
+}

packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/utils/_utils_web.dart

@@ -0,0 +1,20 @@
+// Copyright 2025 The Flutter Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file or at https://developers.google.com/open-source/licenses/bsd.
+
+import 'dart:js_interop';
+
+import 'package:web/web.dart';
+
+void addBlurListener() {
+  window.addEventListener('blur', _onBlur.toJS);
+}
+
+void removeBlurListener() {
+  window.removeEventListener('blur', _onBlur.toJS);
+}
+
+void _onBlur(Event _) {
+  final inputElement = document.activeElement as HTMLElement?;
+  inputElement?.blur();
+}

packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/utils/utils.dart

@@ -3,6 +3,7 @@
 // found in the LICENSE file or at https://developers.google.com/open-source/licenses/bsd.
 
 import 'package:flutter/widgets.dart';
+import '_utils_desktop.dart' if (dart.library.js_interop) '_utils_web.dart';
 
 /// Converts a [dartDocText] String into a [RichText] widget.
 ///
@@ -76,3 +77,17 @@ RichText convertDartDocToRichText(
 
   return RichText(text: TextSpan(children: children));
 }
+
+/// Workaround to prevent TextFields from holding onto focus when IFRAME-ed.
+///
+/// See https://github.com/flutter/devtools/issues/8929 for details.
+void setUpTextFieldFocusFixHandler() {
+  addBlurListener();
+}
+
+/// Workaround to prevent TextFields from holding onto focus when IFRAME-ed.
+///
+/// See https://github.com/flutter/devtools/issues/8929 for details.
+void removeTextFieldFocusFixHandler() {
+  removeBlurListener();
+}