Merge f4a0852 into 4e28f9d

react-component · Feb 14, 2019 · e0eeb97 · e0eeb97
2 parents 4e28f9d + f4a0852
commit e0eeb97
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 2 deletions.
diff --git a/examples/simple.js b/examples/simple.js
@@ -5,11 +5,30 @@ import ReactDOM from 'react-dom';
 class Test extends Component {
   state = {
     monitor: true,
+    random: false,
+    randomWidth: 100,
     align: {
       points: ['cc', 'cc'],
     },
   };
 
+  componentDidMount() {
+    this.id = setInterval(() => {
+      const { random } = this.state;
+      if (random) {
+        this.setState({
+          randomWidth: 60 + 40 * Math.random(),
+        }, () => {
+          this.forceAlign();
+        });
+      }
+    }, 1000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.id);
+  }
+
   getTarget = () => {
     if (!this.$container) {
       // parent ref not attached
@@ -32,11 +51,19 @@ class Test extends Component {
     });
   }
 
+  toggleRandom = () => {
+    this.setState({
+      random: !this.state.random,
+    });
+  }
+
   forceAlign = () => {
     this.$align.forceAlign();
   }
 
   render() {
+    const { random, randomWidth } = this.state;
+
     return (
       <div
         style={{
@@ -51,6 +78,11 @@ class Test extends Component {
             &nbsp;
             Monitor window resize
           </label>
+          <label>
+            <input type="checkbox" checked={this.state.random} onChange={this.toggleRandom} />
+            &nbsp;
+            Random Size
+          </label>
         </p>
         <div
           ref={this.containerRef}
@@ -59,6 +91,9 @@ class Test extends Component {
             width: '80%',
             height: 500,
             border: '1px solid red',
+            ...(random ? {
+              width: `${randomWidth}%`
+            } : null),
           }}
         >
           <Align
@@ -75,7 +110,10 @@ class Test extends Component {
                 background: 'yellow',
               }}
             >
-              source
+              <input
+                defaultValue="source"
+                style={{ width: '100%' }}
+              />
             </div>
           </Align>
         </div>

diff --git a/src/Align.jsx b/src/Align.jsx
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import { alignElement, alignPoint } from 'dom-align';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 
-import { isWindow, buffer, isSamePoint, isSimilarValue } from './util';
+import { isWindow, buffer, isSamePoint, isSimilarValue, restoreFocus } from './util';
 
 function getElement(func) {
   if (typeof func !== 'function' || !func) return null;
@@ -133,12 +133,20 @@ class Align extends Component {
       const element = getElement(target);
       const point = getPoint(target);
 
+      // IE lose focus after element realign
+      // We should record activeElement and restore later
+      const activeElement = document.activeElement;
+
       if (element) {
         result = alignElement(source, element, align);
       } else if (point) {
         result = alignPoint(source, point, align);
       }
 
+      if (activeElement && activeElement !== document.activeElement) {
+        restoreFocus(activeElement, source);
+      }
+
       if (onAlign) {
         onAlign(source, result);
       }

diff --git a/src/util.js b/src/util.js
@@ -42,3 +42,18 @@ export function isSimilarValue(val1, val2) {
   const int2 = Math.floor(val2);
   return Math.abs(int1 - int2) <= 1;
 }
+
+export function restoreFocus(activeElement, container) {
+  let currentElement = activeElement;
+  while (currentElement) {
+    if (currentElement === container) {
+      break;
+    }
+    currentElement = currentElement.parentNode;
+  }
+
+  // Focus back if is in the container
+  if (currentElement) {
+    activeElement.focus();
+  }
+}