diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx index faaaa3f1d..f34928067 100644 --- a/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx +++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx @@ -116,13 +116,15 @@ function DivisionByGroupFields({ defaultValue={divideDiscussionIds} > {discussionTopics.map((topic) => ( - - {topic.name} - + topic.name ? ( + + {topic.name} + + ) : null ))} diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.jsx index 79b47f1b5..0c6210280 100644 --- a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.jsx +++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.jsx @@ -67,12 +67,11 @@ const DiscussionTopics = ({ intl }) => { )) }
- diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx index d6e892cdf..5736b221a 100644 --- a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx +++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx @@ -17,6 +17,8 @@ const TopicItem = ({ }) => { const [title, setTitle] = useState(name); const [showDeletePopup, setShowDeletePopup] = useState(false); + const [collapseIsOpen, setCollapseIsOpen] = useState(!name.length); + const { handleChange, handleBlur, @@ -49,7 +51,12 @@ const TopicItem = ({ const getHeading = (isOpen = false) => { let heading; if (isGeneralTopic && isOpen) { - heading = {intl.formatMessage(messages.renameGeneralTopic)}; + heading = ( +
+ {intl.formatMessage(messages.renameGeneralTopic)} +
{intl.formatMessage(messages.generalTopicHelp)}
+
+ ); } else if (isOpen) { heading = {intl.formatMessage(messages.configureAdditionalTopic)}; } else { @@ -59,8 +66,11 @@ const TopicItem = ({ }; const handleToggle = (isOpen) => { - if (!isOpen && !isInvalidTopicNameKey) { - setTitle(name); + if (!isOpen) { + const inputHasError = !name.length || isExistingName || isInvalidTopicNameKey; + setCollapseIsOpen(inputHasError); + } else { + setCollapseIsOpen(isOpen); } }; @@ -107,6 +117,7 @@ const TopicItem = ({ className="collapsible-card rounded mb-3 px-3 py-2" onToggle={handleToggle} defaultOpen={!title} + open={collapseIsOpen} id={id} >