Merge pull request #2342 from infor-design/2207-datepicker-input-value

2207 - IdsDatePicker input value sync
infor-design · May 21, 2024 · 05ce8b2 · 05ce8b2
2 parents c59b3c3 + aed95e6
commit 05ce8b2
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 1 deletion.
diff --git a/doc/CHANGELOG.md b/doc/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### 1.2.0 Fixes
 
+- `[DatePicker]` Fix datepicker value syncing with manual input changes. ([#2207](https://github.com/infor-design/enterprise-wc/issues/2207))
 - `[Dropdown]` Added additional fixes so that typeahead works in the angular examples. ([#2249](https://github.com/infor-design/enterprise-wc/issues/2249))
 - `[Pager]` Fix `ids-pager-button` so that it can be enabled if `page-total` is unknown or not provided. ([#1506](https://github.com/infor-design/enterprise-wc/issues/1506))
 - `[PopupMenu]` Fix popupmenu truncation bug for menu items with shortcuts. ([#2250](https://github.com/infor-design/enterprise-wc/issues/2250))

diff --git a/src/components/ids-date-picker/ids-date-picker.ts b/src/components/ids-date-picker/ids-date-picker.ts
@@ -370,6 +370,14 @@ class IdsDatePicker extends Base {
       this.#togglePopup(false);
     });
 
+    // Input value change
+    this.offEvent('change.date-picker-input');
+    this.onEvent('change.date-picker-input', this.triggerField, (e) => {
+      if (!this.useRange && isValidDate(this.getDateValue(e.detail.value))) {
+        this.setAttribute(attributes.VALUE, e.detail.value);
+      }
+    });
+
     return this;
   }
 
@@ -722,6 +730,7 @@ class IdsDatePicker extends Base {
 
     if (!this.disabled && !this.readonly) {
       this.setAttribute(attributes.VALUE, String(val));
+      this.picker?.setAttribute(attributes.VALUE, String(val));
       this.triggerField?.setAttribute(attributes.VALUE, val);
     }
   }

diff --git a/tests/ids-date-picker/ids-date-picker.spec.ts b/tests/ids-date-picker/ids-date-picker.spec.ts
@@ -586,6 +586,15 @@ test.describe('IdsDatePicker tests', () => {
       expect(datePickerValue.dayUnset).toEqual((new Date()).getDate());
     });
 
+    test('setting input value should reflect in datepicker value', async ({ page }) => {
+      const datePickerHandle = page.locator('ids-date-picker').first();
+      const datePikcerValue = await datePickerHandle.evaluate((datePicker: IdsDatePicker) => {
+        datePicker.triggerField.value = '4/21/1990';
+        return datePicker.value;
+      });
+      expect(datePikcerValue).toEqual('4/21/1990');
+    });
+
     test('should set focus', async ({ page }) => {
       const hasFocus = await page.evaluate(() => {
         const component = document.querySelector<IdsDatePicker>('ids-date-picker')!;

diff --git a/tests/ids-date-picker/snapshots/date-picker-shadow.snap b/tests/ids-date-picker/snapshots/date-picker-shadow.snap
@@ -7,6 +7,6 @@
             <ids-icon part="icon" icon="schedule"></ids-icon>
           </ids-trigger-button>
         </ids-trigger-field>
-        <ids-date-picker-popup id="popup-datepicker-value" show-today="true" show-week-numbers="false" first-day-of-week="0" year="2016" month="2" day="4" trigger-type="click" target="#datepicker-value" trigger-elem="#triggerBtn-datepicker-value" format="M/d/yyyy" value="3/4/2016"></ids-date-picker-popup>
+        <ids-date-picker-popup id="popup-datepicker-value" show-today="true" show-week-numbers="false" first-day-of-week="0" year="2016" month="2" day="4" value="3/4/2016" trigger-type="click" target="#datepicker-value" trigger-elem="#triggerBtn-datepicker-value" format="M/d/yyyy"></ids-date-picker-popup>
       </div>