[Tooltip] Fix autoFocus issue (#12372)

* [Tooltip] childrenRef * let's merge
mui · Aug 2, 2018 · fb201b4 · fb201b4
1 parent 2e6a6dc
commit fb201b4
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 34 deletions.
diff --git a/.size-limit.js b/.size-limit.js
@@ -27,7 +27,7 @@ module.exports = [
     name: 'The size of all the modules of material-ui.',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '95.4 KB',
+    limit: '95.5 KB',
   },
   {
     name: 'The main bundle of the docs',

diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -67,21 +67,23 @@ export const styles = theme => ({
 });
 
 class Tooltip extends React.Component {
-  enterTimer = null;
+  childrenRef = null;
 
-  leaveTimer = null;
+  closeTimer = null;
 
-  touchTimer = null;
+  defaultId = null;
 
-  closeTimer = null;
+  enterTimer = null;
 
-  childrenRef = null;
+  focusTimer = null;
+
+  ignoreNonTouchEvents = false;
 
   isControlled = null;
 
-  ignoreNonTouchEvents = false;
+  leaveTimer = null;
 
-  defaultId = null;
+  touchTimer = null;
 
   internalState = {
     hover: false,
@@ -126,16 +128,26 @@ class Tooltip extends React.Component {
   }
 
   componentWillUnmount() {
+    clearTimeout(this.closeTimer);
     clearTimeout(this.enterTimer);
+    clearTimeout(this.focusTimer);
     clearTimeout(this.leaveTimer);
     clearTimeout(this.touchTimer);
-    clearTimeout(this.closeTimer);
   }
 
   onRootRef = ref => {
     this.childrenRef = ref;
   };
 
+  handleFocus = event => {
+    event.persist();
+    // The autoFocus of React might trigger the event before the componentDidMount.
+    // We need to account for this eventuality.
+    this.focusTimer = setTimeout(() => {
+      this.handleEnter(event);
+    });
+  };
+
   handleEnter = event => {
     const { children, enterDelay } = this.props;
     const childrenProps = children.props;
@@ -310,7 +322,7 @@ class Tooltip extends React.Component {
     }
 
     if (!disableFocusListener) {
-      childrenProps.onFocus = this.handleEnter;
+      childrenProps.onFocus = this.handleFocus;
       childrenProps.onBlur = this.handleLeave;
     }
 

diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js
@@ -14,6 +14,7 @@ describe('<Tooltip />', () => {
   let shallow;
   let mount;
   let classes;
+  let clock;
   const defaultProps = {
     title: 'Hello World',
     children: <span>Hello World</span>,
@@ -23,9 +24,11 @@ describe('<Tooltip />', () => {
     shallow = createShallow({ dive: true, disableLifecycleMethods: true });
     mount = createMount();
     classes = getClasses(<Tooltip {...defaultProps} />);
+    clock = useFakeTimers();
   });
 
   after(() => {
+    clock.restore();
     mount.cleanUp();
   });
 
@@ -92,7 +95,8 @@ describe('<Tooltip />', () => {
     const children = wrapper.childAt(0).childAt(0);
     assert.strictEqual(wrapper.state().open, false);
     children.simulate('mouseEnter', { type: 'mouseenter' });
-    children.simulate('focus', { type: 'focus' });
+    children.simulate('focus', { type: 'focus', persist });
+    clock.tick(0);
     assert.strictEqual(wrapper.state().open, true);
     children.simulate('mouseLeave', { type: 'mouseleave' });
     assert.strictEqual(wrapper.state().open, true);
@@ -101,23 +105,13 @@ describe('<Tooltip />', () => {
   });
 
   describe('touch screen', () => {
-    let clock;
-
-    before(() => {
-      clock = useFakeTimers();
-    });
-
-    after(() => {
-      clock.restore();
-    });
-
     it('should not respond to quick events', () => {
       const wrapper = shallow(<Tooltip {...defaultProps} />);
       wrapper.instance().childrenRef = document.createElement('div');
       const children = wrapper.childAt(0).childAt(0);
       children.simulate('touchStart', { type: 'touchstart', persist });
       children.simulate('touchEnd', { type: 'touchend', persist });
-      children.simulate('focus', { type: 'focus' });
+      children.simulate('focus', { type: 'focus', persist });
       children.simulate('mouseover', { type: 'mouseover' });
       assert.strictEqual(wrapper.state().open, false);
     });
@@ -127,7 +121,7 @@ describe('<Tooltip />', () => {
       wrapper.instance().childrenRef = document.createElement('div');
       const children = wrapper.childAt(0).childAt(0);
       children.simulate('touchStart', { type: 'touchstart', persist });
-      children.simulate('focus', { type: 'focus' });
+      children.simulate('focus', { type: 'focus', persist });
       children.simulate('mouseover', { type: 'mouseover' });
       clock.tick(1e3);
       assert.strictEqual(wrapper.state().open, true);
@@ -145,16 +139,6 @@ describe('<Tooltip />', () => {
   });
 
   describe('prop: delay', () => {
-    let clock;
-
-    before(() => {
-      clock = useFakeTimers();
-    });
-
-    after(() => {
-      clock.restore();
-    });
-
     it('should take the enterDelay into account', () => {
       const wrapper = shallow(<Tooltip enterDelay={111} {...defaultProps} />);
       wrapper.instance().childrenRef = document.createElement('div');
@@ -169,7 +153,8 @@ describe('<Tooltip />', () => {
       const wrapper = shallow(<Tooltip leaveDelay={111} {...defaultProps} />);
       wrapper.instance().childrenRef = document.createElement('div');
       const children = wrapper.childAt(0).childAt(0);
-      children.simulate('focus', { type: 'focus' });
+      children.simulate('focus', { type: 'focus', persist });
+      clock.tick(0);
       assert.strictEqual(wrapper.state().open, true);
       children.simulate('blur', { type: 'blur', persist });
       assert.strictEqual(wrapper.state().open, true);
@@ -194,6 +179,7 @@ describe('<Tooltip />', () => {
           const children = wrapper.childAt(0).childAt(0);
           const type = name.slice(2).toLowerCase();
           children.simulate(type, { type, persist });
+          clock.tick(0);
           assert.strictEqual(handler.callCount, 1);
         });
       },