Я создаю чипсы нажатием на клавишу запятая (","). Сейчас ширина каждого инпута у созданного чипса равна ширине сожержимого невидимого span. Однако при клике на запятую мой новый (последний) созданный чипс не равен ширине содержимого span (он гораздо больше). Он становиться верным только после того как я начну набирать текст для нового чипса. Как сделать так что-бы я нажал на запятую и новый созданный чипс имел ширину содержимого?
Вот мой чипс компонент codesandbox
- https://codesandbox.io/s/nameless-feather-sdz76?file=/src/chips-input.js
/*код компонента*/
const ChipsInput = ({ value, onChange }) => {
const [input, setInput] = useState("");
const [chips, setChips] = useState([]);
const spanEl = useRef(5);
const changeHandler = (event) => {
setInput(event.target.value);
};
const handleKeyDown = (event) => {
if (event.key === ",") {
event.preventDefault();
setChips([...chips, event.target.value]);
setInput("");
}
};
return (
<div className="chips_input">
<div className="wrapper">
{chips.map((chip, index) => (
<ChipsItem chip={chip} key={index} />
))}
<div className="container">
<span className="hide_el" ref={spanEl}>
{input}
</span>
<input
className="input"
type="text"
value={input}
onChange={changeHandler}
style={
input.length !== 0
? { width: spanEl.current.offsetWidth + "px" }
: { width: "2px" }
}
onKeyDown={handleKeyDown}
/>
</div>
</div>
</div>
);
};
/*код каждого чипса*/
const ChipsItem = ({ index, chip }) => {
const [item, setItem] = useState(chip);
const hideEl = useRef(5);
const handleInputChip = (event) => {
setItem(event.target.value);
};
return (
<div className="wrap" key={index}>
<span className="hide_item" ref={hideEl}>
{item}
</span>
<input
type="text"
value={item}
className="input-chip"
onChange={handleInputChip}
style={{ width: hideEl.current.offsetWidth + "px" }}
/>
<span className="remove">×</span>
</div>
);
};