fix: close date-picker overlay correctly on backdrop click (#9905)

Author: web-padawan

packages/date-picker/src/vaadin-date-picker-mixin.js

@@ -1033,7 +1033,7 @@ export const DatePickerMixin = (subclass) =>
      */
     _onClick(event) {
       // Ignore click events bubbling from the overlay
-      if (event.composedPath().includes(this._overlayContent)) {
+      if (event.composedPath().includes(this._overlayElement)) {
         return;
       }
 

packages/date-picker/src/vaadin-date-picker.js

@@ -271,7 +271,8 @@ class DatePicker extends DatePickerMixin(
   /** @private */
   _onVaadinOverlayClose(e) {
     // Prevent closing the overlay on label element click
-    if (e.detail.sourceEvent && e.detail.sourceEvent.composedPath().includes(this)) {
+    const event = e.detail.sourceEvent;
+    if (event && event.composedPath().includes(this) && !event.composedPath().includes(this._overlayElement)) {
       e.preventDefault();
     }
   }

packages/date-picker/test/dropdown.test.js

@@ -46,6 +46,16 @@ describe('dropdown', () => {
     expect(overlay.opened).to.be.false;
   });
 
+  it('should close overlay on backdrop element click', async () => {
+    await open(datePicker);
+
+    datePicker.setAttribute('fullscreen', '');
+    overlay.shadowRoot.querySelector('[part="backdrop"]').click();
+
+    expect(datePicker.opened).to.be.false;
+    expect(overlay.opened).to.be.false;
+  });
+
   describe('toggle button', () => {
     let toggleButton;