[Bug]: Onfocus of Combo box it is showing red and blue border both when field is invalid, It should show only blue when field is invalid and it is on focus

[anoopjaiswal903]

Package

@carbon/react

Browser

Chrome, Safari, Firefox, Edge

Package version

1.45.0

React version

18

Description

On the focus of Combo box it is showing red and blue border both when the field is invalid, It should show only blue when the field is invalid and it is on focus.

Expected behavior - 1 -When the field is invalid and not focused, the border should be red 2 - When the field is invalid and focused, the border should be blue

Current behavior- When the field is invalid and focused, two borders are coming, red and blue.

NOTE - The above-expected feature works fine for text input and dropdown, But not for the combo box.

Reproduction/example

https://githubziqwj8-1k1x--5173--dc4d7514.local-credentialless.webcontainer.io

Steps to reproduce

step1 - Set invalid props true in the combo box step2 - Focus or click on the combo box to search step3 - It will show an error border (red) and active border(blue) together

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

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

[Gururajj77]

Hey @anoopjaiswal903 , thanks for bringing this issue into light! could you please reproduce in this the sandboxes here? the link you provided seems to be broken.

[anoopjaiswal903]

Hi @Gururajj77 kindly follow the below link https://stackblitz.com/edit/github-axcnwb?file=src%2FApp.jsx

[anoopjaiswal903]

Hi @Gururajj77 In case the link got broken again, kindly follow the below code import { ComboBox } from '@carbon/react';

_export default function App() { return (

);_

Issue - When fields have an error (invalid ={true}) and if focusing on a field, two input field borders are showing (red and blue) .