fix: Lazy init of disable on click

vaadin-button-flow-parent/vaadin-button-flow/pom.xml

@@ -56,6 +56,11 @@
             <artifactId>jakarta.jakartaee-web-api</artifactId>
             <scope>test</scope>
         </dependency>
+        <dependency>
+            <groupId>org.mockito</groupId>
+            <artifactId>mockito-core</artifactId>
+            <scope>test</scope>
+        </dependency>
     </dependencies>
     <build>
         <plugins>

vaadin-button-flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java

@@ -30,6 +30,7 @@
 import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.html.Image;
+import com.vaadin.flow.component.page.PendingJavaScriptResult;
 import com.vaadin.flow.component.shared.HasPrefix;
 import com.vaadin.flow.component.shared.HasSuffix;
 import com.vaadin.flow.component.shared.HasThemeVariant;
@@ -57,6 +58,7 @@
 @JsModule("@vaadin/polymer-legacy-adapter/style-modules.js")
 @NpmPackage(value = "@vaadin/button", version = "24.1.0-alpha5")
 @JsModule("@vaadin/button/src/vaadin-button.js")
+@JsModule("./buttonFunctions.js")
 public class Button extends Component
         implements ClickNotifier<Button>, Focusable<Button>, HasAriaLabel,
         HasEnabled, HasPrefix, HasSize, HasStyle, HasSuffix, HasText,
@@ -65,6 +67,7 @@ public class Button extends Component
     private Component iconComponent;
     private boolean iconAfterText;
     private boolean disableOnClick = false;
+    private PendingJavaScriptResult initDisableOnClick;
 
     // Register immediately as first listener
     private Registration disableListener = addClickListener(
@@ -340,6 +343,7 @@ public void setDisableOnClick(boolean disableOnClick) {
         this.disableOnClick = disableOnClick;
         if (disableOnClick) {
             getElement().setAttribute("disableOnClick", "true");
+            initDisableOnClick();
         } else {
             getElement().removeAttribute("disableOnClick");
         }
@@ -359,10 +363,13 @@ public boolean isDisableOnClick() {
      * if server-side handling takes some time.
      */
     private void initDisableOnClick() {
-        getElement().executeJs("var disableEvent = function () {"
-                + "if($0.getAttribute('disableOnClick')){"
-                + " $0.setAttribute('disabled', 'true');" + "}" + "};"
-                + "$0.addEventListener('click', disableEvent)");
+        if (initDisableOnClick == null) {
+            initDisableOnClick = getElement().executeJs(
+                    "window.Vaadin.Flow.button.initDisableOnClick($0)");
+            getElement().getNode()
+                    .runWhenAttached(ui -> ui.beforeClientResponse(this,
+                            executionContext -> this.initDisableOnClick = null));
+        }
     }
 
     private void updateIconSlot() {
@@ -462,7 +469,8 @@ private void doDisableOnClick() {
 
     @Override
     protected void onAttach(AttachEvent attachEvent) {
-        initDisableOnClick();
+        if (isDisableOnClick()) {
+            initDisableOnClick();
+        }
     }
-
 }

vaadin-button-flow-parent/vaadin-button-flow/src/main/resources/META-INF/resources/frontend/buttonFunctions.js

@@ -0,0 +1,12 @@
+function disableOnClickListener({currentTarget: button}) {
+  button.disabled = button.hasAttribute('disableOnClick');
+}
+
+window.Vaadin.Flow.button = {
+  initDisableOnClick: (button) => {
+    if (!button.__hasDisableOnClickListener) {
+      button.addEventListener('click', disableOnClickListener);
+      button.__hasDisableOnClickListener = true;
+    }
+  }
+}

vaadin-button-flow-parent/vaadin-button-flow/src/test/java/com/vaadin/flow/component/button/tests/ButtonTest.java

@@ -17,18 +17,21 @@
 
 import java.io.Serializable;
 import java.util.HashMap;
+import java.util.Optional;
 import java.util.Set;
 import java.util.concurrent.atomic.AtomicBoolean;
 
 import com.vaadin.flow.component.HasAriaLabel;
 import org.junit.Assert;
 import org.junit.Test;
+import org.mockito.Mockito;
 
 import com.vaadin.flow.component.Text;
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.button.ButtonVariant;
 import com.vaadin.flow.component.icon.Icon;
 import com.vaadin.flow.component.icon.VaadinIcon;
+import com.vaadin.flow.component.internal.PendingJavaScriptInvocation;
 import com.vaadin.flow.component.shared.HasTooltip;
 import com.vaadin.flow.dom.Element;
 import com.vaadin.flow.internal.StateNode;
@@ -344,6 +347,28 @@ public void setAriaLabel() {
         Assert.assertEquals("Aria label", button.getAriaLabel().get());
     }
 
+    @Test
+    public void initDisableOnClick_onlyCalledOnceForSeverRoundtrip() {
+        final Element element = Mockito.mock(Element.class);
+        StateNode node = new StateNode();
+        button = Mockito.spy(Button.class);
+
+        Mockito.when(button.getElement()).thenReturn(element);
+
+        Mockito.when(element.executeJs(Mockito.anyString()))
+                .thenReturn(Mockito.mock(PendingJavaScriptInvocation.class));
+        Mockito.when(element.getComponent()).thenReturn(Optional.of(button));
+        Mockito.when(element.getParent()).thenReturn(null);
+        Mockito.when(element.getNode()).thenReturn(node);
+
+        button.setDisableOnClick(true);
+        button.setDisableOnClick(false);
+        button.setDisableOnClick(true);
+
+        Mockito.verify(element, Mockito.times(1))
+                .executeJs("window.Vaadin.Flow.button.initDisableOnClick($0)");
+    }
+
     private void assertButtonHasThemeAttribute(String theme) {
         Assert.assertTrue("Expected " + theme + " to be in the theme attribute",
                 button.getThemeNames().contains(theme));