React JS - element focus on input not working - reactjs

Question

I'm having trouble with focusing element programmatically.
I have a ul which looks like this :
<ul className="text-left">
{Object.keys(props.characters).map((char, i) => {
return (
<li key={props.characters[char].key}>
<button type="button" className={"btn align-middle bg_" + props.characters[char].character}>
<div className={"label text-left float-left " + getFontColorFromCharacter(props.characters[char].character)}>
<img alt="" className="char-img" src={"/images/characters/" + props.characters[char].character + "_xs.png"}/>
<input className="align-middle d-none" id={props.characters[char].key + "_input"} type="text" placeholder="Nom joueur" value={props.characters[char].player_name} onChange={e => props.changePlayerNameHandler(props.characters[char],e)} onBlur={e => toggleDNone(props.characters[char].key)} onKeyDown={e => tabToNext(e)}/>
<span className="align-middle" id={props.characters[char].key + "_span"} onClick={e => toggleDNone(props.characters[char].key)} > {props.characters[char].player_name}</span>
</div>
<div className={"actions " + getFontColorFromCharacter(props.characters[char].character)}>
<span className="action">
<FontAwesomeIcon icon="times-circle" title="Supprimer" onClick={() => props.removeCharacterHandler(props.characters[char].key)}/>
</span>
</div>
</button>
</li>
);
})}
</ul>
Javascript :
//Toggle d-none class on input & span for player name edition
function toggleDNone(key) {
document.getElementById(key + "_input").classList.toggle("d-none");
document.getElementById(key + "_span").classList.toggle("d-none");
if (!document.getElementById(key + "_input").classList.contains("d-none")) {
document.getElementById(key + "_input").focus();
}
}
//When the user hit tab key, navigate to next input
function tabToNext(event){
if(event.key === "Tab")
{
var allInput = document.querySelectorAll("[id$='_input']");
var indexOfCurrent = Array.from(allInput).indexOf(event.target);
var id;
if (indexOfCurrent + 1 === Array.from(allInput).length)
{
id = allInput[0].id;
}
else
{
id = allInput[indexOfCurrent + 1].id;
}
toggleDNone(allInput[indexOfCurrent].id.replace("_input", ""));
toggleDNone(id.replace("_input",""));
}
}
When the users click on the span, the input is displayed and the focus is working. When the users hit the tab key to get to the next input, the input is displayed but the focus is not working.
I tried setting the tabIndex to -1 as I saw on a post but it didn't work.
Any ideas?

Answer 1

Found the solution.
The issue was that the second toggleDNone call started before the first one finished.
I just added a setTimeOut of 100ms on the second call and it worked.
Thanks all