fix(react-components): add wrapper to buttons to eliminate MUI toolti…

…p error (#2023)
remirror · Apr 25, 2023 · 157fd13 · 157fd13 · github-actions · Apr 25, 2023
1 parent a81b417
commit 157fd13
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 37 deletions.
diff --git a/.changeset/strong-bags-hunt.md b/.changeset/strong-bags-hunt.md
@@ -0,0 +1,5 @@
+---
+'@remirror/react-components': patch
+---
+
+Fixed MUI tooltip error for buttons
diff --git a/packages/remirror__react-components/src/buttons/command-button.tsx b/packages/remirror__react-components/src/buttons/command-button.tsx
@@ -1,4 +1,4 @@
-import { ToggleButton, ToggleButtonProps, Tooltip } from '@mui/material';
+import { Box, ToggleButton, ToggleButtonProps, Tooltip } from '@mui/material';
 import React, { FC, MouseEvent, MouseEventHandler, ReactNode, useCallback } from 'react';
 import { CoreIcon, isString } from '@remirror/core';
 
@@ -58,42 +58,46 @@ export const CommandButton: FC<CommandButtonProps> = ({
 
   return (
     <Tooltip title={`${tooltipText}${shortcutText}`}>
-      <ToggleButton
-        aria-label={labelText}
-        selected={active}
-        disabled={!enabled}
-        onMouseDown={handleMouseDown}
-        color='primary'
-        size='small'
-        sx={{
-          padding: '6px 12px',
-          '&.Mui-selected': {
-            backgroundColor: 'primary.main',
-            color: 'primary.contrastText',
-          },
-          '&.Mui-selected:hover': {
-            backgroundColor: 'primary.dark',
-            color: 'primary.contrastText',
-          },
-          '&:not(:first-of-type)': {
-            marginLeft: '-1px',
-            borderLeft: '1px solid transparent',
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0,
-          },
-          '&:not(:last-of-type)': {
-            borderTopRightRadius: 0,
-            borderBottomRightRadius: 0,
-          },
-        }}
-        {...rest}
-        value={commandName}
-        onChange={handleChange}
-      >
-        <CommandButtonBadge icon={commandOptions.icon}>
-          <CommandButtonIcon icon={icon ?? fallbackIcon} />
-        </CommandButtonBadge>
-      </ToggleButton>
+      {/*
+        This Box<span> wrapper fixes an MUI tooltip error when the button is disabled.
+      */}
+      <Box component='span' sx={{ '&:not(:first-of-type)': { marginLeft: '-1px' } }}>
+        <ToggleButton
+          aria-label={labelText}
+          selected={active}
+          disabled={!enabled}
+          onMouseDown={handleMouseDown}
+          color='primary'
+          size='small'
+          sx={{
+            padding: '6px 12px',
+            '&.Mui-selected': {
+              backgroundColor: 'primary.main',
+              color: 'primary.contrastText',
+            },
+            '&.Mui-selected:hover': {
+              backgroundColor: 'primary.dark',
+              color: 'primary.contrastText',
+            },
+            '&:not(:first-of-type)': {
+              borderLeft: '1px solid transparent',
+              borderTopLeftRadius: 0,
+              borderBottomLeftRadius: 0,
+            },
+            '&:not(:last-of-type)': {
+              borderTopRightRadius: 0,
+              borderBottomRightRadius: 0,
+            },
+          }}
+          {...rest}
+          value={commandName}
+          onChange={handleChange}
+        >
+          <CommandButtonBadge icon={commandOptions.icon}>
+            <CommandButtonIcon icon={icon ?? fallbackIcon} />
+          </CommandButtonBadge>
+        </ToggleButton>
+      </Box>
     </Tooltip>
   );
 };