diff --git a/src/components/QuerySequence.jsx b/src/components/QuerySequence.jsx index 542dbbc..aff4674 100644 --- a/src/components/QuerySequence.jsx +++ b/src/components/QuerySequence.jsx @@ -3,6 +3,7 @@ import loadWebComponent from "../utils/loadWebComponent"; import { useEffect, useRef, useState } from "react"; import exampleQuery from "../utils/exampleQuery"; import { useBoolean } from "react-use"; +import { has } from "lodash"; const errorBadgeStyle = { borderColor: "var(--vf-ui-color--red)", @@ -22,22 +23,23 @@ const QuerySequence = ({ onStageSequence }) => { loadWebComponent("textarea-sequence", TextareaSequence); const textAreaSequenceRef = useRef(); const [errors, setErrors] = useState({}); - const [hasTextEntered, setHasTextEntered] = useBoolean(false); + const [hasText, setHasText] = useBoolean(false); useEffect(() => { const handleErrorChange = (e) => { - setErrors(e.detail.errors); + if (!hasText) setErrors({}); + else setErrors(e.detail.errors); }; const currentTextArea = textAreaSequenceRef?.current; if (!currentTextArea) return; currentTextArea.addEventListener("error-change", handleErrorChange); - currentTextArea.quill.once("text-change", () => setHasTextEntered(true)); + currentTextArea.quill.once("text-change", () => setHasText(true)); return () => { if (currentTextArea) { currentTextArea.removeEventListener("error-change", handleErrorChange); } }; - }, [textAreaSequenceRef, setHasTextEntered]); + }, [hasText, textAreaSequenceRef, setHasText]); return (