feat: apply ElementEffect once when created (#23824) (#23849)

* feat: apply ElementEffect once when created

ElementEffect is executed immediately once when created. This affects all Signal.effect calls with an owner component. Immediate execution ensures that exceptions can be thrown eagerly when e.g. bindText(signal) is called, not later when component is attached.

Fixes #23813

* Fix Binder

* Fix NodeMap and tests

* ensure onChange is called immediately for initial runs

* Updated Javadoc of bind methods

Author: tltv

flow-data/src/main/java/com/vaadin/flow/data/binder/Binder.java

@@ -1727,22 +1727,37 @@ private FIELDVALUE convertToFieldType(TARGET target) {
         private void initInternalSignalEffectForValidators() {
             if (signalRegistration == null
                     && getField() instanceof Component component) {
-                // Constant signal that is only read and never modified.
-                // Satisfies the signal usage requirement for bindings
-                // without signal-using validators in the chain.
-                var usageGuard = new ValueSignal<Void>(null);
-                signalRegistration = Signal.effect(component, ctx -> {
-                    usageGuard.get();
-                    Result<TARGET> result = executeConversionChain();
-                    if (!ctx.isInitialRun()) {
-                        BindingValidationStatus<TARGET> status = toValidationStatus(
-                                result);
-                        fireValidationEvents(status);
-                    }
-                });
+                if (component.isAttached()) {
+                    initInternalSignalEffectForValidators(component);
+                } else {
+                    component.addAttachListener(event -> {
+                        if (event.isInitialAttach()) {
+                            event.unregisterListener();
+                        }
+                        initInternalSignalEffectForValidators(
+                                event.getSource());
+                    });
+                }
             }
         }
 
+        private void initInternalSignalEffectForValidators(
+                Component component) {
+            // Constant signal that is only read and never modified.
+            // Satisfies the signal usage requirement for bindings
+            // without signal-using validators in the chain.
+            var usageGuard = new ValueSignal<Void>(null);
+            signalRegistration = Signal.effect(component, ctx -> {
+                usageGuard.get();
+                Result<TARGET> result = executeConversionChain();
+                if (!ctx.isInitialRun()) {
+                    BindingValidationStatus<TARGET> status = toValidationStatus(
+                            result);
+                    fireValidationEvents(status);
+                }
+            });
+        }
+
         /**
          * Handles the value change triggered by the bound field.
          *

flow-data/src/test/java/com/vaadin/flow/data/binder/BinderSignalTest.java

@@ -630,6 +630,7 @@ public void crossFieldValidation_onlyWorksWithAttachedFields() {
         assertFalse(firstNameField.isInvalid());
         assertTrue(binder.isValid());
 
+        lastNameSignal.set("Smith");
         // Now attach the fields
         UI.getCurrent().add(firstNameField, lastNameField);
 

flow-html-components/src/test/java/com/vaadin/flow/component/html/AnchorBindTextTest.java

@@ -43,12 +43,12 @@ public void constructor_href_signal_lifecycleAndUpdates() {
         // Detached: binding inactive
         var signal = new ValueSignal<>("one");
         Anchor anchor = new Anchor("/path", signal);
-        // no propagation while detached
-        assertEquals("", anchor.getText());
+        // Initial value is applied
+        assertEquals("one", anchor.getText());
 
         // Update before attach is ignored
         signal.set("two");
-        assertEquals("", anchor.getText());
+        assertEquals("one", anchor.getText());
 
         // Attach -> latest value applied
         UI.getCurrent().add(anchor);

flow-server/src/main/java/com/vaadin/flow/component/Component.java

@@ -594,10 +594,11 @@ public static <T extends Component> T from(Element element,
 
     /**
      * Binds a {@link Signal}'s value to the <code>visible</code> property of
-     * this component and keeps property synchronized with the signal value
-     * while the component is in attached state. When the element is in detached
-     * state, signal value changes have no effect. <code>null</code> signal
-     * unbinds the existing binding.
+     * this component. The visibility is set immediately with the current signal
+     * value when the binding is created, and is kept synchronized with any
+     * subsequent signal value changes while the component is in attached state.
+     * When the element is in detached state, signal value changes have no
+     * effect. <code>null</code> signal unbinds the existing binding.
      * <p>
      * While a Signal is bound to a property, any attempt to set the visibility
      * manually with {@link #setVisible(boolean)} throws

flow-server/src/main/java/com/vaadin/flow/component/HasEnabled.java

@@ -102,11 +102,12 @@ default boolean isEnabled() {
     }
 
     /**
-     * Binds a {@link Signal}'s value to the enabled state of this component and
-     * keeps the state synchronized with the signal value while the element is
-     * in attached state. When the element is in detached state, signal value
-     * changes have no effect. <code>null</code> signal unbinds the existing
-     * binding.
+     * Binds a {@link Signal}'s value to the enabled state of this component.
+     * The enabled state is set immediately with the current signal value when
+     * the binding is created, and is kept synchronized with any subsequent
+     * signal value changes while the element is in attached state. When the
+     * element is in detached state, signal value changes have no effect.
+     * <code>null</code> signal unbinds the existing binding.
      * <p>
      * While a Signal is bound to an enabled state, any attempt to set the state
      * manually with {@link #setEnabled(boolean)} throws

flow-server/src/main/java/com/vaadin/flow/component/HasHelper.java

@@ -74,8 +74,10 @@ default void setHelperText(String helperText) {
     }
 
     /**
-     * Binds a signal's value to the component's helper text so that the helper
-     * text is updated when the signal's value is updated.
+     * Binds a signal's value to the component's helper text. The helper text is
+     * set immediately with the current signal value when the binding is
+     * created, and is kept synchronized with any subsequent signal value
+     * changes while the component is in attached state.
      * <p>
      * Passing {@code null} as the {@code signal} removes any existing binding
      * for the given helper text. When unbinding, the current helper text is
@@ -86,9 +88,8 @@ default void setHelperText(String helperText) {
      * {@link com.vaadin.flow.signals.BindingActiveException}. The same happens
      * when trying to bind a new Signal while one is already bound.
      * <p>
-     * Bindings are lifecycle-aware and only active while this component is in
-     * the attached state; they are deactivated while the component is in the
-     * detached state.
+     * When the component is in the detached state, signal value changes have no
+     * effect.
      *
      * @param helperTextSignal
      *            the signal to bind, not <code>null</code>

flow-server/src/main/java/com/vaadin/flow/component/HasPlaceholder.java

@@ -55,8 +55,10 @@ default String getPlaceholder() {
     }
 
     /**
-     * Binds a signal's value to the component's placeholder so that the
-     * placeholder is updated when the signal's value is updated.
+     * Binds a signal's value to the component's placeholder. The placeholder is
+     * set immediately with the current signal value when the binding is
+     * created, and is kept synchronized with any subsequent signal value
+     * changes while the component is in attached state.
      * <p>
      * Passing {@code null} as the {@code signal} removes any existing binding
      * for the given placeholder. When unbinding, the current placeholder is
@@ -67,9 +69,8 @@ default String getPlaceholder() {
      * {@link com.vaadin.flow.signals.BindingActiveException}. The same happens
      * when trying to bind a new signal while one is already bound.
      * <p>
-     * Bindings are lifecycle-aware and only active while this component is in
-     * the attached state; they are deactivated while the component is in the
-     * detached state.
+     * When the component is in the detached state, signal value changes have no
+     * effect.
      *
      * @param placeholderSignal
      *            the signal to bind, not <code>null</code>

flow-server/src/main/java/com/vaadin/flow/component/HasSize.java

@@ -421,11 +421,12 @@ default void setSizeUndefined() {
     }
 
     /**
-     * Binds a {@link Signal}'s value to the width of this component and keeps
-     * the width synchronized with the signal value while the component is in
-     * attached state. When the component is in detached state, signal value
-     * changes have no effect. <code>null</code> signal unbinds the existing
-     * binding.
+     * Binds a {@link Signal}'s value to the width of this component. The width
+     * is set immediately with the current signal value when the binding is
+     * created, and is kept synchronized with any subsequent signal value
+     * changes while the component is in attached state. When the component is
+     * in detached state, signal value changes have no effect. <code>null</code>
+     * signal unbinds the existing binding.
      * <p>
      * The width should be in a format understood by the browser, e.g. "100px"
      * or "2.5em".
@@ -462,10 +463,11 @@ default SignalBinding<?> bindWidth(Signal<String> widthSignal) {
     }
 
     /**
-     * Binds a {@link Signal}'s value to the height of this component and keeps
-     * the height synchronized with the signal value while the component is in
-     * attached state. When the component is in detached state, signal value
-     * changes have no effect.
+     * Binds a {@link Signal}'s value to the height of this component. The
+     * height is set immediately with the current signal value when the binding
+     * is created, and is kept synchronized with any subsequent signal value
+     * changes while the component is in attached state. When the component is
+     * in detached state, signal value changes have no effect.
      * <p>
      * The height should be in a format understood by the browser, e.g. "100px"
      * or "2.5em".

flow-server/src/main/java/com/vaadin/flow/component/HasStyle.java

@@ -165,12 +165,15 @@ default void addClassNames(String... classNames) {
     }
 
     /**
-     * Binds the presence of the given CSS class name to a {@link Signal}. When
-     * the signal's value is {@code true}, the class name is added; when
-     * {@code false}, the class name is removed.
+     * Binds the presence of the given CSS class name to a {@link Signal}. The
+     * class name is immediately added or removed based on the current signal
+     * value when the binding is created. When the signal's value is
+     * {@code true}, the class name is added; when {@code false}, the class name
+     * is removed.
      * <p>
-     * The binding is active while the component is attached to a UI. When
-     * detached, signal value changes have no effect.
+     * The binding is kept synchronized with any subsequent signal value changes
+     * while the component is attached to a UI. When detached, signal value
+     * changes have no effect.
      *
      * @param className
      *            the CSS class name to toggle, not {@code null} or blank
@@ -185,9 +188,11 @@ default SignalBinding<Boolean> bindClassName(String className,
     }
 
     /**
-     * Binds the CSS class names of this component to a {@link Signal} so that
-     * the class list is dynamically updated to match the signal's value. Only
-     * one group binding is allowed per component.
+     * Binds the CSS class names of this component to a {@link Signal}. The
+     * class list is immediately updated to match the current signal value when
+     * the binding is created, and is kept synchronized with any subsequent
+     * signal value changes while the component is attached. Only one group
+     * binding is allowed per component.
      * <p>
      * The group binding coexists with static values and individual toggle
      * bindings.

flow-server/src/main/java/com/vaadin/flow/component/HasText.java

@@ -167,11 +167,12 @@ default WhiteSpace getWhiteSpace() {
     }
 
     /**
-     * Binds a {@link Signal}'s value to the text content of this component and
-     * keeps the text content synchronized with the signal value while the
-     * element is in attached state. When the element is in detached state,
-     * signal value changes have no effect. <code>null</code> signal unbinds the
-     * existing binding.
+     * Binds a {@link Signal}'s value to the text content of this component. The
+     * text content is set immediately with the current signal value when the
+     * binding is created, and is kept synchronized with any subsequent signal
+     * value changes while the element is in attached state. When the element is
+     * in detached state, signal value changes have no effect. <code>null</code>
+     * signal unbinds the existing binding.
      * <p>
      * While a Signal is bound, any attempt to set the text content manually
      * throws {@link com.vaadin.flow.signals.BindingActiveException}. Same