Text fields: error, focus and autofocus follow variables

An error text that resolves to empty (or null) is no error, so a field's
error state can follow a variable; a bound errorText variable takes
precedence over the design one. A field's focused variable is written
with its focus, so other nodes can style by it (a focus ring). autoFocus
can be bound (applies when the field is first built).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012anUJ6o6K6kjUXur8Ak8XX

Author: claude

lib/src/transformers/node_transformers/passive_text_field_transformer.dart

@@ -1,6 +1,7 @@
 import 'package:codelessly_api/codelessly_api.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:provider/provider.dart';
 
 import '../../../codelessly_sdk.dart';
 import '../utils/node_state_provider.dart';
@@ -271,6 +272,11 @@ class _PassiveTextFieldWidgetState extends State<PassiveTextFieldWidget> {
   }
 
   void onFocusChanged() {
+    // A `focused` variable follows the field's focus, so other nodes can
+    // style themselves by it (a focus ring drawn around the field).
+    if (mounted && widget.node.variables['focused'] != null) {
+      _setFocusedVariable(context, widget.node, focusNode.hasFocus);
+    }
     if (!focusNode.hasFocus) {
       widget.onSubmitted?.call(context, controller.text);
     }
@@ -306,9 +312,19 @@ class _PassiveTextFieldWidgetState extends State<PassiveTextFieldWidget> {
     final FormFieldValidator<String> validator =
         widget.validator ?? validatorModel.validate;
 
+    // A bound `autoFocus` (e.g. only for a new item on desktop) replaces the
+    // design value. Like Flutter's, it applies when the field is first built.
     final bool autofocus =
         !widget.settings.isPreview &&
-        (widget.autofocus ?? properties.autoFocus);
+        (widget.autofocus ??
+            (node.variables['autoFocus'] == null
+                ? null
+                : PropertyValueDelegate.getPropertyValue<bool>(
+                    node,
+                    'autoFocus',
+                    scopedValues: scopedValues,
+                  )) ??
+            properties.autoFocus);
 
     // Flutter can only obscure a single-line field, and a field that expands
     // has no line limit, so an obscured field (a password) doesn't expand:
@@ -451,21 +467,32 @@ class _PassiveTextFieldWidgetState extends State<PassiveTextFieldWidget> {
       scopedValues: scopedValues,
       settings: settings,
     );
-    final Widget? errorText = buildText(
-      context,
+    // The field is in error only while its error text has something to
+    // show: a template or bound value that resolves to empty (or null) means
+    // no error, so the error state can follow a variable.
+    final String? error = resolveErrorText(
       node,
-      property: 'errorText',
-      defaultValue: decoration.errorText,
+      decoration.errorText,
       scopedValues: scopedValues,
       settings: settings,
-      variablesOverrides: widget.variablesOverrides,
-      color: decoration.errorStyle.fills.first.toFlutterColor(),
-      fontSize: decoration.errorStyle.fontSize,
-      letterSpacing: decoration.errorStyle.letterSpacing,
-      lineHeight: decoration.errorStyle.lineHeight,
-      fontName: decoration.errorStyle.fontName,
-      textDecoration: decoration.errorStyle.textDecoration,
     );
+    final Widget? errorText = error == null
+        ? null
+        : buildText(
+            context,
+            node,
+            property: 'errorText',
+            defaultValue: error,
+            scopedValues: scopedValues,
+            settings: settings,
+            variablesOverrides: widget.variablesOverrides,
+            color: decoration.errorStyle.fills.first.toFlutterColor(),
+            fontSize: decoration.errorStyle.fontSize,
+            letterSpacing: decoration.errorStyle.letterSpacing,
+            lineHeight: decoration.errorStyle.lineHeight,
+            fontName: decoration.errorStyle.fontName,
+            textDecoration: decoration.errorStyle.textDecoration,
+          );
     final Widget? prefixText = buildText(
       context,
       node,
@@ -594,6 +621,34 @@ class _PassiveTextFieldWidgetState extends State<PassiveTextFieldWidget> {
     );
   }
 
+  /// The error text [node] shows, or null when it has none: a bound
+  /// `errorText` variable (or a condition or set value action) takes
+  /// precedence over the design [errorText], and a value that substitutes
+  /// to an empty string, or a null value, means no error.
+  String? resolveErrorText(
+    TextFieldNode node,
+    String? errorText, {
+    required ScopedValues scopedValues,
+    required WidgetBuildSettings settings,
+  }) {
+    final bool bound = node.variables['errorText'] != null;
+    final Object? value = bound
+        ? PropertyValueDelegate.getPropertyValue<Object>(
+            node,
+            'errorText',
+            scopedValues: scopedValues,
+          )
+        : context.getNodeValue(node.id, 'errorText') ?? errorText;
+    if (value == null) return null;
+    final String text = PropertyValueDelegate.substituteVariables(
+      value.toString(),
+      scopedValues: scopedValues,
+      nullSubstitutionMode: NullSubstitutionMode.emptyString,
+    );
+    if (text.trim().isEmpty || text == 'null') return null;
+    return text;
+  }
+
   InputBorder? getInputBorder(InputBorderModel? inputBorder) {
     if (inputBorder == null) return null;
     switch (inputBorder.borderType) {
@@ -674,6 +729,21 @@ class _PassiveTextFieldWidgetState extends State<PassiveTextFieldWidget> {
   }
 }
 
+/// Writes [focused] to the variable [node] binds its `focused` property to.
+void _setFocusedVariable(BuildContext context, BaseNode node, bool focused) {
+  final String? path = node.variables['focused'];
+  if (path == null) return;
+  final VariableMatch? match = VariableMatch.parse(
+    path.wrapWithVariableSyntax(),
+  );
+  if (match == null || match.hasPath) return;
+  final ValueNotifier<VariableData>? notifier = context
+      .read<CodelesslyContext>()
+      .findVariableByName(match.name);
+  if (notifier == null || notifier.value.value == '$focused') return;
+  notifier.value = notifier.value.copyWith(value: focused);
+}
+
 class _ReactiveIcon extends StatelessWidget {
   final VoidCallback onTap;
   final ReactiveIconModel iconModel;

test/text_field_state_binding_test.dart

@@ -0,0 +1,138 @@
+import 'package:codelessly_api/codelessly_api.dart';
+import 'package:codelessly_sdk/codelessly_sdk.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:provider/provider.dart';
+
+/// A form field whose error state, focus and autofocus follow variables.
+void main() {
+  Observable<VariableData> variable(String name, VariableType type, Object v) =>
+      Observable(VariableData(id: name, name: name, type: type, value: v));
+
+  TextFieldNode field({
+    String? errorText,
+    Map<String, String> variables = const {},
+  }) => TextFieldNode.fromJson({
+    ...TextFieldNode(
+      id: 'field',
+      name: 'Field',
+      basicBoxLocal: NodeBox(0, 0, 300, 48),
+      properties: TextFieldProperties(
+        decoration: InputDecorationModel(errorText: errorText),
+      ),
+    ).toJson(),
+    'variables': variables,
+  });
+
+  Future<CodelesslyContext> pump(
+    WidgetTester tester,
+    TextFieldNode node,
+    List<Observable<VariableData>> variables,
+  ) async {
+    final registry = NodeRegistry()..setNodes({node.id: node});
+    final manager = PassiveNodeTransformerManager(
+      registry.getNodeByID,
+      (context, bounds, pageID, layoutID, canvasID) => const SizedBox(),
+    );
+    final codelesslyContext = CodelesslyContext.empty();
+    for (final v in variables) {
+      codelesslyContext.variables[v.value.id] = v;
+    }
+    await tester.pumpWidget(
+      ChangeNotifierProvider<CodelesslyContext>.value(
+        value: codelesslyContext,
+        child: MaterialApp(
+          home: Scaffold(
+            body: Center(
+              child: Builder(
+                builder: (context) => manager.buildWidgetFromNode(
+                  node,
+                  context,
+                  settings: const WidgetBuildSettings(debugLabel: 'test'),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+    await tester.pump();
+    return codelesslyContext;
+  }
+
+  InputDecoration decoration(WidgetTester tester) =>
+      tester.widget<InputDecorator>(find.byType(InputDecorator)).decoration;
+
+  testWidgets('an error text template that resolves empty is no error', (
+    tester,
+  ) async {
+    final noteError = variable('noteError', VariableType.text, '');
+    await pump(tester, field(errorText: r'${noteError}'), [noteError]);
+    expect(tester.takeException(), isNull);
+    expect(decoration(tester).error, isNull);
+
+    noteError.set(noteError.value.copyWith(value: 'Add a note'));
+    await tester.pump();
+    expect(decoration(tester).error, isNotNull);
+    expect(find.text('Add a note'), findsOneWidget);
+
+    noteError.set(noteError.value.copyWith(value: ''));
+    await tester.pump();
+    expect(decoration(tester).error, isNull);
+    expect(find.text('Add a note'), findsNothing);
+  });
+
+  testWidgets('a bound errorText follows a map field, null is no error', (
+    tester,
+  ) async {
+    final formErrors = variable('formErrors', VariableType.map, {
+      'title': null,
+    });
+    await pump(
+      tester,
+      field(variables: {'errorText': r'${formErrors.title}'}),
+      [formErrors],
+    );
+    expect(decoration(tester).error, isNull);
+
+    formErrors.set(
+      formErrors.value.copyWith(value: {'title': 'Title is required'}),
+    );
+    await tester.pump();
+    expect(find.text('Title is required'), findsOneWidget);
+  });
+
+  testWidgets('a static error text is still an error', (tester) async {
+    await pump(tester, field(errorText: 'Wrong'), []);
+    expect(find.text('Wrong'), findsOneWidget);
+  });
+
+  testWidgets('a focused variable follows the field focus', (tester) async {
+    final focused = variable('titleFocused', VariableType.boolean, false);
+    await pump(tester, field(variables: {'focused': 'titleFocused'}), [
+      focused,
+    ]);
+    await tester.tap(find.byType(TextField));
+    await tester.pump();
+    expect(focused.value.value, 'true');
+
+    FocusManager.instance.primaryFocus?.unfocus();
+    await tester.pump();
+    expect(focused.value.value, 'false');
+    expect(tester.takeException(), isNull);
+  });
+
+  for (final bool value in [true, false]) {
+    testWidgets('a bound autoFocus of $value', (tester) async {
+      final editing = variable('editing', VariableType.boolean, !value);
+      await pump(tester, field(variables: {'autoFocus': r'${= !editing}'}), [
+        editing,
+      ]);
+      expect(tester.widget<TextField>(find.byType(TextField)).autofocus, value);
+      final EditableTextState editable = tester.state(
+        find.byType(EditableText),
+      );
+      expect(editable.widget.focusNode.hasFocus, value);
+    });
+  }
+}