Added a patch for datepicker change events

infor-design · Jun 25, 2020 · 4b68c81 · 4b68c81
1 parent 9f5ce31
commit 4b68c81
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 13 deletions.
diff --git a/app/views/components/datepicker/test-change-event.html b/app/views/components/datepicker/test-change-event.html
@@ -2,21 +2,33 @@
   <div class="four columns">
     <div class="field">
       <label for="date-field-1" class="label">Date Field 1</label>
-      <input id="date-field-1" class="datepicker" name="date-field" type="text"/>
+      <input id="date-field-1" class="datepicker" name="date-field-1" type="text"/>
     </div>
 
     <div class="field">
       <label for="date-field-2" class="label">Date Field 2</label>
-      <input id="date-field-2" class="datepicker" name="date-field" type="text" value="3/3/2020"/>
+      <input id="date-field-2" class="datepicker" name="date-field-2" type="text" value="3/3/2020"/>
     </div>
+
+    <div class="field">
+      <label for="date-field-3" class="label">Date-Time Picker</label>
+      <input id="date-field-3" data-init="false" class="datepicker datetime" name="date-field-3" type="text" />
+    </div>
+
   </div>
 </div>
 
-
 <script>
-  $('#date-field-1, #date-field-2').on('change', function () {
+  $('body').on('initialized', function () {
+    $('#date-field-3').datepicker({
+      showTime: true
+    });
+  });
+
+  $('#date-field-1, #date-field-2, #date-field-3').on('change', function () {
       $('body').toast({
       title: 'Change Event Fired',
+      timeout: 20000,
       message: 'Value is now: '+ $(this).val() +''
     });
   });

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -1,5 +1,11 @@
 # What's New with Enterprise
 
+## v4.27.6
+
+### v4.27.6 Fixes
+
+- `[Datepicker]` Fixed an issue where change events did not fire consistently. ([#4087](https://github.com/infor-design/enterprise/issues/4087))
+
 ## v4.27.5
 
 ### v4.27.5 Fixes

diff --git a/src/components/datepicker/datepicker.js b/src/components/datepicker/datepicker.js
@@ -527,7 +527,6 @@ DatePicker.prototype = {
     const self = this;
     const s = this.settings;
     const timeOptions = {};
-    this.lastValue = typeof this.currentDate === 'string' ? this.currentDate : this.currentDate?.getTime();
 
     if ((this.element.is(':disabled') || this.element.attr('readonly')) && this.element.closest('.monthview').length === 0) {
       return;
@@ -1217,11 +1216,7 @@ DatePicker.prototype = {
       }));
     }
 
-    const newValue = typeof this.currentDate === 'string' ? this.currentDate : this.currentDate?.getTime();
-    const isChanged = this.lastValue !== newValue;
-    this.lastValue = newValue;
-
-    if (trigger && isChanged) {
+    if (trigger) {
       if (s.range.useRange) {
         if (!isTime) {
           this.element
@@ -1603,6 +1598,10 @@ DatePicker.prototype = {
       }
       if (parsedDate !== undefined && self.element.val().trim() !== '' && !s.range.useRange) {
         self.setValue(parsedDate);
+
+        if (fieldValueTrimmed !== self.element.val().trim()) {
+          this.element.trigger('change').trigger('input');
+        }
       }
     }
 
@@ -1872,8 +1871,6 @@ DatePicker.prototype = {
 
     // Fix two digit year for main input element
     self.element.on('blur.datepicker', () => {
-      this.lastValue = this.currentDate?.getTime;
-
       if (this.element.val().trim() !== '') {
         this.setValueFromField();
       }

diff --git a/test/components/datepicker/datepicker.e2e-spec.js b/test/components/datepicker/datepicker.e2e-spec.js
@@ -505,7 +505,7 @@ describe('Datepicker Legend Tests', () => {
   }
 });
 
-describe('Datepicker Change Event Tests', () => {
+fdescribe('Datepicker Change Event Tests', () => {
   beforeEach(async () => {
     await utils.setPage('/components/datepicker/test-change-event?layout=nofrills');
   });
@@ -538,6 +538,15 @@ describe('Datepicker Change Event Tests', () => {
     expect(await element.all(by.css('#toast-container')).count()).toEqual(1);
   });
 
+  it('Should trigger 1 change on clear and then change value', async () => {
+    await element(by.css('#date-field-2')).sendKeys('5/2/2020');
+    await element(by.css('#date-field-2')).clear();
+    await element(by.css('#date-field-1 + .icon')).click();
+    await element(by.css('.hyperlink.today')).click();
+
+    expect(await element.all(by.css('#toast-container')).count()).toEqual(1);
+  });
+
   it('Should not trigger change two changes on select and tab', async () => {
     await element(by.css('#date-field-1 + .icon')).click();
     await element(by.css('.hyperlink.today')).click();