Focus wrap only if it's not focused

close ant-design/ant-design#8668

Author: yesmeck

examples/ant-design.tsx

@@ -69,7 +69,7 @@ class MyControl extends React.Component {
         mousePosition={this.state.mousePosition}
         destroyOnClose={this.state.destroyOnClose}
       >
-        <input />
+        <input autoFocus />
         <p>basic modal</p>
         <button onClick={this.changeWidth}>change width</button>
         <div style={{ height: 200 }} />

src/Dialog.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import KeyCode from 'rc-util/lib/KeyCode';
+import contains from 'rc-util/lib/Dom/contains';
 import Animate from 'rc-animate';
 import LazyRenderBox from './LazyRenderBox';
 import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
@@ -81,9 +82,8 @@ export default class Dialog extends React.Component<IDialogPropTypes, any> {
       // first show
       if (!prevProps.visible) {
         this.openTime = Date.now();
-        this.lastOutSideFocusNode = document.activeElement as HTMLElement;
         this.addScrollingEffect();
-        this.wrap.focus();
+        this.tryFocus();
         const dialogNode = ReactDOM.findDOMNode(this.dialog);
         if (mousePosition) {
           const elOffset = offset(dialogNode);
@@ -110,6 +110,14 @@ export default class Dialog extends React.Component<IDialogPropTypes, any> {
       this.removeScrollingEffect();
     }
   }
+
+  tryFocus() {
+    if (!contains(this.wrap, document.activeElement)) {
+      this.lastOutSideFocusNode = document.activeElement as HTMLElement;
+      this.wrap.focus();
+    }
+  }
+
   onAnimateLeave = () => {
     const { afterClose } = this.props;
     // need demo?

tests/index.js

@@ -223,4 +223,16 @@ describe('dialog', () => {
       expect($('.rc-dialog-footer').css('padding')).to.be('10px 20px');
     }]);
   });
+
+  it('support input autoFocus', () => {
+    const d = ReactDOM.render(
+      <DialogWrap><input autoFocus /></DialogWrap>,
+      container
+    );
+    d.setState({
+      visible: true
+    });
+    console.log(document.activeElement);
+    expect(document.activeElement).to.be(document.querySelector('input'));
+  });
 });