Remove findDOMNode from Tooltip component (#11169)

* Remove findDOMNode from Tooltip component
WordPress · Oct 31, 2018 · 8ad5fbd · 8ad5fbd
1 parent 58725c4
commit 8ad5fbd
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 64 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 5.0.2 (Unreleased)
+
+### Polish
+
+- Tooltip are no longer removed when Button becomes disabled, it's left to the component rendering the Tooltip.
+
 ## 5.0.1 (2018-10-30)
 
 ## 5.0.0 (2018-10-29)

diff --git a/packages/components/src/icon-button/index.js b/packages/components/src/icon-button/index.js
@@ -25,7 +25,7 @@ class IconButton extends Component {
 		const tooltipText = tooltip || label;
 
 		// Should show the tooltip if...
-		const showTooltip = (
+		const showTooltip = ! additionalProps.disabled && (
 			// an explicit tooltip is passed or...
 			tooltip ||
 			// there's a shortcut or...
@@ -49,7 +49,10 @@ class IconButton extends Component {
 
 		if ( showTooltip ) {
 			element = (
-				<Tooltip text={ tooltipText } shortcut={ shortcut }>
+				<Tooltip
+					text={ tooltipText }
+					shortcut={ shortcut }
+				>
 					{ element }
 				</Tooltip>
 			);

diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js
@@ -10,7 +10,6 @@ import {
 	Component,
 	Children,
 	cloneElement,
-	findDOMNode,
 	concatChildren,
 } from '@wordpress/element';
 
@@ -31,7 +30,6 @@ class Tooltip extends Component {
 	constructor() {
 		super( ...arguments );
 
-		this.bindNode = this.bindNode.bind( this );
 		this.delayedSetIsOver = debounce(
 			( isOver ) => this.setState( { isOver } ),
 			TOOLTIP_DELAY
@@ -44,65 +42,6 @@ class Tooltip extends Component {
 
 	componentWillUnmount() {
 		this.delayedSetIsOver.cancel();
-		this.disconnectDisabledAttributeObserver();
-	}
-
-	componentDidUpdate( prevProps, prevState ) {
-		const { isOver } = this.state;
-		if ( isOver !== prevState.isOver ) {
-			if ( isOver ) {
-				this.observeDisabledAttribute();
-			} else {
-				this.disconnectDisabledAttributeObserver();
-			}
-		}
-	}
-
-	/**
-	 * Assigns DOM node of the rendered component as an instance property.
-	 *
-	 * @param {Element} ref Rendered component reference.
-	 */
-	bindNode( ref ) {
-		// Disable reason: Because render clones the child, we don't know what
-		// type of element we have, but if it's a DOM node, we want to observe
-		// the disabled attribute.
-		// eslint-disable-next-line react/no-find-dom-node
-		this.node = findDOMNode( ref );
-	}
-
-	/**
-	 * Disconnects any DOM observer attached to the rendered node.
-	 */
-	disconnectDisabledAttributeObserver() {
-		if ( this.observer ) {
-			this.observer.disconnect();
-		}
-	}
-
-	/**
-	 * Adds a DOM observer to the rendered node, if supported and if the DOM
-	 * node exists, to monitor for application of a disabled attribute.
-	 */
-	observeDisabledAttribute() {
-		if ( ! window.MutationObserver || ! this.node ) {
-			return;
-		}
-
-		this.observer = new window.MutationObserver( ( [ mutation ] ) => {
-			if ( mutation.target.disabled ) {
-				// We can assume here that isOver is true, because mutation
-				// observer is only attached for duration of isOver active
-				this.setState( { isOver: false } );
-			}
-		} );
-
-		// Monitor changes to the disable attribute on the DOM node
-		this.observer.observe( this.node, {
-			subtree: true,
-			attributes: true,
-			attributeFilter: [ 'disabled' ],
-		} );
 	}
 
 	emitToChild( eventName, event ) {
@@ -163,7 +102,6 @@ class Tooltip extends Component {
 		const child = Children.only( children );
 		const { isOver } = this.state;
 		return cloneElement( child, {
-			ref: this.bindNode,
 			onMouseEnter: this.createToggleIsOver( 'onMouseEnter', true ),
 			onMouseLeave: this.createToggleIsOver( 'onMouseLeave' ),
 			onClick: this.createToggleIsOver( 'onClick' ),