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
+ }
>
)
}