decap-cms
decap-cms copied to clipboard
fix: clear field error in Editor after the field value is changed
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
-
Modified the
clearFieldErrorsaction: Created an actionclearFieldErrorsin theentries.jsfile that acceptsuniqueFieldIdas a parameter and returns an action object with typeDRAFT_CLEAR_ERRORSand the passeduniqueFieldId. -
Added
DRAFT_CLEAR_ERRORShandling in the reducer: In theentryDraftReducer, added handling for theDRAFT_CLEAR_ERRORSaction, which removes errors for a specific field usinguniqueFieldId. -
Updated the
EditorControlcomponent: In theEditorControlcomponent, invokedclearFieldErrorswhen the field value changes, passinguniqueFieldIdas an argument. This was done through props, using themapDispatchToPropsfunction that wrapsclearFieldErrorsindispatch. -
Ensured proper action
dispatchin onChange: Added a call toclearFieldErrorsin theonChangefunction to clear errors only for the specific field, using the passeduniqueFieldId.
By doing this, we ensured that errors are cleared only for the specific field when its value changes.
How it looks
https://github.com/decaporg/decap-cms/assets/5526547/656b82c3-c80b-427f-903e-1b36b1e44dc7
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.
https://github.com/decaporg/decap-cms/assets/5526547/45e47a4a-2cd4-4972-9deb-10026088e769
@olegfedak is this PR still a work in progress?
@olegfedak is this PR still a work in progress?
Well, it's ready but strugled on the tests