Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Value change listener with ValueChangeMode.TIMEOUT not working #18970

Open
scrmtrey91 opened this issue Feb 20, 2024 · 2 comments
Open

Value change listener with ValueChangeMode.TIMEOUT not working #18970

scrmtrey91 opened this issue Feb 20, 2024 · 2 comments
Labels
bug Impact: Low Severity: Minor workaround

Comments

@scrmtrey91
Copy link

Description

We are using ValueChangeMode.TIMEOUT on fields (text field etc) with 3500 timeout.

However it is not working as it should.

Sometimes it calls listener on the first character and also when using backspace to delete in it. Then magically working for every other characters until it does not.

We upgraded from vaadin 8 and not this is not working properly. (like many other things reported already)

Expected outcome

When value change it should wait timeout amount before calling value change listener.

Not before timeout and not after timeout, but aprox on timeout (+/- 100ms).

Also should be consistent.

Minimal reproducible example

TextField textField = new TextField();
                    textField.setValueChangeTimeout(3500);
                    textField.setValueChangeMode(ValueChangeMode.TIMEOUT);

                    textField.addValueChangeListener(event -> {
                        if (event.isFromClient()) {
                            Notification.show("blabla");
                        }
                    });

Steps to reproduce

  1. Add textfield above to view
  2. Click into textfield and type characrted
  3. Value change istener run immediately not after TIMEOUT

Environment

Vaadin version(s): latest 23 or latest 24
Browser: Edge, Chrome..it does not matter

Browsers

Issue is not browser related
@web-padawan
Copy link
Member

web-padawan commented Mar 5, 2024 •
edited
Loading

The issue is not specific to TextField but can be also reproduced with Input from Flow html components:

public class ValueChangeModeTimeoutPage extends Div {

    public ValueChangeModeTimeoutPage() {
        Div log = new Div();

        Input input = new Input();
        input.setValueChangeTimeout(3500);
        input.setValueChangeMode(ValueChangeMode.TIMEOUT);

        input.addValueChangeListener(event -> {
            if (event.isFromClient()) {
               log.add(new Div(event.getValue()));
            }
        });

        add(input, log);
    }
}

To me it seems like a result of using registration.throttle() for ValueChangeMode.TIMEOUT - see this logic.
Based on #4945 where this mode was added, I think the current behavior is kind of as expected:

Syncs the value at defined intervals as long as the value changes from one event to the next.

As a workaround, consider using ValueChangeMode.LAZY which uses debounce() instead of throttle().

@sissbruecker
Copy link
Contributor

Moving this over to the Flow repo as it doesn't seem to be a component-specific issue.

@sissbruecker sissbruecker transferred this issue from vaadin/flow-components Mar 14, 2024
@mcollovati mcollovati moved this from 🆕 Needs triage to 🔖 Normal Priority (P2) in Vaadin Flow bugs & maintenance (Vaadin 10+) Jun 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Impact: Low Severity: Minor workaround
Projects
Vaadin Flow bugs & maintenance (Vaadin 10+)
Status: 🔖 Normal Priority (P2)
Milestone
No milestone
Development

No branches or pull requests
5 participants
@sissbruecker @mcollovati @web-padawan @scrmtrey91 @yuriy-fix