fix: fixed DatePicker selected value is not reset after close panel #…

…2387 (#2388) Co-authored-by: shijia.me <[email protected]>
DouyinFE · Aug 5, 2024 · 5b1ffe7 · 5b1ffe7
1 parent 25d6d76
commit 5b1ffe7
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 2 deletions.
diff --git a/cypress/e2e/datePicker.spec.js b/cypress/e2e/datePicker.spec.js
@@ -858,4 +858,23 @@ describe('DatePicker', () => {
         cy.get('.semi-input').eq(0).should('have.value', '2024-01-24');
         cy.get('.semi-input').eq(1).should('have.value', '2024-02-26');
     });
+
+    it('fixed selected is not update when close panel', () => {
+        cy.visit('http://localhost:6006/iframe.html?id=datepicker--fixed-controlled&viewMode=story');
+        cy.get('.semi-input').eq(1).click();
+        cy.get('.semi-datepicker-day').contains('15')
+            .then($day => {
+                $day.trigger('click');
+            });
+        cy.get('.semi-popover .semi-datepicker-day-selected-start').contains('8');
+        cy.get('.semi-popover .semi-datepicker-day-selected-end').contains('15');
+        cy.get('.semi-input').eq(0).click();
+        cy.get('.semi-datepicker-day').contains('10')
+            .then($day => {
+                $day.trigger('click');
+            });
+        cy.get('.semi-input').eq(0).click();
+        cy.get('.semi-popover .semi-datepicker-day-selected-start').contains('8');
+        cy.get('.semi-popover .semi-datepicker-day-selected-end').contains('9');
+    });
 });
diff --git a/packages/semi-foundation/datePicker/foundation.ts b/packages/semi-foundation/datePicker/foundation.ts
@@ -436,7 +436,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      */
     resetInnerSelectedStates(willUpdateDates?: Date[]) {
         const { value } = this._adapter.getStates();
-        const needResetCachedSelectedValue = !this.isCachedSelectedValueValid(willUpdateDates) || this._adapter.needConfirm() && !this.clickConfirmButton;
+        const needResetCachedSelectedValue = isNullOrUndefined(willUpdateDates) || !this.isCachedSelectedValueValid(willUpdateDates) || this._adapter.needConfirm() && !this.clickConfirmButton;
         if (needResetCachedSelectedValue) {
             this.resetCachedSelectedValue(value);
         }

diff --git a/packages/semi-ui/datePicker/_story/datePicker.stories.jsx b/packages/semi-ui/datePicker/_story/datePicker.stories.jsx
@@ -72,7 +72,8 @@ export {
     AutoSplitInput,
     FixNeedConfirmControlled,
     FixedNaN,
-    PresetsFunctionType
+    PresetsFunctionType,
+    FixedControlled
 } from './v2';
 
 

diff --git a/packages/semi-ui/datePicker/_story/v2/FixedControlled.jsx b/packages/semi-ui/datePicker/_story/v2/FixedControlled.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { DatePicker } from '@douyinfe/semi-ui';
+
+const App = () => (
+    <>
+        <DatePicker
+            type="dateRange"
+            defaultPickerValue="2022-08-01"
+            value={[new Date('2022-08-08'), new Date('2022-08-09')]}
+            style={{ width: 400 }}
+        />
+    </>
+);
+
+export default App;
diff --git a/packages/semi-ui/datePicker/_story/v2/index.js b/packages/semi-ui/datePicker/_story/v2/index.js
@@ -30,3 +30,4 @@ export { default as AutoSplitInput } from './AutoSplitInput';
 export { default as FixNeedConfirmControlled } from './FixNeedConfirmControlled';
 export { default as PresetsFunctionType } from './PresetsFunctionType';
 export { default as FixedNaN } from './FixedNaN';
+export { default as FixedControlled } from './FixedControlled';