Switch focus (cursor) to next (number_input) st component after selection

🧩 Streamlit Components
1

So I understand the focus on an st component is not exposed. What is the current state of play here?
I have a selectbox which opens a file. I want to move the cursor focus automatically to the next field which is a number_input. At the moment, cursor remains in the selectbox.

I am using regular st components.

I have tried using javascript callback

js_placeholder = st.empty()
js_code = """
<script>
    // Function to focus on the number input field
    function focusOnNumberInput() {
        var numberInput = document.querySelector("input[type='number']");
        if (numberInput) {
            numberInput.focus();
        }
    }
</script>

# JavaScript code to attach an event listener to the selectbox
js_event_code = f"""
<script>
    document.querySelector("select[name='selectbox']").addEventListener("change", function() {{
        focusOnNumberInput();
    }});
</script>
"""
options = ["Option 1", "Option 2", "Option 3", "Option 4"]

# Create a selectbox widget
selected_option = st.selectbox("Select an option:", options)

# Display the selected option
st.write("You selected:", selected_option)
js_placeholder.markdown(js_code, unsafe_allow_html=True)
js_placeholder.markdown(js_event_code, unsafe_allow_html=True)

number = st.number_input(
    f"Insert a number (1 - {N})",
    value=number,
    min_value=1,
    max_value=N,
)

but It is not getting run at the time the page refreshes to render the number input.