From 43feff0009db5cf32a61625ca1f6ce0c4bd657a4 Mon Sep 17 00:00:00 2001
From: Dhruwang <dhruwangjariwala18@gmail.com>
Date: Mon, 11 May 2026 16:36:45 +0530
Subject: [PATCH] fix(charts): inline error styling for empty chart-name on
 submit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switch from the native browser tooltip to the in-app inline error pattern:
red Label, isInvalid Input border, and helper text below the field. The
onInvalid handler suppresses the default tooltip and scrolls + focuses the
field via event.currentTarget — no ref needed. Typing clears the error.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../charts/components/create-chart-view.tsx   | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/apps/web/modules/ee/analysis/charts/components/create-chart-view.tsx b/apps/web/modules/ee/analysis/charts/components/create-chart-view.tsx
index 7504d4bc8a..596a53ac0b 100644
--- a/apps/web/modules/ee/analysis/charts/components/create-chart-view.tsx
+++ b/apps/web/modules/ee/analysis/charts/components/create-chart-view.tsx
@@ -1,8 +1,9 @@
 "use client";
 
 import Link from "next/link";
-import { useEffect, useRef } from "react";
+import { type FormEvent, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { cn } from "@/lib/cn";
 import { AdvancedChartBuilder } from "@/modules/ee/analysis/charts/components/advanced-chart-builder";
 import { AIQuerySection } from "@/modules/ee/analysis/charts/components/ai-query-section";
 import { ChartDialogFooter } from "@/modules/ee/analysis/charts/components/chart-dialog-footer";
@@ -80,6 +81,7 @@ export function CreateChartView({
 
   const chartPreviewRef = useRef<HTMLDivElement>(null);
   const CREATE_CHART_FORM_ID = "create-chart-form";
+  const [chartNameError, setChartNameError] = useState<string | null>(null);
 
   useEffect(() => {
     if (chartData) {
@@ -87,8 +89,9 @@ export function CreateChartView({
     }
   }, [chartData]);
 
-  const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  const handleFormSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
+    setChartNameError(null);
     return handleSaveChart();
   };
 
@@ -143,24 +146,29 @@ export function CreateChartView({
             {hasSelectedDirectory ? (
               <>
                 <form id={CREATE_CHART_FORM_ID} onSubmit={handleFormSubmit} className="space-y-2">
-                  <Label htmlFor="create-chart-name">{t("workspace.analysis.charts.chart_name")}</Label>
+                  <Label htmlFor="create-chart-name" className={cn(chartNameError && "text-red-500")}>
+                    {t("workspace.analysis.charts.chart_name")}
+                  </Label>
                   <Input
                     id="create-chart-name"
                     value={chartName}
                     onChange={(event) => {
-                      // Clear any prior custom validity once the user starts typing so the form can submit again.
-                      event.target.setCustomValidity("");
+                      if (chartNameError) setChartNameError(null);
                       setChartName(event.target.value);
                     }}
                     onInvalid={(event) => {
-                      event.currentTarget.setCustomValidity(
-                        t("workspace.analysis.charts.please_enter_chart_name")
-                      );
+                      // Suppress the browser tooltip and render our inline message instead.
+                      event.preventDefault();
+                      event.currentTarget.scrollIntoView({ behavior: "smooth", block: "center" });
+                      event.currentTarget.focus();
+                      setChartNameError(t("workspace.analysis.charts.please_enter_chart_name"));
                     }}
                     placeholder={t("workspace.analysis.charts.chart_name_placeholder")}
                     maxLength={255}
                     required
+                    isInvalid={!!chartNameError}
                   />
+                  {chartNameError && <p className="text-sm text-red-500">{chartNameError}</p>}
                 </form>
 
                 {!isEditing && (