diff --git a/src/components/elements/input.tsx b/src/components/elements/input.tsx index c9965706..ae0ef289 100644 --- a/src/components/elements/input.tsx +++ b/src/components/elements/input.tsx @@ -1,8 +1,11 @@ -import { forwardRef, useEffect } from "react"; +import { forwardRef, useEffect, useState } from "react"; +import cn from "classnames"; +import { useTranslations } from "next-intl"; interface InputProps { placeholder: string; value?: string | number; + useTooltip?: boolean; name: string; type: string; onChange?: (event: React.ChangeEvent) => void; @@ -25,10 +28,13 @@ const Input = forwardRef( className = "", defaultValue, focus = false, + useTooltip = false, ...rest }: InputProps, forwardedRef, ) => { + const t = useTranslations("input"); + const [isFocused, setIsFocused] = useState(false); const handleRef = (instance: HTMLInputElement | null) => { if (typeof forwardedRef === "function") { forwardedRef(instance); @@ -36,7 +42,16 @@ const Input = forwardRef( forwardedRef.current = instance; } }; + const handleFocus = () => { + setIsFocused(true); + }; + const handleBlur = (event: React.ChangeEvent) => { + setIsFocused(false); + if (onBlur) { + onBlur(event); + } + }; useEffect(() => { if (focus && forwardedRef && "current" in forwardedRef) { forwardedRef.current?.focus(); @@ -61,16 +76,22 @@ const Input = forwardRef( }, [defaultValue, onChange, forwardedRef]); return ( - +
+ +
); }, ); diff --git a/src/components/modules/anotation.tsx b/src/components/modules/anotation.tsx index d375563c..99ea839f 100644 --- a/src/components/modules/anotation.tsx +++ b/src/components/modules/anotation.tsx @@ -100,6 +100,7 @@ const Anotation = ({ nwid, nodeid }: IProps) => {
{ - const t = useTranslations("networkById"); - const client = useQueryClient(); - const { query } = useRouter(); + const t = useTranslations(); + const textareaRef = React.useRef(null); // <-- Create a ref for the textarea const [state, setState] = useState({ toggleDescriptionInput: false, description: "", }); + useEffect(() => { + if (state.toggleDescriptionInput && textareaRef.current) { + textareaRef.current.focus(); // <-- Programmatically set focus when toggleDescriptionInput is true + } + }, [state.toggleDescriptionInput]); + + const [isTextareaFocused, setTextareaFocused] = useState(false); + + const handleTextareaFocus = () => { + setTextareaFocused(true); + + if (textareaRef.current) { + const length = textareaRef.current.value.length; + textareaRef.current.selectionStart = length; + textareaRef.current.selectionEnd = length; + } + }; + + const handleTextareaBlur = () => { + setTextareaFocused(false); + }; + const client = useQueryClient(); + const { query } = useRouter(); + const { data: networkById, isLoading: loadingNetwork, @@ -101,8 +125,8 @@ const NetworkDescription = ({ central = false }: IProp) => { {errorNetwork.message}
    -
  • {t("errorSteps.step1")}
  • -
  • {t("errorSteps.step2")}
  • +
  • {t("networkById.errorSteps.step1")}
  • +
  • {t("networkById.errorSteps.step2")}
); @@ -137,44 +161,52 @@ const NetworkDescription = ({ central = false }: IProp) => { className="cursor-pointer border-l-4 border-primary p-2 leading-snug" style={{ caretColor: "transparent" }} > - {t("addDescription")} + {t("networkById.addDescription")} ) ) : ( - + { + onSuccess: () => { + void refetchNetwork(); + setState({ + ...state, + toggleDescriptionInput: !state.toggleDescriptionInput, + }); + }, + }, + ); + } + }} + > + )} diff --git a/src/components/modules/networkName.tsx b/src/components/modules/networkName.tsx index a6eb20e7..ddab52f3 100644 --- a/src/components/modules/networkName.tsx +++ b/src/components/modules/networkName.tsx @@ -139,6 +139,7 @@ const NetworkName = ({ central = false }: IProp) => {
{ > ))}