Button - setDisableOnClick - how to enabled after BE method execution

Flow
1

Hi,
I set setDisableOnClick option on button and first expect that button will be enable after BE method execution. This is not happening. How can I enabled it manually? I would like to do double click prevention.

@Route("")
@PWA(name = "Project Base for Vaadin Flow", shortName = "Project Base")
public class MainView extends VerticalLayout {

   public MainView() {
       Button button = new Button("Click me",
               event -> {
       			mySlowMethod();
       			event.getSource().setEnabled(true); // NOT WORKING
   			});
       button.setDisableOnClick(true);
       add(button);
   }

   public void mySlowMethod() {
   	try {
   		Thread.sleep(2000);
   	} catch (InterruptedException e) {
   		e.printStackTrace();
   	}
   }
}
2

I posted a similar question two weeks back, no solution. So registering on this thread to see if an idea comes by here :slight_smile:

3

EDIT:

With Polymer I would do it like this.
Polymer template:

</template>
	<vaadin-button id="button" on-click="click">Click me</vaadin-button>
</template>

<script>
	class ClassName extends Polymer.Element {
		static get is() {
			return 'class-name';
		}
		click() {
			this.disable();
			this.$server.clickMethod();
		}
		disable() {
			Polymer.dom(this.root).querySelector("#button").disabled = true;
		}
		enable() {
			Polymer.dom(this.root).querySelector("#button").disabled = false;
		}
	}
</script>

In the Java class from the template:

@ClientCallable
private void clickMethod() {
	doSomeThing();
	getElement().callFunction("enable");
}
4

I try the following solution with Java, but button stay disable.

public class MainView extends VerticalLayout {
	private final Button button;

	public MainView() {
		button = new Button("Click me",
				event -> {
					event.getSource().setEnabled(false);
					new Thread() {
						@Override
						public void run() {
							mySlowMethod();
						}
					}.start();
					System.out.println("<< Button event");
				});
        add(button);
    }

    public void mySlowMethod() {
    	int id = (int) (Math.random() * 10000);
    	System.out.println(">> mySlowMethod : " + id);
		try {
			Thread.sleep(5000);
		} catch (InterruptedException e) {
			e.printStackTrace();
		}
		System.out.println("<< mySlowMethod : " + id);
		getUI().get().access(() -> button.setEnabled(true));
	}
}
5

If this:

       Button button = new Button("Click me",
               event -> {
       			mySlowMethod();
       			event.getSource().setEnabled(true);
				});
       button.setDisableOnClick(true);

doesn’t work, I would say it looks like a bug.

6

I have tried many alternatives trying to get the button to re-enable, but it does not work. I’m betting on it being a bug as well.

7

You can report issues for the Flow Button here: https://github.com/vaadin/vaadin-button-flow/issues

8

Hi =)
tell me if I’m wrong, but your idea is to click on a Button and disable it only for a certain period of time?

9

For me (https://vaadin.com/forum/thread/17481667/re-enable-a-disableonclick-button) I want to prevent double clicking, but of course need to re-enable the button when preconditions fail.

10

Maybe this issue already addresses this. https://github.com/vaadin/vaadin-button-flow/issues/98

11

Having a debounce to prevent double clicks registering twice solves one problem. If you want to control the enabled status on the server based on some conditional logic, that’s another one (e.g. re-enable the “add to cart” button only if there are more items available in stock).

12

I have not investigated what debounce exactly means, but the problem being solved is the same: prevent double clicking. Only I attempt a discrete approach: disable immediately, until the server decides it can be enabled again. Either because the process has finished (or maybe it will not enable the button again, because it is not reentrant), some precondition failed, or else you will be redirected to another page.

13

As instructed in the other thread, I’ve created an issue which probably solves this issue as well. https://github.com/vaadin/vaadin-button-flow/issues/115

14

@Tom, thank you for opening github issue - https://github.com/vaadin/vaadin-button-flow/issues/115

15

Look like fix was done (https://github.com/vaadin/vaadin-button-flow/issues/115) and we should want for next version (current is 13.0.1)