From 22b4719ad97e2bf6931a7da98fa574ac50b97c51 Mon Sep 17 00:00:00 2001
From: Jordan Young <jordan.young@availity.com>
Date: Thu, 10 Sep 2026 15:02:04 -0400
Subject: [PATCH] fix(mui-button): wrap disabled IconButton in span inside
 Tooltip

MUI logs a warning when a disabled <button> is a direct child of
<Tooltip> because disabled elements don't fire events, so the tooltip
can't attach its mouse listeners.

When the button is disabled, wrap it in a <span> before passing it as
the Tooltip child so MUI can attach pointer events to the span instead.

Adds two tests:
- asserts no console.error warning fires when disabled={true}
- asserts the button element itself remains disabled
---
 packages/button/src/lib/IconButton.test.tsx | 26 +++++++++++++++++++++
 packages/button/src/lib/IconButton.tsx      | 11 +++++----
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/packages/button/src/lib/IconButton.test.tsx b/packages/button/src/lib/IconButton.test.tsx
index 16d09df7a8..65461e07b3 100644
--- a/packages/button/src/lib/IconButton.test.tsx
+++ b/packages/button/src/lib/IconButton.test.tsx
@@ -3,6 +3,32 @@ import { HomeIcon } from '@availity/mui-icon';
 import { IconButton } from './IconButton';
 
 describe('Button', () => {
+  test('should not warn when disabled button is inside Tooltip', () => {
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+
+    render(
+      <IconButton title="disabled action" disabled>
+        <HomeIcon />
+      </IconButton>
+    );
+
+    const muiTooltipWarning = consoleSpy.mock.calls.find((args) =>
+      args.some((arg) => typeof arg === 'string' && arg.includes('disabled'))
+    );
+    expect(muiTooltipWarning).toBeUndefined();
+
+    consoleSpy.mockRestore();
+  });
+
+  test('should render disabled button', () => {
+    const { getByRole } = render(
+      <IconButton title="disabled action" disabled>
+        <HomeIcon />
+      </IconButton>
+    );
+    expect(getByRole('button')).toBeDisabled();
+  });
+
   test('should render successfully', () => {
     const { getByRole } = render(
       <IconButton title="test">
diff --git a/packages/button/src/lib/IconButton.tsx b/packages/button/src/lib/IconButton.tsx
index 0eb1ddd630..ed71df55ac 100644
--- a/packages/button/src/lib/IconButton.tsx
+++ b/packages/button/src/lib/IconButton.tsx
@@ -38,14 +38,15 @@ const outlinedStyles = {
 };
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
-  const { title, variant = 'text', sx, size = 'medium', ...rest } = props;
+  const { title, variant = 'text', sx, size = 'medium', disabled, ...rest } = props;
   const styles = {
     ...sx,
     ...(variant === 'outlined' && outlinedStyles),
   };
-  return (
-    <Tooltip title={title}>
-      <MuiIconButton aria-label={title} sx={{ ...styles }} {...rest} ref={ref} size={size} />
-    </Tooltip>
+
+  const button = (
+    <MuiIconButton aria-label={title} sx={{ ...styles }} disabled={disabled} {...rest} ref={ref} size={size} />
   );
+
+  return <Tooltip title={title}>{disabled ? <span>{button}</span> : button}</Tooltip>;
 });