This is an automated email from the ASF dual-hosted git repository. kaxilnaik pushed a commit to branch v3-1-test in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 5c45866b78e9475a1747ea866d0b7b80a6cbdd7b Author: yangyulely <[email protected]> AuthorDate: Sat Sep 27 04:40:30 2025 +0800 UI: Fix note modal does not change markdown text after change (#56092) * UI: Fix note modal does not change markdown text after change * Use useRef instead of useEffect (cherry picked from commit 7bcff784aa6e728d2990664192dc0ee37d7fde79) --- .../ui/src/components/EditableMarkdownArea.tsx | 78 +++++++++++++--------- 1 file changed, 48 insertions(+), 30 deletions(-) diff --git a/airflow-core/src/airflow/ui/src/components/EditableMarkdownArea.tsx b/airflow-core/src/airflow/ui/src/components/EditableMarkdownArea.tsx index a77bfcd617e..1b8c3c7d649 100644 --- a/airflow-core/src/airflow/ui/src/components/EditableMarkdownArea.tsx +++ b/airflow-core/src/airflow/ui/src/components/EditableMarkdownArea.tsx @@ -18,6 +18,7 @@ */ import { Box, VStack, Editable, Text } from "@chakra-ui/react"; import type { ChangeEvent } from "react"; +import { useState, useRef } from "react"; import ReactMarkdown from "./ReactMarkdown"; @@ -31,36 +32,53 @@ const EditableMarkdownArea = ({ readonly onBlur?: () => void; readonly placeholder?: string | null; readonly setMdContent: (value: string) => void; -}) => ( - <Box mt={4} px={4} width="100%"> - <Editable.Root - onBlur={onBlur} - onChange={(event: ChangeEvent<HTMLInputElement>) => setMdContent(event.target.value)} - value={mdContent ?? ""} - > - <Editable.Preview - _hover={{ backgroundColor: "transparent" }} - alignItems="flex-start" - as={VStack} - gap="0" - overflowY="auto" - width="100%" +}) => { + const [currentValue, setCurrentValue] = useState(mdContent ?? ""); + const prevMdContentRef = useRef(mdContent); + + // Sync local state with prop changes + if (mdContent !== prevMdContentRef.current) { + setCurrentValue(mdContent ?? ""); + prevMdContentRef.current = mdContent; + } + + return ( + <Box mt={4} px={4} width="100%"> + <Editable.Root + onBlur={onBlur} + onChange={(event: ChangeEvent<HTMLInputElement>) => { + const { value } = event.target; + + setCurrentValue(value); + setMdContent(value); + }} + value={currentValue} > - {Boolean(mdContent) ? ( - <ReactMarkdown>{mdContent}</ReactMarkdown> - ) : ( - <Text color="fg.subtle">{placeholder}</Text> - )} - </Editable.Preview> - <Editable.Textarea - data-testid="markdown-input" - height="200px" - overflowY="auto" - placeholder={placeholder ?? ""} - resize="none" - /> - </Editable.Root> - </Box> -); + <Editable.Preview + _hover={{ backgroundColor: "transparent" }} + alignItems="flex-start" + as={VStack} + gap="0" + height="200px" + overflowY="auto" + width="100%" + > + {Boolean(currentValue) ? ( + <ReactMarkdown>{currentValue}</ReactMarkdown> + ) : ( + <Text color="fg.subtle">{placeholder}</Text> + )} + </Editable.Preview> + <Editable.Textarea + data-testid="markdown-input" + height="200px" + overflowY="auto" + placeholder={placeholder ?? ""} + resize="none" + /> + </Editable.Root> + </Box> + ); +}; export default EditableMarkdownArea;
