Validate invalid value datetimepicker

Hi all, We are using the latest vaadin version. When I type an invalid value in datetimepicker (a string), the component do nothing after filling. How can I validate it and display a message after typing? In Vaadin8 for example, after typing an invalid value in the calendar, the component automatically displays a message. Thanks. Regards

Vaadin 24.4.3

At the moment it’s not possible. You might come around this with some trickery and custom formats but it’s no possible to fully protect users from their bad typing.

Prototype API for setting error messages through i18n and overloads [3 days] · Issue #6280 · vaadin/flow-components · GitHub Something is going to change in the next version regarding this.

Only giving the server-side the validated value is an annoying design choice that Vaadin has taken. Many issues could’ve been solved by us if we’d only gotten the access to the invalid value. (Maybe as a separate event, so that existing code would be unaffected)

This applies to any field where the client-side validates: Date fields, Time fields, Integer fields, ComboBox

ComboBox is a pet peeve of mine: Given a ComboBox with countries. Current value is Sweden. You incorrectly write “finnland”, and it gets reset to Sweden without any error.

I’m not a fan of it myself. You can use this ticket as reference to add your opinion: Server-side date parsing · Issue #2466 · vaadin/flow-components · GitHub

My workaround for the field you’ve mentioned are:

  • Combobox: you could use customValueAllowed and hack something together
  • DatePicker: I gave up
  • NumberFields: I don’t use them. Instead I’m using TextFields with Converter

@Guttorm I studied your use case while ago and rendered a solution.

That was interesting :smiley:

Currently I don’t use ComboBox; Not only because it doesn’t behave the way I think it should, but also because it seems so brittle. I think I’ve registered two bugs on it the last year, and I don’t even use it!

Speaking of brittle, does this code work if the value is #51, and the client currently only has the 1st 50, and need to fetch the next chunk from the server?

My replacement uses a plain TextField with an icon in the suffix that opens an anchored com.vaadin.componentfactory.Popup with a Grid. It works, but is only 80% done. The last 20% is, as is traditional, the hardest part. I might have to reconsider ComboBox, and then I’ll be sure to check this out.

Yeah. During the years I have learned that there is various ways ComboBox should work. It already has rather bloated set of behaviors (which on the other hand partly contribute edge case complications). And as you can find in the Directory there are multiple alternatives and modified versions (Autocomplte, Autosuggest, Light ComboBox, Autoselect ComboBox, Tree ComboBox …). Even these do not cater all the possible needs. It has been always a bit a debate, whether we should have one ComboBox in the framework that tries to cater everything, or should we have more than one component to scale to all possible requirements, which seem to be plenty, and occasionally also conflicting with each other.

Tree ComboBox is done with pretty similar approach, you could compare your implementation to it and find inspiration if needed

One of my remaining issues is to keep the dropdown open when the user clicks in input field, but still close if user clicks anywhere else. I assume this is an inherent limitation of Popup, and that your implementation behaves the same way?

Tried to add your class to my project so that I could test and verify, but after I added dependency to your Tree, Vaadin wanted to rebuild frontend and that failed :frowning:

Got this earlier when I attempted to upgrade to Vaadin 24.4.1, so assumed it was related to that and reverted, but now it seems to be unrelated:

mvn vaadin:prepare-frontend

[DEBUG] Can’t load class com.vaadin.componentfactory.Popup
java.lang.NoClassDefFoundError: com/vaadin/flow/component/shared/HasThemeVariant

Sigh. I’ll create an empty project and see if it works there

This is probably due conflict of Popup dependency versions. TreeComboBox depends on version 24.0.4, and since version 24.0.2 Popup has implemented HasThemeVariant. You may have dependency in your project to older version than 24.0.2, hence the error.

Btw. In Vaadin 24.5 there will be PopOver component, which will be very similar to Popup (it will just lack the onboarding features of Popup).