feat: support React 17 (#2360)

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();

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) {

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) {

packages/react-ui/internal/DropdownContainer/__stories__/DropdownContainer.stories.tsx

@@ -151,7 +151,7 @@ class VariousAlignsPortalsItemsAndScrolls extends React.Component {
                     dropdownProps={{ align, disablePortal }}
                   >
                     <Menu>
-                      <MenuItem>
+                      <MenuItem style={{ pointerEvents: 'none' }}>
                         {`${row}/${col}/align-${align}/portal-${!disablePortal}; `.repeat(long ? 3 : 1)}
                       </MenuItem>
                     </Menu>

packages/react-ui/lib/LayoutEvents.ts

@@ -10,13 +10,13 @@ function getEmitter() {
 }
 
 function listenBrowserEvents() {
-  window.addEventListener('scroll', emit);
-  window.addEventListener('resize', emit);
+  window.addEventListener('scroll', emit, { capture: true });
+  window.addEventListener('resize', emit, { capture: true });
 }
 
 function unlistenBrowserEvents() {
-  window.removeEventListener('scroll', emit);
-  window.removeEventListener('resize', emit);
+  window.removeEventListener('scroll', emit, { capture: true });
+  window.removeEventListener('resize', emit, { capture: true });
 }
 
 export function addListener(callback: () => void) {

packages/react-ui/lib/listenFocusOutside.ts

@@ -22,7 +22,7 @@ function addHandleEvent() {
   document.body.addEventListener(
     isFirefox ? 'focus' : ('focusin' as 'focus'),
     isFirefox ? debounce(handleNativeFocus, 0, { leading: true, trailing: false }) : handleNativeFocus,
-    isFirefox,
+    { capture: true },
   );
 }
 

packages/react-ui/package.json

@@ -154,8 +154,8 @@
     "webpack": "^4.41.2"
   },
   "peerDependencies": {
-    "react": ">=16.9 <17",
-    "react-dom": ">=16.9 <17"
+    "react": ">=16.9",
+    "react-dom": ">=16.9"
   },
   "jest": {
     "testResultsProcessor": "jest-teamcity-reporter",