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

HOVER ISSUE IS NOT PRESENT ON NON-MOBILE VIEW IN CHROME BROWSER

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

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues