Cancel button pressed but validation runs

There have been a while since I last coded much Vaadin so please bear with me.

I have a simple form with a few textfields. The binder is implemented with several validators and asRequired(). I have Save and Cancel buttons. The form shows new bean and existing bean just fine and I can save the form. The problem I have is this. If I create a new form (empty bean) and just cancel, it triggers the validator before the cancel button event is available. I have tried both binder.setBean and binder.readBean + binder.writeBean but the same happens. If i press cancel a second time the cancel button event is triggered. If the form shows existing data I can cancel without problem but that is just because everything validates. If I change a value and cancel the validation error kicks in.

What can I do to prevent validation the moment i press cancel (or rather leave the first textfield which had focus from the beginning)?

I recon maybe change ValueChangeMode to something different than default, or change ValueChangeTimeout might be the answer. Tips will be appreciated.

After having done some experimentation with ValueChangeMode back and forth it seems I can see that cancel sometimes closes the form as intended and sometimes it’s stuck on the validation error. Hmmm…

Ok I see what is happening. If I press and release quickly the form closes correctly every time. If I press and hold the form have time to write the validation error which expands the size of the form resulting in cancel button moving downwards and bellow my mouse coursor. This results in a non-closing form every time. However if I move the already pressed mouse coursor on top of the cancel button and then release the mouse button the form closes as intended.

Is this a bug? I can change the event on the button to “when pressed” rather than “press and release” but that would be a hack in my opinion. Can’t possibly be only me experiencing this. The button should probably behave as pressed and released it in the first position and ignore that it was being moved by Vaadin. When user moves mouse inbetween press and release should behave as normal. The difference here is that I am not moving the mouse in the first place, the button is what is moved.

Is your form in a dialog?

I remember a issue where the combination of dialog, validation errors showing and button is moved because of it while clicking… some weird things happen, but I couldn’t find the issue I had in mind…

Edit: Issue found? Dialog height change causes button click to not register · Issue #5267 · vaadin/flow-components · GitHub

Another question: can you show us what your cancel button does?

Thanks Knoobie. It’s not a dialog. However the issue you linked is exactly what I experience. I am not able to show the current code since the relevant environment is unavailable for sharing. I would have to recreate the issue if needed, but I do not think that’s necessary since issue 5267 describes exactly my problem.

I am trying to recreate the problem. So far my original application validates on_change, but seems to act as on_blur. The experimental application does not validate “on_blur” so there is a difference. I am trying to align the same version for both applications but need more investigation because so far there is now difference in behavior. I can upgrade Vaadin on our coporate internal net right now. Someone have put up a server doing vulnerability checks for all artifacts and vaadin-maven-plugin (and probably others) do not go through and the guy how configured this beauty is away for a two week leave (yey lucky me).

I found some more related issues.

Okay I think I found out that somewhere between Vaadin 24.2.5 and 24.3.9 there is a change related to validation of empty (non dirty) fields. While validation is triggered when focus is lost for 24.2.5 this is no longer the case for 24.3.9. Latest version supports lost focus without validation when field is empty. I will try to verify this once more tomorrow and on our main application when I am able to update to latest version.

Seems this might be the fix

Hi John,

In Vaadin 24.0, we introduced a validated event, which caused fields to start validating on blur even when the value hasn’t changed. The issue that you have described seems to stem from this change, as the blur event on the input occurs before the click event on the button.

In Vaadin 24.3, we reconsidered this behavior, and now fields only validate on change events without undesired validation on blur when there is no value change. The issues that you have mentioned are exactly related to this recent improvement. Therefore, I recommend upgrading to Vaadin 24.3.

1 Like

Thanks for the information. I will upgrade as soon as our new hardcore policy internal vulnerability server accepts Vaadin artifacts from our internal repository.

I have upgraded but validation is still triggered when focus is lost.

I have two different applications. Internal application is our corporate build (closed LAN), while Verification application is something I made yesterday which also has access to Internet.

I was able to update the internal application today. I have upgraded to JDK 21, Spring Boot 3.2.4, and Vaadin 24.3.9, same as the verification application. I deleted node_modules directory and did a mvn clean package build just to be sure everything was cleaned. I even deleted all vaadin artifacts in .m2 to be sure.

This is my findings.

Internal Application Verification Application
v24.2.5: Validates v24.2.5: Validates
v24.3.9: Validates v24.3.9: Do not validate

For some reason I cannot get our internal application to not validate when focus is lost. Which is the expected behavior for v24.3.9. I am using Vaadins default Binder and TextField. The two forms in each application is implemented the same and are doing exactly the same. Both forms has the default ValueChangeMode.ON_CHANGE for the textfield involved.

I have tried binder.readBean(myBean) and binder.setBean(myBean) but there is no difference in either application.

I’m thinking our internal application might not have been properly cleaned but what more can I do now? What is going on? What am I missing?

It’s of course difficult to determine the cause without seeing the project configuration :slight_smile: However, I recommend checking the version of Vaadin artifacts in the .m2 directory after installation. If it’s still downloading the old version, there is likely a problem with the project configuration.

Thanks. Yes this is what I thought of on my way home from work. While The application runs and seems to be the right version I suspect not all artifacts made it, and that the project maybe is using an older dependency or something like that. What about NPM dependencies. Could something there be related to the validation still occurring?

I can create a clean project on our corporate LAN also just to compare, or even import the reference project I created that I know works. Then it would be easy to compare.

Thanks so far.

1 Like

Back at work. Yep, there was defiantly missing artifacts from inside Intellij. Had to refresh maven dependencies inside the IDEA. Not enough to just build on command line and expect dependencies to appear.

However now I am missing NPM dependencies I am told when trying to start. There is no node_modules directory anymore so I have to figure out where to look first, then figure out what is missing and why.

There is nothing wrong with the configuration but with transfer/sync over to our internal Maven and NPM repositories. Now I am on track at least. Thanks for your inputs.

1 Like

I was able to run Vaadin 24.3.3 internally as we are missing some NPM’s to go any higher. I need to address these dependencies next. Anyways, now validation is no longer triggered when leaving the field as expected as of 23.3 :-)

1 Like