fix(DateInput): use flushSync in React@18 (#3286)

skbkontur · Oct 13, 2023 · 69efd4d · 69efd4d
1 parent 88a2d15
commit 69efd4d
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/packages/react-ui/components/DateInput/DateInput.tsx b/packages/react-ui/components/DateInput/DateInput.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 
 import { ConditionalHandler } from '../../lib/ConditionalHandler';
 import { LENGTH_FULLDATE, MAX_FULLDATE, MIN_FULLDATE } from '../../lib/date/constants';
@@ -140,7 +141,7 @@ export class DateInput extends React.Component<DateInputProps, DateInputState> {
       prevProps.maxDate !== maxDate ||
       this.iDateMediator.isChangedLocale(this.locale)
     ) {
-      this.updateFromProps();
+      this.updateFromProps(false);
     }
     this.selectNode();
   }
@@ -162,7 +163,7 @@ export class DateInput extends React.Component<DateInputProps, DateInputState> {
   };
 
   public componentDidMount(): void {
-    this.updateFromProps();
+    this.updateFromProps(false);
     if (this.props.autoFocus) {
       this.focus();
     }
@@ -352,16 +353,22 @@ export class DateInput extends React.Component<DateInputProps, DateInputState> {
     this.setState({ selected, inputMode: false });
   };
 
-  private updateValue = (state: Partial<DateInputState> = {}): void => {
+  private updateValue = (state: Partial<DateInputState> = {}, sync = true): void => {
     const valueFormatted = this.iDateMediator.getString();
 
-    this.setState({ ...state, valueFormatted } as DateInputState, this.emitChange);
+    const update = () => this.setState({ ...state, valueFormatted } as DateInputState, this.emitChange);
+
+    if (sync && React.version.search('18') === 0) {
+      ReactDOM.flushSync(update);
+    } else {
+      update();
+    }
   };
 
-  private updateFromProps = (): void => {
+  private updateFromProps = (sync: boolean): void => {
     this.iDateMediator.update(this.props, this.locale);
 
-    this.updateValue();
+    this.updateValue({}, sync);
   };
 
   private fullSelection = (): void => {