React tags when writing into the input, the suggestions are flickering with when inputing 2 characters

[MarkoTeamLift]

the suggestions are flickering like showing half a second when inputing 2 characters that don't match any of the suggestions, so in the sandbox demo just write aa and it's flickering.

[ad1992]

@MarkoTeamLift which browser and OS are you trying in? I checked in sandbox in chrome mac OS and it works fine.

[kncos]

Hi, just wanted to mention that I was having the same issue. I'm using Brave browser on Arch linux. I also tried it using regular chromium. It only appears for a split second, but I have taken a screen recording at 120fps and slowed it down to 60 to make it more visible. I'll provide that here.

https://github.com/user-attachments/assets/439f9043-353a-46fc-b837-50de33e66f9f

Here's my code:

export function ProblemTagInput(props: ProblemTagInputProps) {
  const { className, onChange, value, provideSuggestions = true } = props;

  const [suggestions, setSuggestions] = useState<Tag[]>([]);

  const toTags = (texts: string[] | undefined): Tag[] =>
    (texts ?? []).map((text) => ({ id: text, text, className: '' }));

  const fromTags = (tags: Tag[] | undefined): string[] =>
    (tags ?? []).map((tag) => tag.text);

  useEffect(() => {
    if (provideSuggestions) {
      const temp = [
        'array',
        'string',
        'math',
        'dynamic-programming',
        'graph',
        'two-pointers',
        'sliding-window',
        'tree',
        'depth-first-search',
        'breadth-first-search',
        'hash-table',
        'linked-list',
        'stack',
        'greedy',
        'bit-manipulation',
        'design',
        'sorting',
        'recursion',
        'matrix',
        'heap-priority-queue',
        'union-find',
        'trie',
        'backtracking',
        'divide-and-conquer',
        'counting',
      ];
      setSuggestions(toTags(temp));
    }
  }, [provideSuggestions]);

  const applyChanges = (newTags: Tag[]) => {
    onChange(fromTags(newTags));
  };

  const handleAddition = (tag: Tag) => {
    applyChanges([...toTags(value), tag]);
  };

  const handleDelete = (i: number) => {
    applyChanges(toTags(value).filter((tag, index) => index !== i));
  };

  const onTagChange = (i: number, newTag: Tag) => {
    const newTags = [...toTags(value)];
    newTags[i] = newTag;
    applyChanges(newTags);
  };

  return (
    <div className={className}>
      <ReactTags
        tags={toTags(value)}
        separators={[SEPARATORS.COMMA, SEPARATORS.ENTER, SEPARATORS.TAB]}
        handleDelete={handleDelete}
        handleAddition={handleAddition}
        onTagUpdate={onTagChange}
        suggestions={suggestions}
        onClearAll={() => applyChanges([])}
        inputFieldPosition="bottom"
        clearAll={true}
        allowDragDrop={false}
        placeholder="Add new tag"
        autocomplete={true}
        classNames={{
          tags: 'flex flex-col gap-2',
          tagInput: 'flex gap-2 items-center',
          tagInputField: 'input',
          tag: 'badge badge-neutral font-medium pr-2 gap-1.5 mx-0.5',
          // the "x" button to delete a tag. It's styled like this because it looks
          // weird with more standard styles, maybe due to the library's use of the
          // svg and containing div sizing

          // ReactTags__remove is here because of issue https://github.com/react-tags/react-tags/issues/977.
          // when this is not included, the ReactTags component has a bug where it attempts to reference
          // a prop on undefined
          remove:
            'ReactTags__remove hover:bg-[rgba(255,255,255,0.2)] rounded-full pl-1 py-1 pr-0.25',
          clearAll: 'btn btn-sm btn-error',
          suggestions:
            'ReactTags__suggestions flex flex-row btn btn-soft p-2 font-medium tracking-wide',
        }}
      />
    </div>
  );
}

I also tried it with all of my custom classNames commented out and it still had this issue. Not sure if it's me, i'm just experimenting with this library and might have done something wrong, but hopefully something I've provided here has been helpful.