diff --git a/libs/application/ui-shell/src/components/FormStepper.tsx b/libs/application/ui-shell/src/components/FormStepper.tsx
index 0978da8f6af1..5029dac268a2 100644
--- a/libs/application/ui-shell/src/components/FormStepper.tsx
+++ b/libs/application/ui-shell/src/components/FormStepper.tsx
@@ -53,20 +53,25 @@ const FormStepper = ({
childrenToParse.push(child)
})
- return childrenToParse.map((child, i) => {
- const isChildActive =
- isParentActive && currentScreen.subSectionIndex === i
-
- return (
-
- {formatText(child.title, application, formatMessage)}
-
- )
- })
+ return childrenToParse
+ .map((child, i) => {
+ const isChildActive =
+ isParentActive && currentScreen.subSectionIndex === i
+ const childText = formatText(child.title, application, formatMessage)
+
+ if (!childText) return null
+
+ return (
+
+ {childText}
+
+ )
+ })
+ .filter(Boolean as unknown as ExcludesFalse)
}
const stepperTitle = isMobile ? null : (
@@ -85,23 +90,33 @@ const FormStepper = ({
sections &&
[
stepperTitle,
- ...sections.map((section, i) => (
- 1
- ? parseSubsections(
- section.children,
- currentScreen.sectionIndex === i,
- )
- : undefined
- }
- isComplete={currentScreen.sectionIndex > i}
- />
- )),
+ ...sections.map((section, i) => {
+ const sectionTitle = formatText(
+ section.title,
+ application,
+ formatMessage,
+ )
+
+ if (!sectionTitle) return null
+
+ return (
+ 1
+ ? parseSubsections(
+ section.children,
+ currentScreen.sectionIndex === i,
+ )
+ : undefined
+ }
+ isComplete={currentScreen.sectionIndex > i}
+ />
+ )
+ }),
].filter(Boolean as unknown as ExcludesFalse)
}
/>