diff --git a/frontend/components/admin/mentions/MentionsOverviewList.tsx b/frontend/components/admin/mentions/MentionsOverviewList.tsx index d88ddc57a..0f57d2036 100644 --- a/frontend/components/admin/mentions/MentionsOverviewList.tsx +++ b/frontend/components/admin/mentions/MentionsOverviewList.tsx @@ -74,14 +74,17 @@ export default function MentionsOverviewList({list, onUpdate}: { list: MentionIt ) })} - setModalOpen(false)} - onSubmit={({data}) => {updateMention(data)}} - /> + {modalOpen ? + setModalOpen(false)} + onSubmit={({data}) => {updateMention(data)}} + /> + : null + } ) }; diff --git a/frontend/components/mention/EditMentionModal.tsx b/frontend/components/mention/EditMentionModal.tsx index 360c240f4..9370a5a82 100644 --- a/frontend/components/mention/EditMentionModal.tsx +++ b/frontend/components/mention/EditMentionModal.tsx @@ -8,7 +8,6 @@ // // SPDX-License-Identifier: Apache-2.0 -import {useEffect} from 'react' import Button from '@mui/material/Button' import Dialog from '@mui/material/Dialog' import DialogActions from '@mui/material/DialogActions' @@ -16,7 +15,6 @@ import DialogContent from '@mui/material/DialogContent' import DialogTitle from '@mui/material/DialogTitle' import useMediaQuery from '@mui/material/useMediaQuery' import Alert from '@mui/material/Alert' -// import AlertTitle from '@mui/material/AlertTitle' import {useForm} from 'react-hook-form' @@ -56,15 +54,20 @@ export default function EditMentionModal({open, onCancel, onSubmit, item, pos, t const isAdmin = user?.role === 'rsd_admin' const smallScreen = useMediaQuery('(max-width:600px)') - const {handleSubmit, watch, formState, reset, control, register} = useForm({ + const {handleSubmit, watch, formState, reset, control, register, clearErrors} = useForm({ mode: 'onChange', defaultValues: { ...item } }) // extract form states - const {isValid, isDirty} = formState + const {isValid, isDirty, errors} = formState const formData = watch() + // need to clear image_url error manually after the type change + // and dynamic rules change from required to not required + if (formData.mention_type!=='highlight' && errors?.hasOwnProperty('image_url')){ + clearErrors('image_url') + } // console.group('EditMentionModal') // console.log('isValid...', isValid) @@ -73,13 +76,6 @@ export default function EditMentionModal({open, onCancel, onSubmit, item, pos, t // console.log('formData...', formData) // console.groupEnd() - useEffect(() => { - if (item) { - //(re)set form to item values - reset(item) - } - }, [item, reset]) - function handleCancel(reason: any) { if (reason === 'backdropClick') { // we do not cancel on backdrop click @@ -264,9 +260,16 @@ export default function EditMentionModal({open, onCancel, onSubmit, item, pos, t defaultValue: formData?.image_url, helperTextMessage: config.image_url.help, helperTextCnt: `${formData?.image_url?.length || 0}/${config.image_url.validation.maxLength.value}`, + // if type not highlight we remove required flag and disable input disabled: formData?.mention_type !== 'highlight' }} - rules={formData?.mention_type === 'highlight' ? config.image_url.validation : {}} + rules={formData?.mention_type === 'highlight' ? + config.image_url.validation : + { + // if type not highlight we remove required flag and disable input + required: false + } + } />
diff --git a/frontend/components/mention/MentionEditSection.tsx b/frontend/components/mention/MentionEditSection.tsx index 77d9dcd81..0a2c73f3a 100644 --- a/frontend/components/mention/MentionEditSection.tsx +++ b/frontend/components/mention/MentionEditSection.tsx @@ -85,35 +85,41 @@ export default function MentionEditSection() { return ( <> {/* modal as external part of the section */} - onSubmit(props.data)} - /> - Are you sure you want to remove - - ?

- } - onCancel={() => { - // cancel confirm by removing item - confirmDelete() - }} - onDelete={() => { - if (confirmModal?.item) onDelete(confirmModal?.item) - // hide modal by removing confirm item - confirmDelete() - }} - /> + {editModal.open ? + onSubmit(props.data)} + /> + : null + }{ + confirmModal.open ? + Are you sure you want to remove + + ?

+ } + onCancel={() => { + // cancel confirm by removing item + confirmDelete() + }} + onDelete={() => { + if (confirmModal?.item) onDelete(confirmModal?.item) + // hide modal by removing confirm item + confirmDelete() + }} + /> + : null + } ) }