fix: commit focused date on outside click (#5670) (#5676)

* fix: apply input value on outside click

* fix: select focused date on outside click except input element click

* fix: use default selection behaviour

* fix: reset userConfirmedDate if a date is deselected

* test: add deselect test

* test: move test to dropdown tests

* test: convert arrowdown to arrowright and change test date

Co-authored-by: Ugur Saglam <106508695+ugur-vaadin@users.noreply.github.com>

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

@@ -534,9 +534,10 @@ export const DatePickerMixin = (subclass) =>
         this._close();
       });
 
-      // User confirmed selected date by pressing Enter or Today.
+      // User confirmed selected date by pressing Enter, Space, or Today.
       content.addEventListener('date-selected', (e) => {
-        this.__userConfirmedDate = true;
+        // Reset if a date is deselected.
+        this.__userConfirmedDate = !!e.detail.date;
 
         this._selectDate(e.detail.date);
       });

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

@@ -201,6 +201,32 @@ describe('dropdown', () => {
       await aTimeout(0);
       expect(datePicker.hasAttribute('focus-ring')).to.be.false;
     });
+
+    it('should commit focused date on outside click', async () => {
+      datePicker.value = '2001-01-01';
+      await open(datePicker);
+      // Move focus to the calendar
+      await sendKeys({ press: 'Tab' });
+      // Navigate to another date
+      await sendKeys({ press: 'ArrowRight' });
+      outsideClick();
+      await aTimeout(0);
+      expect(datePicker.value).to.equal('2001-01-02');
+    });
+
+    it('should commit focused date on outside click after deselecting', async () => {
+      datePicker.value = '2001-01-01';
+      await open(datePicker);
+      // Move focus to the calendar
+      await sendKeys({ press: 'Tab' });
+      // De-select the selected date
+      await sendKeys({ press: 'Space' });
+      // Navigate to another date
+      await sendKeys({ press: 'ArrowRight' });
+      outsideClick();
+      await aTimeout(0);
+      expect(datePicker.value).to.equal('2001-01-02');
+    });
   });
 
   describe('date tap', () => {