fix: [DatePicker] insetInput show date bug in controlled mode #1413 (#1414)

Co-authored-by: shijia.me <[email protected]>

cypress/integration/datePicker.spec.js

@@ -634,4 +634,15 @@ describe('DatePicker', () => {
         cy.get('.semi-datepicker-month-grid-left .semi-datepicker-day-selected-start');
         cy.get('.semi-datepicker-month-grid-right .semi-datepicker-day-selected-end');
     });
+
+    it('test controlled insetInput dateTimeRange ', () => {
+        cy.visit('http://localhost:6006/iframe.html?id=datepicker--inset-input-controlled&viewMode=story');
+        cy.get('.semi-input').eq(0).click();
+        cy.get('.semi-datepicker-month-grid-left .semi-datepicker-day').contains('20').click();
+        cy.get('.semi-datepicker-month-grid-right .semi-datepicker-day').contains('20').click();
+        cy.get('.semi-datepicker-inset-input-wrapper .semi-input').eq(0).should("have.value", "2022-02-20");
+        cy.get('.semi-datepicker-inset-input-wrapper .semi-input').eq(1).should("have.value", "00:00:00");
+        cy.get('.semi-datepicker-inset-input-wrapper .semi-input').eq(2).should("have.value", "2023-02-20");
+        cy.get('.semi-datepicker-inset-input-wrapper .semi-input').eq(3).should("have.value", "00:00:00");
+    });
 });

packages/semi-foundation/datePicker/foundation.ts

@@ -175,12 +175,14 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
 export interface DatePickerFoundationState {
     panelShow: boolean;
     isRange: boolean;
+    /** value of trigger input */
     inputValue: string;
     value: Date[];
     cachedSelectedValue: Date[];
     prevTimeZone: string | number;
     rangeInputFocus: RangeType;
     autofocus: boolean;
+    /** value of inset input */
     insetInputValue: InsetInputValue;
     triggerDisabled: boolean
 }
@@ -248,7 +250,9 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
 
         const result = this.parseWithTimezone(_value, timeZone, prevTimeZone);
         this._adapter.updatePrevTimezone(prevTimeZone);
+        // reset input value when value update
         this._adapter.updateInputValue(null);
+        this._adapter.updateInsetInputValue(null);
         this._adapter.updateValue(result);
         this.resetCachedSelectedValue(result);
         this.initRangeInputFocus(result);

packages/semi-ui/datePicker/_story/v2/InsetInputControlled.tsx

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { DatePicker, Space } from "../../../index";
+
+/**
+ * fix https://github.com/DouyinFE/semi-design/issues/1413
+ */
+export default function App() {
+    const [date, setDate] = useState();
+    const defaultPickerValue = ['2022-02-07', '2023-02-07'];
+    const handleDateChange = value => {
+        setDate(value);
+    };
+    return (
+        <Space>
+            <DatePicker defaultPickerValue={defaultPickerValue} type="dateTimeRange" value={date} onChange={handleDateChange} insetInput />
+            <DatePicker defaultPickerValue={defaultPickerValue} type="dateTimeRange" insetInput placeholder={"非受控"} />
+        </Space>
+    );
+}
+
+App.storyName = '修复受控内嵌输入框类型';

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

@@ -12,3 +12,4 @@ export { default as FixedTriggerRender } from './FixTriggerRender';
 export { default as DisabledRange } from './DisabledRange';
 export { default as FixDisabledMonth } from './FixDisabledMonth';
 export { default as FixRangePanelShift } from './FixRangePanelShift';
+export { default as InsetInputControlled } from './InsetInputControlled';

packages/semi-ui/datePicker/dateInput.tsx

@@ -202,7 +202,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
                 aria-label="Clear range input value"
                 className={`${prefixCls}-range-input-clearbtn`}
                 onMouseDown={e => !disabled && this.handleRangeInputClear(e)}>
-                {clearIcon ? clearIcon :<IconClear aria-hidden />}
+                {clearIcon ? clearIcon : <IconClear aria-hidden />}
             </div>
         ) : null;
     }

packages/semi-ui/datePicker/datePicker.tsx

@@ -665,8 +665,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     };
 
     renderPanel = (locale: Locale['DatePicker'], localeCode: string, dateFnsLocale: Locale['dateFnsLocale']) => {
-        const { dropdownClassName, dropdownStyle, density, topSlot, bottomSlot, insetInput, type, format, rangeSeparator, defaultPickerValue, presetPosition } = this.props;
-        const { insetInputValue, value } = this.state;
+        const { dropdownClassName, dropdownStyle, density, topSlot, bottomSlot, presetPosition } = this.props;
         const wrapCls = classnames(
             cssClasses.PREFIX,
             {
@@ -676,22 +675,6 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             dropdownClassName
         );
 
-        const insetInputProps = {
-            dateFnsLocale,
-            format,
-            insetInputValue,
-            rangeSeparator,
-            type,
-            value: value as Date[],
-            handleInsetDateFocus: this.handleInsetDateFocus,
-            handleInsetTimeFocus: this.handleInsetTimeFocus,
-            onInsetInputChange: this.handleInsetInputChange,
-            rangeInputStartRef: this.rangeInputStartRef,
-            rangeInputEndRef: this.rangeInputEndRef,
-            density,
-            defaultPickerValue
-        };
-
         return (
             <div ref={this.panelRef} className={wrapCls} style={dropdownStyle} >
                 {topSlot && (
@@ -700,7 +683,6 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
                     </div>
                 )}
                 {presetPosition === "top" && this.renderQuickControls()}
-                {/* {insetInput && <DateInput {...insetInputProps} insetInput={true} />} */}
                 {this.adapter.typeIsYearOrMonth()
                     ? this.renderYearMonthPanel(locale, localeCode)
                     : this.renderMonthGrid(locale, localeCode, dateFnsLocale)}