fix: fixed DatePicker selected status bug when double click #1652 (#2389

)

Co-authored-by: shijia.me <shijia.me@bytedance.com>
Co-authored-by: pointhalo <88709023+pointhalo@users.noreply.github.com>

cypress/e2e/datePicker.spec.js

@@ -859,6 +859,21 @@ describe('DatePicker', () => {
         cy.get('.semi-input').eq(1).should('have.value', '2024-02-26');
     });
 
+    it('fixed selected status bug when double click', () => {
+        cy.visit('http://localhost:6006/iframe.html?id=datepicker--fixed-selected-status&viewMode=story');
+        cy.get('.semi-input').eq(0).click();
+        cy.get('.semi-datepicker-month-grid-left .semi-datepicker-day').contains('15')
+            .then($day => {
+                $day.trigger('click');
+            });
+        cy.get('.semi-datepicker-day-selected').contains("15");
+        cy.get('.semi-datepicker-month-grid-left .semi-datepicker-day').contains('15')
+            .then($day => {
+                $day.trigger('click');
+            });
+        cy.get('.semi-datepicker-day-selected').contains("15");
+    })
+
     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();

packages/semi-foundation/datePicker/monthsGridFoundation.ts

@@ -613,11 +613,11 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         const multiple = this._isMultiple();
         const { selected } = this.getStates();
         const monthDetail = this._getPanelDetail(panelType);
-        const newSelected = new Set(multiple ? [...selected] : []);
+        const newSelected = new Set<string>(multiple ? [...selected] : []);
 
         const { fullDate } = day;
         const time = monthDetail.pickerDate;
-        const dateStr = type === 'dateTime' ? this._mergeDateAndTime(fullDate, time) : fullDate;
+        const dateStr = fullDate;
 
         if (!multiple) {
             newSelected.add(dateStr);
@@ -631,9 +631,8 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
             }
         }
 
-        const dateFormat = this.getValidDateFormat();
         // When passed to the upper layer, it is converted into a Date object to ensure that the input parameter format of initFormDefaultValue is consistent
-        const newSelectedDates = [...newSelected].map(_dateStr => compatibleParse(_dateStr, dateFormat, undefined, dateFnsLocale));
+        const newSelectedDates = [...newSelected].map(_dateStr => type === 'dateTime' ? this._mergeDateAndTime(_dateStr, time) : compatibleParse(_dateStr, strings.FORMAT_FULL_DATE, undefined, dateFnsLocale));
 
         this.handleShowDateAndTime(panelType, time);
 

packages/semi-ui/datePicker/_story/datePicker.stories.jsx

@@ -73,6 +73,7 @@ export {
     FixNeedConfirmControlled,
     FixedNaN,
     PresetsFunctionType,
+    FixedSelectedStatus,
     FixedControlled
 } from './v2';
 

packages/semi-ui/datePicker/_story/v2/FixedSelectedStatus.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DatePicker } from '@douyinfe/semi-ui';
+
+const App = () => (
+    <DatePicker type="dateTime" defaultPickerValue="2022-07-01" />
+);
+
+export default App;

packages/semi-ui/datePicker/_story/v2/index.js

@@ -30,4 +30,5 @@ 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 FixedSelectedStatus } from './FixedSelectedStatus';
 export { default as FixedControlled } from './FixedControlled';