I am trying to get the value of a combobox on a button click and process the value in the button click handler. However, the combobox.v_model is not updated correctly in the button click handler when the button is clicked after inputting text in the combobox.
Here is what I did (code below):
- enter string ‘xxx’ in the combobox when widgets show up
- click on the button thereafter and fetch the value of combobox.v_model
- check the print statements in the jupyter log console
Expected:
to retrieve ‘xxx’ in the button click handler in the combobox.v_model
Observed:
retrieved None instead
Is there a way to retrieve the combobox content with a button click following immediately the input of text in the combobox?
Note 1: when ‘Enter’ / ‘TAB’ is pressed before the button click (combobox looses focus), all works, but not if the button is pressed immediately after inputting text in the combobox.
Note 2: If the combobox is replaced by a TextField, a Select or a Autocomplete widget, the v_model value is updated correctly in the click event handler
import ipyvuetify as vue
\# vuetify combobox and button
combobox = vue.Combobox(label="Enter name", v_model="", items=[], autofocus=True)
btn = vue.Btn(children=['Process name'])
component = vue.Row(children=[
vue.Col(children=[combobox]),
vue.Col(children=[btn])
])
\# --- event handlers -------------------------
def on_button_clicked(widget, event, data):
print(f"in btn clicked: {combobox.v_model=}")
\# some processing of the input value here
...
def on_combo_changed(widget, event, data):
print(f"combo changed: {combobox.v_model=}")
combobox.on_event("change", on_combo_changed)
btn.on_event("click", on_button_clicked)
display(component)
Log console output following steps 1-2:
in btn clicked: combobox.v_model=None
combo changed: combobox.v_model='xxx'
Expected log console output following steps 1-2:
combo changed: combobox.v_model='xxx'
in btn clicked: combobox.v_model='xxx'