fix: tooltip > don't immediately display when added to disabled target

.vdiff.json

@@ -7,7 +7,7 @@
 	],
 	"system": {
 		"platform": "linux",
-		"release": "6.8.0-1020-azure",
+		"release": "6.8.0-1021-azure",
 		"arch": "x64"
 	}
 }

components/tooltip/demo/tooltip.html

@@ -202,7 +202,17 @@ <h2>Help Tooltip</h2>
 			</template>
 		</d2l-demo-snippet>
 
+		<d2l-demo-snippet>
+			<template>
+				<d2l-button id="toggle" disabled-tooltip="This tooltip shows if button is disabled, but only after refocusing">Toggle Disable</d2l-button>
+			</template>
+		</d2l-demo-snippet>
+
 		<script>
+			document.addEventListener('click', e => {
+				if (e.target.id !== 'toggle') return;
+				e.target.disabled = !e.target.disabled;
+			});
 			document.addEventListener('d2l-tooltip-show', e => console.log('d2l-tooltip-show', e.target));
 			document.addEventListener('d2l-tooltip-hide', e => console.log('d2l-tooltip-hide', e.target));
 		</script>

components/tooltip/test/tooltip.test.js

@@ -223,6 +223,20 @@ describe('d2l-tooltip', () => {
 
 		});
 
+		it('should not show if added to a disabled target that already has focus', async() => {
+
+			const target = tooltipFixture.querySelector('#explicit-target');
+			target.disabled = true;
+			await focusElem(target);
+
+			const dynamicTooltip = document.createElement('d2l-tooltip');
+			dynamicTooltip.for = target.id;
+			tooltipFixture.appendChild(dynamicTooltip);
+
+			await aTimeout(100);
+			expect(dynamicTooltip.showing).to.be.false;
+		});
+
 	});
 
 	describe('delay', () => {

components/tooltip/tooltip.js

@@ -950,9 +950,17 @@ class Tooltip extends RtlMixin(LitElement) {
 	}
 
 	_updateTarget() {
+		const newTarget = this._findTarget();
+		if (this._target === newTarget) {
+			return;
+		}
+
 		this._removeListeners();
-		this._target = this._findTarget();
+		this._target = newTarget;
+
 		if (this._target) {
+			const targetDisabled = this._target.hasAttribute('disabled') || this._target.getAttribute('aria-disabled') === 'true';
+
 			const isInteractive = this._isInteractive(this._target);
 			this.id = this.id || getUniqueId();
 			this.setAttribute('role', 'tooltip');
@@ -971,7 +979,7 @@ class Tooltip extends RtlMixin(LitElement) {
 			}
 			if (this.showing) {
 				this.updatePosition();
-			} else if (isComposedAncestor(this._target, getComposedActiveElement())) {
+			} else if (!targetDisabled && isComposedAncestor(this._target, getComposedActiveElement())) {
 				this._onTargetFocus();
 			}
 		}