fix: clear field error in Editor after the field value is changed

[olegfedak]

Summary

There is a situation when several fields are highlighted as "required" at the same time. It looks like red frames inside of red frames when it comes to nested widgets. When you make changes to these fields, the errors do not disappear. It's confusing because it's not clear how many fields are left, especially when the page needs to be scrolled.

I expect that when the user changes the value of the field, the error disappears, no need to "signal" with red.

Changes that allow to achieve that

1. Modified the clearFieldErrors action:
   Created an action clearFieldErrors in the entries.js file that accepts uniqueFieldId as a parameter and returns an action object with type DRAFT_CLEAR_ERRORS and the passed uniqueFieldId.

2. Added DRAFT_CLEAR_ERRORS handling in the reducer:
   In the entryDraftReducer, added handling for the DRAFT_CLEAR_ERRORS action, which removes errors for a specific field using uniqueFieldId.

3. Updated the EditorControl component:
   In the EditorControl component, invoked clearFieldErrors when the field value changes, passing uniqueFieldId as an argument. This was done through props, using the mapDispatchToProps function that wraps clearFieldErrors in dispatch.

4. Ensured proper action dispatch in onChange:
   Added a call to clearFieldErrors in the onChange function to clear errors only for the specific field, using the passed uniqueFieldId.

By doing this, we ensured that errors are cleared only for the specific field when its value changes.

How it looks

2024-05-28.06.44.27-3.mp4

[olegfedak]

I noticed the fields were jumping when there is a field error. Just added a common flex div for the label and error line to correct the display.

2024-05-28.22.37.33.mov