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.