From 9546e09e68fc0529a43086ca174140c6dfffdbfd Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Fri, 1 Nov 2024 16:03:52 +0100
Subject: [PATCH] fix: ensure "no flag" band always displays if no flags are
 present (#3899)

---
 .../components/Flow/components/Option.tsx      | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx
index f3b9e0128d..3043c3602a 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx
@@ -5,10 +5,10 @@ import { Link } from "react-navi";
 
 import { useStore } from "../../../lib/store";
 import { DataField } from "./DataField";
+import { FlagBand, NoFlagBand } from "./FlagBand";
 import Hanger from "./Hanger";
 import Node from "./Node";
 import { Thumbnail } from "./Thumbnail";
-import { FlagBand, NoFlagBand } from "./FlagBand";
 
 const Option: React.FC<any> = (props) => {
   const childNodes = useStore((state) => state.childNodesOf(props.id));
@@ -20,7 +20,9 @@ const Option: React.FC<any> = (props) => {
     // Question & Checklist Options set zero or many flag values under "data.flag"
     if (props.data?.flag) {
       if (Array.isArray(props.data?.flag)) {
-        flags = flatFlags.filter(({ value }) => props.data?.flag?.includes(value));
+        flags = flatFlags.filter(
+          ({ value }) => props.data?.flag?.includes(value),
+        );
       } else {
         flags = flatFlags.filter(({ value }) => props.data?.flag === value);
       }
@@ -46,9 +48,17 @@ const Option: React.FC<any> = (props) => {
             imageAltText={props.data.text}
           />
         )}
-        {flags ? flags.map((flag) => <FlagBand key={`${props.id}-${flag.value}`} flag={flag} />) : <NoFlagBand />}
+        {flags && flags.length > 0 ? (
+          flags.map((flag) => (
+            <FlagBand key={`${props.id}-${flag.value}`} flag={flag} />
+          ))
+        ) : (
+          <NoFlagBand />
+        )}
         <div className="text">{props.data.text}</div>
-        {props.data?.val && <DataField value={props.data.val} variant="child" />}
+        {props.data?.val && (
+          <DataField value={props.data.val} variant="child" />
+        )}
       </Link>
       <ol className="decisions">
         {childNodes.map((child: any) => (