Prevent double click

Vaadin 6 / 7 / 8
1

How can I prevent my user to double click in one button?

Sometimes my user dont pay atencion on top bar (loading) and press the save button 2 times, and the method are executed 2 times, so how can I prevent this?

tks

2

Does Button.setDisableOnClick(true) works for you?

3

Don`t work as expected, somethins he dont enable the button back :confused:

4

It should never enable back automatically, that is something you need to do yourself from the code. It is an inconvenience, but at least you don’t get double clicks :slight_smile:

5

The button needs to be enabled back programatically. Quoting the setDisableOnClick() javadoc: “Also, if developer * wants to re-enable the button, it needs to be done programmatically.”

Just please make sure that you call setEnabled(true) in your button’s onclick handler.

6

agh, there is workaround

	/**
	 * Disables button after 1st click, then enables it after certain time => 2nd click is performed over disabled button
	 * => double-click is disabled
	 * @param btnSubmit
	 */
	private static void preventDoubleClick(Button btnSubmit) {
		UI ui = UI.getCurrent();
		btnSubmit.setDisableOnClick(true);
		btnSubmit.addClickListener(event -> setTimeoutAsync(() -> {
			ui.access(() -> btnSubmit.setEnabled(true));
		}, 300));
	}

	public static void setTimeoutAsync(Runnable runnable, int delay) {
		new Thread(() -> {
			try {
				Thread.sleep(delay);
				runnable.run();
			}
			catch (Exception e){
				log.error(e.getMessage(), e);
			}
		}).start();
	}
7

more correct fix (just instantly adds constructors ;))

public CustomButton extends Button {
	private ComponentEventListener<ClickEvent<Button>> doubleClickListener;
	private ComponentEventListener<ClickEvent<Button>> moreClickListener;

	@Override
	public Registration addClickListener(ComponentEventListener<ClickEvent<Button>> listener) {
		return super.addClickListener(event -> {
			if(event.getClickCount() == 1) {
				listener.onComponentEvent(event);
			} else if (event.getClickCount() == 2 && doubleClickListener != null) {
				doubleClickListener.onComponentEvent(event);
			} else if (event.getClickCount() > 2 && moreClickListener != null) {
				moreClickListener.onComponentEvent(event);
			}
		});
	}

	public GimsButton doubleClickListener(ComponentEventListener<ClickEvent<Button>> listener) {
		this.doubleClickListener = listener;
		return this;
	}

	public GimsButton moreClickListener(ComponentEventListener<ClickEvent<Button>> listener) {
		this.moreClickListener = listener;
		return this;
	}
}