React, tagify maxTags not updating

329 Views Asked by At

In my react app, I have a tagify bar. The maxTags property depends on user input. I currently have so far:

import React, { useRef, useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import Tags from "@yaireo/tagify/dist/react.tagify";
import './SearchBar.css';
...some more  consts and such 

export function SearchBar() {
  const [booru, setBooru] = useState(DEF_BOORU);
  const createBaseTagSettings = (maxTags: number) => {
    return {
      maxTags: maxTags,
      placeholder: "type something",
    }
  }

  const [baseTagifySettings, setbaseTagifySetting] = useState(createBaseTagSettings(booruTagLimit[DEF_BOORU]));

  const tagifyRef: any = useRef();
  const addCallBack = (e: any) => {
    baseTagifySettings.placeholder = "";
  }

  const tagifyCallbacks = {
    add: addCallBack
  }

  const settings = {
    ...baseTagifySettings,
    callbacks: tagifyCallbacks
  }
      
  const onBooruChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const booru = e.target.value;
    if (BOORUS.indexOf(booru) != -1) {
      setBooru(booru);
      setbaseTagifySetting(createBaseTagSettings(booruTagLimit[booru]));    
    }
  }
  const onTagChange = (e: any) => {
   e.persist();
   console.log(e.target.value);
  }

  console.log("prior to return", settings);
  
  //omitting alot of excess html stuff here.
  return (
    <div>
              <Tags
                tagifyRef={tagifyRef}
                settings={settings}
                onChange={onTagChange}
              />
            
            <div className="col-md-2">
              <select id="booru" className="custom-select custom-select-sm"
                onChange={onBooruChange}>
                <option selected>Select Booru to use</option>
                {
                  BOORUS.map((booru: string) => {
                    return <option value={booru}>{booru}</option>
                  })
                }
              </select>
            </div>
           
    </div >

  );
}

When I try to switch from the DEF_BOORU option to something else that has a higher maxTags number, the tagify search bar automatically deletes the excess tags (maxTgas does to seem to update). But the log statement just before the return shows the right setting object with the correct maxTags property.

Does anyone know why this happens? Note that if I try to change the maxTags by using the tagifyRef it works.

0

There are 0 best solutions below