[Tooltip] New warning message (mui#8988)

the-noob · Nov 17, 2017 · c15800d · c15800d
1 parent f78fc32
commit c15800d
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
diff --git a/src/Tooltip/Tooltip.js b/src/Tooltip/Tooltip.js
@@ -228,6 +228,22 @@ class Tooltip extends React.Component<ProvidedProps & Props, State> {
     }
   }
 
+  componentDidMount() {
+    warning(
+      !this.children ||
+        !this.children.disabled ||
+        // $FlowFixMe
+        !this.children.tagName.toLowerCase() === 'button',
+      [
+        'Material-UI: you are providing a disabled button children to the Tooltip component.',
+        'A disabled element do not fire events.',
+        'But the Tooltip needs to listen to the children element events to display the title.',
+        '',
+        'Place a `div` over top of the element.',
+      ].join('\n'),
+    );
+  }
+
   componentWillUnmount() {
     clearTimeout(this.enterTimer);
     clearTimeout(this.leaveTimer);
@@ -239,6 +255,7 @@ class Tooltip extends React.Component<ProvidedProps & Props, State> {
   touchTimer = null;
   isControlled = null;
   popper = null;
+  children = null;
   ignoreNonTouchEvents = false;
 
   handleResize = debounce(() => {
@@ -421,7 +438,8 @@ class Tooltip extends React.Component<ProvidedProps & Props, State> {
                     : childrenProp
                 }
                 ref={node => {
-                  targetProps.ref(findDOMNode(node));
+                  this.children = findDOMNode(node);
+                  targetProps.ref(this.children);
                 }}
               />
             )}

diff --git a/src/Tooltip/Tooltip.spec.js b/src/Tooltip/Tooltip.spec.js
@@ -7,6 +7,7 @@ import { spy, useFakeTimers } from 'sinon';
 import { Target, Popper } from 'react-popper';
 import { ShallowWrapper } from 'enzyme';
 import { createShallow, createMount, getClasses, unwrap } from '../test-utils';
+import consoleErrorMock from '../../test/utils/consoleErrorMock';
 import createMuiTheme from '../styles/createMuiTheme';
 import Tooltip from './Tooltip';
 
@@ -315,4 +316,27 @@ describe('<Tooltip />', () => {
       assert.strictEqual(handleUpdate.callCount, 1);
     });
   });
+
+  describe('disabled button warning', () => {
+    before(() => {
+      consoleErrorMock.spy();
+    });
+
+    after(() => {
+      consoleErrorMock.reset();
+    });
+
+    it('should raise a warning when we can listen to events', () => {
+      mount(
+        <Tooltip title="Hello World">
+          <button disabled>Hello World</button>
+        </Tooltip>,
+      );
+      assert.strictEqual(consoleErrorMock.callCount(), 1, 'should call console.error');
+      assert.match(
+        consoleErrorMock.args()[0][0],
+        /Material-UI: you are providing a disabled button children to the Tooltip component/,
+      );
+    });
+  });
 });