Skip to content

DatePicker not sending null value to binder after deleting invalid value #8209

@vikkkgut

Description

@vikkkgut

Description

  • Start with a DatePicker with a valid non-null value
  • Write some junk and tab out -> Field becomes invalid and gets value null. Binder value is not changed.
  • Clear the junk and tab out -> Field becomes valid, but binder value is not set to null

I also notice that when I first made the field invalid, I did not get a ValidationStatusChangeEvent

Expected outcome

As long as the field is invalid, it should retain its previous value, both in Field and Binder.
When the field is no longer invalid, it should send a valueChange to field and Binder, if new valid value is different from old valid value.

I suspect the root issue is that the field value is set to null when I enter some junk?
That means that when I clear the field, it is "unchanged", and no valueChanged is sent?

Null is the main issue, but this also mean I get an unwanted valueChanged if I 1st append an "x" to the date, and then remove it again.
Since the field value was first set to null, it now sends a valueChanged.

Minimal reproducible example

package com.ec.traveller;

import java.time.LocalDate;

import com.vaadin.flow.component.datepicker.DatePicker;
import com.vaadin.flow.component.html.ListItem;
import com.vaadin.flow.component.html.UnorderedList;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.data.binder.Binder;
import com.vaadin.flow.router.Route;

@Route("/testDatepicker")
public class TestDatepicker extends VerticalLayout {

    UnorderedList log = new UnorderedList();
    
    private LocalDate date;
    
    public LocalDate getDate() {
        return date;
    }

    public void setDate(LocalDate date) {
        this.date = date;
        log.add(new ListItem("binder date : " + date));
    }
    
    public TestDatepicker() {

        setSizeFull();
        
        var datePicker = new DatePicker("DatePicker");
        datePicker.setAutoOpen(false);
        add(datePicker, log);
        
        var binder = new Binder<TestDatepicker>();
        binder.forField(datePicker).bind(TestDatepicker::getDate, TestDatepicker::setDate);
    
        binder.setBean(this);
        
        datePicker.addValueChangeListener(event -> {
            log.add(new ListItem("date : " + event.getValue()));
        });

        datePicker.addValidationStatusChangeListener(event -> {
            log.add(new ListItem("validation : " + event.getNewStatus()));
        });

    }

}

Steps to reproduce

  1. Pick a date -> Both field and binder gets valueChanged
  2. write "fsdfsdf" and tab out -> Field gets valueChanged to null. Missing ValidationChanged event!
  3. write "" and tab out -> Neither field nor binder gets ValueChanged. Field gets ValidationChanged true event.

Environment

Vaadin version(s): 24.8.4
OS: Windows 11
Browser: Firefox 144.0.2

Browsers

No response

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions