fix: Contact name editing did not allow spaces (#11931)

# Pull Request Template

## Description

This PR fixes an issue where editing a contact name from the “Contacts”
tab would not allow spaces in the First or Last Name fields — the space
would disappear immediately after typing.
This issue did not occur in the sidebar editor or when adding a new
contact.



**Cause:** The form had a deep watcher on `contactData`, which triggered
`prepareStateBasedOnProps()` on every nested change. This caused the
form state to reset.

**Solution:** Replaced the deep watcher with a shallow watcher that only
watches `contactData.id`.
This fires once on mount and whenever a new contact is selected,
avoiding unnecessary re-hydration while the user is typing.


Fixes https://github.com/chatwoot/chatwoot/issues/11922 ,
CW-[4623](https://linear.app/chatwoot/issue/CW-4623/inconsistent-name-field-validation-when-editing-contacts-from-contacts)

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

### Screencast


https://github.com/user-attachments/assets/e088f627-d7b1-4d67-85eb-58911ac0c012



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
This commit is contained in:
Sivin Varghese
2025-07-14 10:27:50 +05:30
committed by GitHub
parent 18eb53acf4
commit 661326ae51

View File

@@ -218,10 +218,13 @@ const resetForm = () => {
Object.assign(state, defaultState);
};
watch(() => props.contactData, prepareStateBasedOnProps, {
immediate: true,
deep: true,
});
watch(
() => props.contactData?.id,
id => {
if (id) prepareStateBasedOnProps();
},
{ immediate: true }
);
// Expose state to parent component for avatar upload
defineExpose({