fix: [Input] Fix other Input class components derived from Input that click before/suffix will not focus properly

cypress/integration/datePicker.spec.js

@@ -208,8 +208,8 @@ describe('DatePicker', () => {
         cy.get('.semi-popover .semi-datepicker-month-grid-left').contains('15').click({ force: true });
         // 查看输入框联动
         cy.get('[data-cy=dateTimeRange]').click({ force: true });
-        cy.get('[data-cy=dateTimeRange] .semi-input').eq(0).should("have.value", "2021-12-05 00:00:00");
-        cy.get('[data-cy=dateTimeRange] .semi-input').eq(1).should("have.value", "2021-12-15 00:00:00");
+        cy.get('[data-cy=dateTimeRange] .semi-input').eq(0).should("have.value", "2021-12-15 00:00:00");
+        cy.get('[data-cy=dateTimeRange] .semi-input').eq(1).should("have.value", "2022-01-20 00:00:00");
     });
 
     it('insetInput + dateTimeRange + check click range start ', () => {

packages/semi-foundation/input/foundation.ts

@@ -15,6 +15,7 @@ export interface InputAdapter extends Partial<DefaultAdapter>, Partial<InputDefa
     notifyBlur(value: any, e: any): void;
     setEyeClosed(eyeClosed: boolean): void;
     toggleFocusing(focused: boolean): void;
+    focusInput(): void;
     notifyFocus(value: any, e: any): void;
     notifyInput(e: any): void;
     notifyKeyDown(e: any): void;
@@ -198,6 +199,7 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
         }
         // do not handle bubbling up events
         if (this._adapter.isEventTarget(e)) {
+            this._adapter.focusInput();
             this._adapter.toggleFocusing(true);
         }
     }
@@ -212,6 +214,7 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
 
     handleClickEye(e: any) {
         const eyeClosed = this._adapter.getState('eyeClosed');
+        this._adapter.focusInput();
         this._adapter.toggleFocusing(true);
         this._adapter.setEyeClosed(!eyeClosed);
     }
@@ -276,6 +279,7 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
         const { disabled } = this._adapter.getProps();
         const { isFocus } = this._adapter.getStates();
         if (!disabled && !isFocus) {
+            this._adapter.focusInput();
             this._adapter.toggleFocusing(true);
         }
     }
@@ -288,6 +292,7 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
         if (e && isFunction(e.preventDefault)) {
             e.preventDefault();
         }
+        e.stopPropagation();
     }
 
     /**

packages/semi-foundation/inputNumber/foundation.ts

@@ -301,7 +301,7 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
         this._adapter.setClickUpOrDown(true);
         if (event) {
             this._persistEvent(event);
-            event.stopPropagation();
+            // event.stopPropagation();
             // Prevent native blurring events
             this._preventDefault(event);
         }
@@ -322,7 +322,7 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
         this._adapter.setClickUpOrDown(true);
         if (event) {
             this._persistEvent(event);
-            event.stopPropagation();
+            // event.stopPropagation();
             this._preventDefault(event);
         }
         this.downClick(event);

packages/semi-ui/input/index.tsx

@@ -173,14 +173,12 @@ class Input extends BaseComponent<InputProps, InputState> {
             setValue: (value: string) => this.setState({ value }),
             setEyeClosed: (value: boolean) => this.setState({ eyeClosed: value }),
             toggleFocusing: (isFocus: boolean) => {
+                this.setState({ isFocus });
+            },
+            focusInput: () => {
                 const { preventScroll } = this.props;
                 const input = this.inputRef && this.inputRef.current;
-                if (isFocus) {
-                    input && input.focus({ preventScroll });
-                } else {
-                    input && input.blur();
-                }
-                this.setState({ isFocus });
+                input && input.focus({ preventScroll });
             },
             toggleHovering: (isHovering: boolean) => this.setState({ isHovering }),
             getIfFocusing: () => this.state.isFocus,