Datetimepicker - closed-event fired twice when using keyboard enter

[MarkCuypersPpw]

When using the timepicker with following options:

      <mtx-datetimepicker
        #timePicker
        [type]="'time'"
        [mode]="'portrait'"
        [startView]="'clock'"
        [twelvehour]="false"
        [timeInterval]="1"
        [touchUi]="false"
        [timeInput]="true"
        [disabled]="isDisabled"
        [startAt]="control?.value"
        (closed)="onDatePickerClosed()"></mtx-datetimepicker>

I noticed that the console log in my onDatePickerClosed function is logged twice. This only happens when I use the keyboard enter key. It doesn't matter if I press enter on the "cancel" button or the "OK" button.

After executing this scenario, the picker dialog stays open and I can't close it anymore. I'm locked in it and have to refresh the browser.

When I execute the same scenario but instead I use the spacebar to press the Cancel of OK button, it works as expected. Also when I click the buttons with the mouse there's no issue.

This behavior is new since I upgraded to Angular 19 (with Material 19 and Matero 19)

[nzbin]

I'm sorry, I can't reproduce, can you provide a video?

[MarkCuypersPpw]

A video illustrating the issue: https://github.com/user-attachments/assets/074cc0e6-7fb2-42f0-95ec-5c415d9f8d56
It is important to note that the first time I press enter there's a little flash of the picker. The second time I press enter on the cancel button, nothing happens. I'm locked in the dialog.
It might be also important to know that the screen you're seeing is some kind of full-screen-dialog.

[nzbin]

A video illustrating the issue: https://github.com/user-attachments/assets/074cc0e6-7fb2-42f0-95ec-5c415d9f8d56 It is important to note that the first time I press enter there's a little flash of the picker. The second time I press enter on the cancel button, nothing happens. I'm locked in the dialog. It might be also important to know that the screen you're seeing is some kind of full-screen-dialog.

I still can't reproduce, can you open the develop tool and provide a new video?

[MarkCuypersPpw]

Hi,

I actually found the issue in our own code. I'll explain.
We have this code:

private readonly overlayContainer = inject(OverlayContainer);

constructor() {
    this.renderer = this.rendererFactory.createRenderer(null, null);
}

and when opening the full-screen dialog this happens (before opening it):

const overlayContainerElement: HTMLElement = this.overlayContainer.getContainerElement();
this.renderer.setProperty(overlayContainerElement, '@.disabled', true);

After closing the full-screen dialog this happens:

const overlayContainerElement: HTMLElement = this.overlayContainer.getContainerElement();
this.renderer.setProperty(overlayContainerElement, '@.disabled', false);

This is code that was added in 2018 and I have no idea why it was added at that time. The dev left years ago. It seems to disable the overlay animations. When I don't disable the animations, everything seems to work fine. So it was definitely no bug in the matero datetime component.

I'm sorry for the confusion. Your help is appreciated!