FORMS-21023: Close Date-Picker on touch-event in mobile/tablet devices (#1662)

* FORMS-21023: close datepicker on touch event in mobile/tablet devices
* Added event listener for touch event outside the calendar widget

* FORMS-21023: cypress tests for datepicker in mobile/tablet layout

Author: anshikag-adobe

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerwidget.js

@@ -27,6 +27,7 @@ if (typeof window.DatePickerWidget === 'undefined') {
     #dp = null;
     #curInstance = null;
     #calendarIcon = null;
+    #documentTouchListener = null;
     static #visible = false;
     static #clickedWindow;
 
@@ -550,6 +551,17 @@ if (typeof window.DatePickerWidget === 'undefined') {
         this.#focusedOnLi = false;
         DatePickerWidget.#visible = true;
         this.#position();
+        
+        // Add document touch listener for mobile to close datepicker when tapping outside
+        if (this.#touchSupported && !this.#documentTouchListener) {
+          this.#documentTouchListener = (evt) => {
+            if (DatePickerWidget.#visible && this.#curInstance) {
+              this.#checkWindowClicked(evt);
+            }
+          };
+          document.addEventListener("touchstart", this.#documentTouchListener, false);
+        }
+        
         if (this.#options.showCalendarIcon) {
           this.#curInstance.$field.setAttribute('readonly', true);    // when the datepicker is active, deactivate the field
         }
@@ -924,6 +936,11 @@ if (typeof window.DatePickerWidget === 'undefined') {
           document.removeEventListener("keydown", self.#hotKeysCallBack);
           this.#keysEnabled = false;
         }
+        // Remove document touch listener if it exists
+        if (this.#documentTouchListener) {
+          document.removeEventListener("touchstart", this.#documentTouchListener);
+          this.#documentTouchListener = null;
+        }
         // Issue LC-7049:
         // datepickerTarget should be added when activate the field and should be removed
         // after the fields gets deactivated. Otherwise clicking on any other datefield

ui.tests/test-module/specs/datepicker/datepicker.runtime.cy.js

@@ -383,4 +383,72 @@ describe("Form Runtime with Date Picker", () => {
             cy.get('.datetimepicker').should('be.visible');
         });
     })
+
+    // Mobile Touch Functionality Tests
+    describe("Mobile Touch Functionality", () => {
+        beforeEach(() => {
+            // Set mobile viewport for touch testing
+            cy.viewport('iphone-x')
+        });
+
+        it("should open datepicker on mobile touch", () => {
+            const [datePicker4, datePicker4FieldView] = Object.entries(formContainer._fields)[4]
+            
+            // Touch the datepicker field
+            cy.get(`#${datePicker4}`).find(".cmp-adaptiveform-datepicker__calendar-icon").click().then(() => {
+                cy.get('.datetimepicker').should('be.visible')
+                cy.get('.dp-monthview').should('be.visible')
+            })
+        });
+
+        it("should close datepicker when tapping outside on mobile", () => {
+            const [datePicker4, datePicker4FieldView] = Object.entries(formContainer._fields)[4]
+            
+            // Open the datepicker
+            cy.get(`#${datePicker4}`).find(".cmp-adaptiveform-datepicker__calendar-icon").click().then(() => {
+                cy.get('.datetimepicker').should('be.visible')
+            })
+            
+            // Tap outside the datepicker (on the body)
+            cy.get('body').click(0, 0).then(() => {
+                cy.get('.datetimepicker').should('not.be.visible')
+            })
+        });
+
+        it("should not close datepicker when tapping inside the calendar", () => {
+            const [datePicker4, datePicker4FieldView] = Object.entries(formContainer._fields)[4]
+            
+            // Open the datepicker
+            cy.get(`#${datePicker4}`).find(".cmp-adaptiveform-datepicker__calendar-icon").click().then(() => {
+                cy.get('.datetimepicker').should('be.visible')
+            })
+            
+            // Tap inside the calendar (on a day)
+            cy.get('.dp-monthview li').not('.header').first().click({force: true}).then(() => {
+                cy.get('.datetimepicker').should('be.visible')
+            })
+        });
+
+        it("should work correctly with multiple datepicker fields on the same page", () => {
+            // Test with multiple datepicker fields
+            const [datePicker4, datePicker4FieldView] = Object.entries(formContainer._fields)[4]
+            const [datePicker6, datePicker6FieldView] = Object.entries(formContainer._fields)[6]
+            const datepickerIds = [datePicker4, datePicker6]
+            
+            datepickerIds.forEach((id, index) => {
+                // Open datepicker
+                cy.get(`#${id}`).find(".cmp-adaptiveform-datepicker__calendar-icon").click().then(() => {
+                    cy.get('.datetimepicker').should('be.visible')
+                })
+                
+                // Tap outside to close
+                cy.get('body').click(0, 0).then(() => {
+                    cy.get('.datetimepicker').should('not.be.visible')
+                })
+                
+                // Small delay between tests
+                cy.wait(100)
+            })
+        });
+    });
 })