New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tooltips on buttons persist when the button is disabled #4066
Comments
you can check this in the document It is related to the disabling button not triggering the import { MantineProvider, Tooltip, Button } from "@mantine/core";
import { useState } from "react";
export default function App() {
const [disabled, setDisabled] = useState(false);
return (
<MantineProvider withGlobalStyles withNormalizeCSS>
<Tooltip label="This is a tooltip">
{disabled ? (
<Button
data-disabled
sx={{ "&[data-disabled]": { pointerEvents: "all" } }}
onClick={(event) => event.preventDefault()}
>
Click me
</Button>
) : (
<Button
onClick={(event) => {
setDisabled(!disabled);
}}
>
Click me
</Button>
)}
</Tooltip>
</MantineProvider>
);
} |
Going around the docs, I haven't found those yet (only mouse event). but I think we can do something around js to use the event |
the alternative solution, using import { MantineProvider, Tooltip, Button, Divider } from "@mantine/core";
import { useState } from "react";
export default function App() {
const [disabled, setDisabled] = useState(false);
const [disabledToolTip, setDisabledToolTip] = useState(false);
const handlePointerEnter = () => {
setDisabledToolTip(true);
};
const handlePointerLeave = () => {
setDisabledToolTip(false);
};
return (
<MantineProvider withGlobalStyles withNormalizeCSS>
<Tooltip label="This is a tooltip">
<Button disabled={disabled} onClick={() => setDisabled(!disabled)}>
Click me
</Button>
</Tooltip>
<Divider style={{ marginTop: "10px" }} />
<Tooltip label="This is a tooltip" opened={disabledToolTip}>
<Button
onPointerEnter={handlePointerEnter}
onPointerLeave={handlePointerLeave}
disabled={disabled}
onClick={() => setDisabled(!disabled)}
style={{ marginTop: "10px" }}
>
Click me onPointerDown!
</Button>
</Tooltip>
</MantineProvider>
);
}
|
It is not planned to change this behavior, see – floating-ui/floating-ui#1865 (comment) |
What package has an issue
@mantine/core
Describe the bug
Consider the following code.
If you move the cursor over the
Click me
button, the tooltip appears. Then, if you click the button, the button becomes disabled but the tooltip persists.What version of @mantine/hooks page do you have in package.json?
^6.0.7
If possible, please include a link to a codesandbox with the reproduced problem
https://codesandbox.io/s/staging-rain-bcl8dk?file=/src/App.tsx
Do you know how to fix the issue
No
Are you willing to participate in fixing this issue and create a pull request with the fix
Yes
Possible fix
No response
The text was updated successfully, but these errors were encountered: