on input value strange - Githubissues

Prerequisites

[o] I am running the latest version
[o] I checked the documentation and found no answer
[o] I checked to make sure that this issue has not already been filed

💥 Demo Page

https://jsbin.com/jekuqap/edit?html,js,output

React issue template: https://codesandbox.io/s/tagify-react-issue-template-4ub1r?file=/src/index.js

Explanation

What is the expected behavior? When the Enter key is pressed, the entered message should be added as a tag, and the previously entered message should disappear.
What is happening instead? When the Enter key is pressed, if the last character of the entered content is Korean, the last character is returned in onInput, followed by ',,,'.

`import "./style.scss"; import { useRef, useEffect, useCallback, useState } from "react"; import Tagify from "@yaireo/tagify"; import "@yaireo/tagify/dist/tagify.css"; // Tagify CSS를 임포트

interface IPropsType { onUpdateTag?: (value: string[]) => void; }

const TagInput = ({ onUpdateTag }: IPropsType) => { const [inputtingValue, setInputtingValue] = useState(""); const [isFocus, setIsFocus] = useState(false);

const inputRef = useRef<HTMLInputElement | null>(null); const tagifyRef = useRef<Tagify | null>(null);

useEffect(() => { if (inputRef.current) { tagifyRef.current = new Tagify(inputRef.current, { maxTags: 10, placeholder: "#태그를 입력하세요", addTagOnBlur: false, addTagOn: undefined, onChangeAfterBlur: false, });

  tagifyRef.current.on("add", () => {
    if (!tagifyRef.current) return;
    if (tagifyRef.current?.value.length === 10) {
      (tagifyRef.current as any).setContentEditable(false);
      tagifyRef.current?.setPlaceholder("");
    }
    if (onUpdateTag) onUpdateTag(tagifyRef.current.value.map((datum) => datum.value));
  });
  tagifyRef.current.on("remove", () => {
    if (!tagifyRef.current) return;
    if (tagifyRef.current && tagifyRef.current?.value.length !== 10) {
      (tagifyRef.current as any).setContentEditable(true);
      tagifyRef.current?.setPlaceholder("#태그를 입력하세요");
    }
    if (onUpdateTag) onUpdateTag(tagifyRef.current.value.map((datum) => datum.value));
  });
  tagifyRef.current.on("input", (e) => {
    const value = (e.detail as { value: string }).value;
    setInputtingValue(value);
  });
}

return () => {
  tagifyRef.current?.destroy();
};

}, []);

{isFocus && inputtingValue && }

interface IRecommendTagProps { input: string; onSelect: (value: string) => void; } const TEMP_DATA = ["banana", "apple", "grape", "orange", "mango", "watermelon"]; function RecommendTag({ input, onSelect }: IRecommendTagProps) { const inputRef = useRef(input); useEffect(() => { inputRef.current = input; }, [input]);

const [activeIndex, setActiveIndex] = useState(-1); const activeIndexRef = useRef(-1);

const [activeRecommend, setActiveRecommend] = useState<string[]>([]); const activeRecommendRef = useRef<string[]>([]);

useEffect(() => { activeRecommendRef.current = activeRecommend; }, [activeRecommend]);

useEffect(() => { setActiveRecommend(TEMP_DATA.filter((text) => text.includes(input))); }, [input]);

useEffect(() => { function keyEvent(e: KeyboardEvent) { switch (e.key) { case "ArrowDown": if (activeIndexRef.current >= activeRecommendRef.current.length - 1) setActiveIndex(0); else setActiveIndex((prev) => prev + 1); break; case "ArrowUp": if (activeIndexRef.current <= 0) setActiveIndex(activeRecommendRef.current.length - 1); else setActiveIndex((prev) => prev - 1); break; case "Enter": if (activeIndexRef.current === -1) onSelect(inputRef.current); onSelect(activeRecommendRef.current[activeIndexRef.current]); break; } } window.addEventListener("keydown", keyEvent); return () => { window.removeEventListener("keydown", keyEvent); }; }, []);

yairEO / tagify

on input value strange #1382

Prerequisites

💥 Demo Page

Explanation