Open ofovweewere opened 3 weeks ago
Hi, could you reproduce the issue in a stackblitz, and post the link back here?
@tay1orjones I've updated the issue to include the reproduction on stackblitz https://stackblitz.com/edit/github-vr9jmj?file=src%2Findex.scss,src%2FApp.jsx&preset=node=
Package
Carbon for IBM Products
Description
I am currently using the @carbon/react Button of kind 'ghost', and have the below issue. Please treat as urgent.
Currently, the when the Ghost Button is 'touched' in mobile view with an onclick action to disable it, it transitions correctly into the disabled state. However, if it's enabled afterwards, and there's been no other click on the html document, it is enabled but shows a 'Hovered styling background'.
Below is a demo of the issue:
HOVER ISSUE IS PRESENT ON MOBILE VIEW IN CHROME BROWSER
https://github.com/user-attachments/assets/5a323467-b1fa-4416-b43c-4096bdb05f9d
HOVER ISSUE IS NOT PRESENT ON NON-MOBILE VIEW IN CHROME BROWSER
https://github.com/user-attachments/assets/9762e398-b554-4cc0-9375-7f6faf1c35f5
Component(s) impacted
@Carbon/react Button.
Here is a sample react code: import "./styles.css"; import React from "react"; import { Button } from "@carbon/react"; import { CaretLeft, CaretRight } from "@carbon/icons-react"; export default function App() { const [enableButton, setEnableButton] = React.useState(true); return (
); }
Browser
Chrome
@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version
"@carbon/react": "1.61.0"
Suggested Severity
Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.
Product/offering
New AI Product
CodeSandbox or Stackblitz example
https://stackblitz.com/edit/github-vr9jmj?file=src%2Findex.scss,src%2FApp.jsx&preset=node=
Steps to reproduce the issue (if applicable)
Please see above
Release date (if applicable)
No response
Code of Conduct