EditInPlace keeps focused state when invalid but field is not actually focused on

[David-Yuen]

Package

Carbon for IBM Products

Description

Normally, if you focus on the EditInPlace component to give input, the state of the component gets focused by adding class c4p--edit-in-place--focused, and when you click away (remove focus or focus on another component), the focused state is removed.

But when the component has invalid input and you click away, the EditInPlace component stays focused even when it's not actually focused anymore. The focused state should be removed when component is no longer focused on, regardless of the invalid state.

Component(s) impacted

EditInPlace component

Browser

Chrome

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

2.46.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

IBM Cloud Data Replication

CodeSandbox or Stackblitz example

https://codesandbox.io/p/devbox/serene-wave-nlgmk5

Steps to reproduce the issue (if applicable)

Reproduced here: https://codesandbox.io/p/devbox/serene-wave-nlgmk5

Normal scenario

Not focused

Focused

^Clicking on EditInPlace component to edit, component is focused and c4p--edit-in-place--focused class is added.

Remove focus

Clicking away from EditInPlace component to remove focus, and c4p--edit-in-place--focused class is removed.

Bug scenario

Not focused
Starting with same scenario above with just "abc" input.. not focused on EditInPlace component.

Focused and create invalid scenario (add numbers)

^Clickin on EditInPlace component to edit, which focuses on the component and adds c4p--edit-in-place--focused class.
Then added "1" to input to go into invalid state. This additionally adds c4p--edit-in-place--invalid class.. Both classes exist now.

Remove focus

First, hit the Enter key to submit/save the changes (keeping the invalid value).
At this time, technically you are no longer focused on the EditInPlace component.. but click somewhere else anyways.
The component keeps both invalid and focused state, but really it's not focused anymore.
This screenshot seems like i am still focused on the EditInPlace component, but i'm not.. If i had other components on the page, i could be clicking and typing in other fields and this would still look like this.

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

[AlexanderMelox]

@David-Yuen Taking a look at this, I noticed in our build and locally I can't replicate the issue but i do notice it in Codesandbox

https://ibm-products.carbondesignsystem.com/?path=/story/ibm-products-patterns-edit-and-update-editinplace--invalid&globals=viewport:basic

[AlexanderMelox]

Okay found a fix for this! That was easy 😅