fix: preserve flowName

Author: kevinkim-ogp

packages/frontend/src/pages/Flows/components/CreateFlowModal.tsx

@@ -43,6 +43,7 @@ function FlowNameAndModeContent({
   isButtonDisabled,
   inputRef,
   loading,
+  flowName,
   handleInputChange,
   handleSubmit,
   setCreateMode,
@@ -52,6 +53,7 @@ function FlowNameAndModeContent({
   isButtonDisabled: boolean
   loading: boolean
   inputRef: React.RefObject<HTMLInputElement>
+  flowName: string
   handleInputChange: () => void
   handleSubmit: (event: FormEvent<HTMLFormElement>) => void
   setCreateMode: (mode: FLOW_CREATE_MODE) => void
@@ -71,6 +73,7 @@ function FlowNameAndModeContent({
                 ref={inputRef}
                 placeholder="For e.g. track event feedback, send customised replies"
                 onChange={handleInputChange}
+                value={flowName}
                 required
               />
             </FormControl>
@@ -142,6 +145,7 @@ export default function CreateFlowModal(props: CreateFlowModalProps) {
   // to minimise the re-renders to the max, didn't use react hook form cus overkill
   const handleInputChange = () => {
     const trimmedInputValue = inputRef.current?.value.trim() || ''
+    setFlowName(trimmedInputValue)
     if (trimmedInputValue !== '') {
       if (isButtonDisabled) {
         setIsButtonDisabled(false)
@@ -232,6 +236,7 @@ export default function CreateFlowModal(props: CreateFlowModalProps) {
             isButtonDisabled={isButtonDisabled}
             loading={loading}
             inputRef={inputRef}
+            flowName={flowName}
             handleInputChange={handleInputChange}
             handleSubmit={handleSubmit}
             setCreateMode={setCreateMode}