mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-02 03:57:52 +00:00
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:
@@ -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({
|
||||
|
||||
Reference in New Issue
Block a user