fix web flow

src/screens/Writing/Goals.js

@@ -1,8 +1,8 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
 import ListSelection from "../../components/ListSelection/ListSelection";
-import { GOALS } from "../../data/data";
+import { GOALS, OTHER_OBJECTIVE_OPTION } from "../../data/data";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
@@ -19,9 +19,16 @@ const Goals = ({
   const selected = selectedProp ?? internalSelected;
   const setSelected = setSelectedProp ?? setInternalSelected;
 
+  const goalsOptions = useMemo(() => GOALS ?? [], []);
+
   const handleOtherObjectiveChange = (value) => {
     setOtherObjective?.(value);
-    if (value?.trim()?.length && selected != null) {
+    const trimmed = value?.trim() ?? "";
+    if (trimmed.length) {
+      if (selected !== OTHER_OBJECTIVE_OPTION) {
+        setSelected(OTHER_OBJECTIVE_OPTION);
+      }
+    } else if (selected === OTHER_OBJECTIVE_OPTION) {
       setSelected(null);
     }
   };
@@ -34,7 +41,7 @@ const Goals = ({
         <CreateLyricsHeader title="Quel est ton objectif ?" />
         <ItemContainer>
           <ListSelection
-            options={GOALS}
+            options={goalsOptions}
             variant="simple"
             selected={selected}
             setSelected={setSelected}