[Feature Request]: EditInPlace, add an onblur function

[AustinGitHub]

The problem

Currently, when you click out of the text input, if you made any changes, it will persist that change instead of reverting back to the original text. User hasn't hit save yet, so it saves anyways for the onblur

Screen.Recording.2024-05-09.at.4.11.28.PM.mov

The solution

Add an onblur event action so user can add this to the component props and have their own way to decide what action it should do when on Blur/Clicking out of the edit will do.

Design link

No response

Links to other materials

No response

Owner/main maintainer(s)

IBM

Second/backup maintainer(s)

No response

Product/offering

No response

Business priority

Medium Priority = upcoming release but is not pressing

Code of Conduct

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

[thefirstartist]

@AustinGitHub
I think providing the onBlur event may not be the best solution for resolving this issue. If we allow users to keep the changes in the text field without clicking the 'Save' button, then it functions just like a regular text input field. In that case, users should simply use the regular text input field instead of this component.

Additionally, allowing the product team to choose what they want could lead to potential inconsistencies among our products.

[AustinGitHub]

Then can we have some way to indicate how the user left the input field whether it was from clicking out or from the save? Because some UI designs might want it to not save if user clicks out if they didn't hit the save button but there isn't a way to know what behavior was taken. Thanks!

[thefirstartist]

I think clicking outside of the text field is equivalent to giving up on the editing process. We discard the changes and return the data to its original state. The only way to retain the changes is by clicking the save button.

Most design systems use the 'X' button in this type of component to represent 'Clear.' Therefore, clicking outside the component cancels the action, while clicking the 'X' button inside the field clears the content. This approach tends to be more intuitive for users. It's okay if we want to use the 'X' for cancel, but clicking outside should definitely be Cancel.

[AustinGitHub]

So then we are in agreement then? I am a bit confused because this I think clicking outside of the text field is equivalent to giving up on the editing process. We discard the changes and return the data to its original state is currently not the case for this component. That is the main issue I am pointing at

[thefirstartist]

Yes, we are in agreement. What I was suggesting is not to provide the option for designer to have their own way to decide what action it should do to avoid inconsistencies. Clicking outside to cancel should be mandatory, not optional.