diff --git a/docs/pages/experiments/material/button-select.tsx b/docs/pages/experiments/material/button-select.tsx
index 3f363bad6dc1fe..654964f9c72db8 100644
--- a/docs/pages/experiments/material/button-select.tsx
+++ b/docs/pages/experiments/material/button-select.tsx
@@ -1,6 +1,7 @@
/* eslint-disable no-console */
import * as React from 'react';
import {
+ CssBaseline,
FormControlLabel,
Button as MaterialUIButton,
Experimental_CssVarsProvider as MaterialUICssVarsProvider,
@@ -19,71 +20,73 @@ export default function App() {
const [disabled, setDisabled] = React.useState(false);
return (
-
-
-
- setDisabled((prev) => !prev)} />}
- label="Toggle disabled"
- />
-
-
-
-
- Native button
-
-
-
- Native anchor
- {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-
- Anchor
-
-
-
- Native div
- Button
-
+
+
+
+
+ setDisabled((prev) => !prev)} />}
+ label="Toggle disabled"
+ />
-
-
-
- Material UI button
-
- Button
-
-
-
- Material UI button link
-
- Button
-
+
+
+
+ Native button
+
+
+
+ Native anchor
+ {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+
+ Anchor
+
+
+
+ Native div
+ Button
+
-
- Material UI button as div
-
- Button
-
+
+
+
+ Material UI button
+
+ Button
+
+
+
+ Material UI button link
+
+ Button
+
+
+
+ Material UI button as div
+
+ Button
+
+
-
-
+
+
);
}
diff --git a/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx b/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx
index 6fc4b70df50541..a72bc6b1c45223 100644
--- a/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx
+++ b/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx
@@ -42,7 +42,7 @@ export const ButtonBaseRoot = styled('button', {
slot: 'Root',
shouldForwardProp: (prop) => rootShouldForwardProp(prop) && prop !== 'touchRippleRef',
overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: ButtonBaseOwnerState }>(({ ownerState }) => ({
+})({
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
@@ -57,7 +57,11 @@ export const ButtonBaseRoot = styled('button', {
borderRadius: 0,
padding: 0, // Remove the padding in Firefox
cursor: 'pointer',
- '&:active': {
+ // userSelect: 'text' to overcome Firefox's default behavior
+ userSelect: 'text',
+ // only apply userSelect: none when focused so
+ // selection from dragging from outside the element is possible
+ '&:focus': {
userSelect: 'none',
},
verticalAlign: 'middle',
@@ -70,15 +74,13 @@ export const ButtonBaseRoot = styled('button', {
borderStyle: 'none', // Remove Firefox dotted outline.
},
[`&.${buttonBaseClasses.disabled}`]: {
- ...(!ownerState.isButton && {
- pointerEvents: 'none', // Disable link interactions
- }),
+ pointerEvents: 'none', // Disable interactions
cursor: 'default',
},
'@media print': {
colorAdjust: 'exact',
},
-})) as React.ElementType;
+}) as React.ElementType;
/**
* `ButtonBase` contains as few styles as possible.
@@ -160,7 +162,6 @@ const ButtonBase = React.forwardRef(function ButtonBase<
disableTouchRipple,
focusVisible,
active,
- isButton: ComponentProp === 'button',
};
const classes = useUtilityClasses(ownerState);
diff --git a/packages/mui-material-next/src/ButtonBase/ButtonBase.types.ts b/packages/mui-material-next/src/ButtonBase/ButtonBase.types.ts
index 679fbfe4f5100b..1ed0777f27ecff 100644
--- a/packages/mui-material-next/src/ButtonBase/ButtonBase.types.ts
+++ b/packages/mui-material-next/src/ButtonBase/ButtonBase.types.ts
@@ -126,10 +126,6 @@ export type ButtonBaseProps<
};
export interface ButtonBaseOwnerState extends ButtonBaseProps {
- /**
- * If `true`, the DOM element is button.
- */
- isButton: boolean;
/**
* If `true`, the button is active.
*/
diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.js b/packages/mui-material/src/ButtonBase/ButtonBase.js
index b3a04047697f15..716d19ebbdb390 100644
--- a/packages/mui-material/src/ButtonBase/ButtonBase.js
+++ b/packages/mui-material/src/ButtonBase/ButtonBase.js
@@ -32,7 +32,7 @@ export const ButtonBaseRoot = styled('button', {
name: 'MuiButtonBase',
slot: 'Root',
overridesResolver: (props, styles) => styles.root,
-})(({ ownerState }) => ({
+})({
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
@@ -53,22 +53,24 @@ export const ButtonBaseRoot = styled('button', {
textDecoration: 'none',
// So we take precedent over the style of a native element.
color: 'inherit',
- '&:active': {
+ // userSelect: 'text' to overcome Firefox's default behavior
+ userSelect: 'text',
+ // Only apply userSelect: none when focused so
+ // selection from dragging from outside the element is possible
+ '&:focus': {
userSelect: 'none',
},
'&::-moz-focus-inner': {
borderStyle: 'none', // Remove Firefox dotted outline.
},
[`&.${buttonBaseClasses.disabled}`]: {
+ pointerEvents: 'none', // Disable interactions
cursor: 'default',
- ...(!ownerState.isButton && {
- pointerEvents: 'none', // Disable link interactions
- }),
},
'@media print': {
colorAdjust: 'exact',
},
-}));
+});
/**
* `ButtonBase` contains as few styles as possible.
@@ -332,7 +334,6 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) {
...props,
centerRipple,
component,
- isButton: ComponentProp === 'button',
disabled,
disableRipple,
disableTouchRipple,
diff --git a/packages/mui-material/src/Link/Link.js b/packages/mui-material/src/Link/Link.js
index b44210b88dafc4..1dec7fcec1c262 100644
--- a/packages/mui-material/src/Link/Link.js
+++ b/packages/mui-material/src/Link/Link.js
@@ -60,7 +60,11 @@ const LinkRoot = styled(Typography, {
textDecorationColor: 'inherit',
},
}),
- '&:active': {
+ // userSelect: 'text' to overcome Firefox's default behavior
+ userSelect: 'text',
+ // Only apply userSelect: none when focused so
+ // selection from dragging from outside the element is possible
+ '&:focus': {
userSelect: 'none',
},
// Same reset as ButtonBase.root