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) => (
-
-
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}
>