Focus listener on DateTimePicker is not working

[hfazai]

Description

A focus listener defined on DateTimePicker is not triggered when focusing on date/time pickers.

Example

A very basic example in Kotlin:

add(DateTimePicker().also {
      it.addFocusListener {
        // Debugger doesn't reach this point when focusing on the datetime picker
      }
})

Environment

• Version of Vaadin : v21.0.2
• OS : Fedora 34

Browsers Affected

• Chrome

[web-padawan]

Thanks for the issue. It could be related to #1156 although the problem there is different.

[hfazai]

Thanks for pointing out to the issue. Here the problem is that the focus event is not called, I think that the listener should be defined on one of the internal components (DatePicker or TimePicker)

To fix this I have two ideas:

• Add two methods addFocusListenerOnDatePicker and addFocusListenerOnTimePicker. And this way we should also do the same for BlurListener
• A breaking change: DateTimePicker doesn't implement Focusable and give access to internal components. Adding to DateTimePicker class 2 methods with returning types (DatePicker and TimePicker) to give user the ability to defined focus on the internal fields themselves.

What do you think?

[web-padawan]

To me it sounds like enhancement issue. I'm not sure about the implementation, the team will need to discuss how to address this.

[alvarezguille]

For reference Focusable was added in vaadin/vaadin-date-time-picker-flow#5

[TatuLund]

Confirmed, foes not work in Vaadin 22. Also Blur event is broken.

[TatuLund]

The default implementation does not work, as there are two elements, which individually can have focus. So the most likely the the best way is to make them both delegate the focus / blur events. I ended up doing this approach in my ColorPicker component, which is similar as it has input and vaadin-combo-box elements wrapped in a bit similar fashion.

Thus I am internally in the web component listening to blur and focus events and passing them to server, so that the default implementation still works. https://github.com/TatuLund/ColorPicker/blob/master/src/main/resources/META-INF/resources/frontend/color-picker.ts

[cyckim]

If anyone is looking for workaround:

private static class FocusableDateTimePicker extends DateTimePicker {
   @Override
   public Registration addFocusListener(ComponentEventListener<FocusEvent<DateTimePicker>> listener) {
     List<Registration> registrations = getChildren()
           .filter(element -> element instanceof DatePicker || element instanceof TimePicker)
           .map(field -> {
              if (field instanceof DatePicker datePicker) {
                 return datePicker.addFocusListener(ev -> listener.onComponentEvent(null));
              }
              TimePicker timePicker = (TimePicker) field;
              return timePicker.addFocusListener(ev -> listener.onComponentEvent(null));

           })
           .toList();

     return Registration.combine(registrations.toArray(Registration[]::new));
   }
}