refactor: various edits for compatibility with React 17

skbkontur · Apr 27, 2021 · 4bf82bc · 4bf82bc
1 parent 0f196b0
commit 4bf82bc
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/packages/react-ui/components/DateInput/helpers/SelectionHelpers.tsx b/packages/react-ui/components/DateInput/helpers/SelectionHelpers.tsx
@@ -2,7 +2,7 @@ export const selectNodeContents = (node: HTMLElement | null, start?: number, end
   if (!node) {
     return;
   }
-  if (document.createRange) {
+  if ('createRange' in document) {
     try {
       const selection = window.getSelection();
       const range = window.document.createRange();

diff --git a/packages/react-ui/components/Input/Input.tsx b/packages/react-ui/components/Input/Input.tsx
@@ -466,7 +466,7 @@ export class Input extends React.Component<InputProps, InputState> {
 
     if (this.props.selectAllOnFocus) {
       // https://github.com/facebook/react/issues/7769
-      this.input ? this.selectAll() : this.delaySelectAll();
+      this.input && !isIE11 ? this.selectAll() : this.delaySelectAll();
     }
 
     if (this.props.onFocus) {

diff --git a/packages/react-ui/components/Textarea/Textarea.tsx b/packages/react-ui/components/Textarea/Textarea.tsx
@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import throttle from 'lodash.throttle';
 import cn from 'classnames';
+import raf from 'raf';
 
 import { isKeyEnter } from '../../lib/events/keyboard/identifiers';
 import { polyfillPlaceholder } from '../../lib/polyfillPlaceholder';
@@ -11,7 +12,7 @@ import { ThemeContext } from '../../lib/theming/ThemeContext';
 import { Theme } from '../../lib/theming/Theme';
 import { RenderLayer } from '../../internal/RenderLayer';
 import { ResizeDetector } from '../../internal/ResizeDetector';
-import { isBrowser } from '../../lib/client';
+import { isBrowser, isIE11 } from '../../lib/client';
 import { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';
 import { isTestEnv } from '../../lib/currentEnvironment';
 
@@ -189,6 +190,7 @@ export class Textarea extends React.Component<TextareaProps, TextareaState> {
   };
 
   private theme!: Theme;
+  private selectAllId: number | null = null;
   private node: Nullable<HTMLTextAreaElement>;
   private fakeNode: Nullable<HTMLTextAreaElement>;
   private counter: Nullable<TextareaCounterRef>;
@@ -221,6 +223,7 @@ export class Textarea extends React.Component<TextareaProps, TextareaState> {
     if (this.props.showLengthCounter && this.textareaObserver) {
       this.textareaObserver.disconnect();
     }
+    this.cancelDelayedSelectAll();
   }
 
   public componentDidUpdate(prevProps: TextareaProps) {
@@ -286,6 +289,15 @@ export class Textarea extends React.Component<TextareaProps, TextareaState> {
     }
   };
 
+  private delaySelectAll = (): number => (this.selectAllId = raf(this.selectAll));
+
+  private cancelDelayedSelectAll = (): void => {
+    if (this.selectAllId) {
+      raf.cancel(this.selectAllId);
+      this.selectAllId = null;
+    }
+  };
+
   private renderMain = (props: CommonWrapperRestProps<TextareaProps>) => {
     const {
       width = DEFAULT_WIDTH,
@@ -497,7 +509,8 @@ export class Textarea extends React.Component<TextareaProps, TextareaState> {
     this.setState({ isCounterVisible: true });
 
     if (this.props.selectAllOnFocus) {
-      this.selectAll();
+      // https://github.com/facebook/react/issues/7769
+      this.node && !isIE11 ? this.selectAll() : this.delaySelectAll();
     }
 
     if (this.props.onFocus) {

diff --git a/packages/react-ui/lib/listenFocusOutside.ts b/packages/react-ui/lib/listenFocusOutside.ts
@@ -10,7 +10,7 @@ interface FocusOutsideEventHandler {
 const handlers: FocusOutsideEventHandler[] = [];
 
 function addHandleEvent() {
-  document.body.addEventListener('focusin', handleNativeFocus);
+  document.body.addEventListener('focusin', handleNativeFocus, { capture: true });
 }
 
 if (isBrowser) {