Closed olegfedak closed 1 week ago
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
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
clearFieldErrors
action: Created an actionclearFieldErrors
in theentries.js
file that acceptsuniqueFieldId
as a parameter and returns an action object with typeDRAFT_CLEAR_ERRORS
and the passeduniqueFieldId
.Added
DRAFT_CLEAR_ERRORS
handling in the reducer: In theentryDraftReducer
, added handling for theDRAFT_CLEAR_ERRORS
action, which removes errors for a specific field usinguniqueFieldId
.Updated the
EditorControl
component: In theEditorControl
component, invokedclearFieldErrors
when the field value changes, passinguniqueFieldId
as an argument. This was done through props, using themapDispatchToProps
function that wrapsclearFieldErrors
indispatch
.Ensured proper action
dispatch
in onChange: Added a call toclearFieldErrors
in theonChange
function 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