fix(datepicker): clear input focus when type is dateTimeRange and and open is controlled #528 (#528)

cypress/integration/datePicker.spec.js

@@ -98,4 +98,26 @@ describe('DatePicker', () => {
         cy.get('[data-cy=3] .semi-datepicker-range-input-wrapper-start .semi-input').should('have.value', '2021-12-15 10:37:13');
         cy.get('[data-cy=3] .semi-datepicker-range-input-wrapper-end .semi-input').should('have.value', '2022-01-20 10:37:13');
     });
+
+    /**
+     * 测试 open 受控时，点击面板内按钮关闭面板后，输入框应该清除 focus 状态
+     */
+    it('input range focus when open is controlled', () => {
+        cy.visit('http://localhost:6009/iframe.html?id=datepicker--fix-input-range-focus&args=&viewMode=story');
+        cy.get('.semi-datepicker-range-input-wrapper-start > .semi-input-wrapper').click();
+        cy.get('.semi-datepicker-day').contains('10')
+            .then($btn => {
+                $btn.trigger('click');
+            });
+        cy.get('.semi-datepicker-day').contains('15')
+            .then($btn => {
+                $btn.trigger('click');
+            });
+        cy.get('.semi-datepicker-bottomSlot .semi-button')
+            .then($btn => {
+                $btn.trigger('click');
+                cy.get('.semi-datepicker-range-input-wrapper-start').should('not.have.class', 'semi-datepicker-range-input-wrapper-active');
+                cy.get('.semi-datepicker-range-input-wrapper-end').should('not.have.class', 'semi-datepicker-range-input-wrapper-active');
+            });
+    });
 });

packages/semi-foundation/datePicker/foundation.ts

@@ -384,6 +384,18 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         this._adapter.notifyBlur(e);
     }
 
+    /**
+     * clear range input focus when open is controlled
+     * fixed github 1375
+     */
+    clearRangeInputFocus = () => {
+        const { type } = this._adapter.getProps();
+        const { rangeInputFocus } = this._adapter.getStates();
+        if (type === 'dateTimeRange' && rangeInputFocus) {
+            this._adapter.setRangeInputFocus(false);
+        }
+    }
+
     /**
      * Callback when the content of the input box changes
      * Update the date panel if the changed value is a legal date, otherwise only update the input box

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { DatePicker, Button } from '../../../index';
+
+/**
+ * fix gitlab #1375
+ */
+App.storyName = 'fixed input range focus';
+export default function App() {
+    const [visible, setVisible] = React.useState(false);
+    return (
+        <div>
+            {/* <Button onClick={() => { setVisible(false); }}>关闭</Button> */}
+            <DatePicker
+                type="dateTimeRange"
+                bottomSlot={<Button onClick={() => { setVisible(false); }}>关闭</Button>}
+                onFocus={() => {
+                    console.log('focus');
+                    setVisible(true); 
+                }}
+                open={visible}
+                showClear
+            />
+        </div>
+    );
+}

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

@@ -1,2 +1,3 @@
 export { default as YearButton } from './YearButton';
-export { default as PanelOpen  } from './PanelOpen';
+export { default as PanelOpen  } from './PanelOpen';
+export { default as FixInputRangeFocus } from './FixInputRangeFocus';

packages/semi-ui/datePicker/datePicker.tsx

@@ -331,6 +331,9 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
 
         if (prevProps.open !== this.props.open) {
             this.foundation.initPanelOpenStatus();
+            if (!this.props.open) {
+                this.foundation.clearRangeInputFocus();
+            }
         }
     }