when it comes to focusing components between open/active states you need to wrap the focus setter around a setTimeout
with a very small delay, so your code should look something like this:
useEffect(() => {
if (commandRef.current) {
setTimeout(() => {
commandRef.current.focus();
}, 50)
}
}, []);
if you're trying to highlight a CommandItem
component, you'll want to set the data-selected
attribute alongside the focus, which looks something like this:
useEffect(() => {
if (commandItemRef.current) {
setTimeout(() => {
commandItemRef.current.setAttribute("data-selected", "true")
commandRef.current.focus();
}, 50)
}
}, []);