For Tooltips, prevent emitting events to child elements if they are d…

…isabled. (#35254)

Fixes #30422

packages/components/src/tooltip/index.js

@@ -81,6 +81,12 @@ const emitToChild = ( children, eventName, event ) => {
 	}
 
 	const child = Children.only( children );
+
+	// If the underlying element is disabled, do not emit the event.
+	if ( child.props.disabled ) {
+		return;
+	}
+
 	if ( typeof child.props[ eventName ] === 'function' ) {
 		child.props[ eventName ]( event );
 	}

packages/components/src/tooltip/stories/index.js

@@ -1,8 +1,14 @@
 /**
  * External dependencies
  */
+import styled from '@emotion/styled';
 import { text, select, number } from '@storybook/addon-knobs';
 
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -41,3 +47,31 @@ export const _default = () => {
 		</Tooltip>
 	);
 };
+
+const Button = styled.button`
+	margin: 0 10px;
+`;
+
+export const DisabledElement = () => {
+	const [ showMessage, toggleMessage ] = useState( false );
+
+	return (
+		<>
+			<Tooltip text="Hey, I am tooltip" position="bottom center">
+				<Button onClick={ () => toggleMessage( ! showMessage ) }>
+					Hover me!
+				</Button>
+			</Tooltip>
+			<Tooltip text="Hey, I am tooltip" position="bottom center">
+				<Button
+					disabled
+					onClick={ () => toggleMessage( ! showMessage ) }
+				>
+					Hover me, but I am disabled
+				</Button>
+			</Tooltip>
+			<br />
+			{ showMessage ? <p>Hello World!</p> : null }
+		</>
+	);
+};

packages/components/src/tooltip/test/index.js

@@ -211,6 +211,26 @@ describe( 'Tooltip', () => {
 			}, TOOLTIP_DELAY );
 		} );
 
+		it( 'should not emit events back to children when they are disabled', () => {
+			const handleClick = jest.fn();
+
+			const wrapper = mount(
+				<Tooltip text="Show helpful text here">
+					<button disabled onClick={ handleClick }>
+						Click me
+					</button>
+				</Tooltip>
+			);
+
+			const eventCatcher = wrapper.find( '.event-catcher' );
+			eventCatcher.simulate( 'click', {
+				type: 'click',
+				currentTarget: {},
+			} );
+
+			expect( handleClick ).toHaveBeenCalledTimes( 0 );
+		} );
+
 		it( 'should cancel pending setIsOver on mouseleave', () => {
 			// Mount: Issues with using `setState` asynchronously with shallow-
 			// rendered components: https://github.com/airbnb/enzyme/issues/450