Search code examples
pythonjupyteripyvuetify

Button click is not fetching the correct v_model value of combobox


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 seems to be updated correctly only after the button click handler has exited.

Here is what I did (code below):

  1. enter string 'xxx' in the combobox when widgets show up
  2. click on the button thereafter and fetch the value of combobox.v_model
  3. Expected to retrieve 'xxx', but retrieved '' (empty string) instead

Is there a way to retrieve the combobox content with a button click immediately after input?

Note: when 'Enter' / 'TAB' is pressed before the button click, all works, but not if the button is pressed immediately after input in the combobox.

import ipyvuetify as vue

name = ''

# 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 handler -------------------------
# Some processing of the combobox input needs to happen
# on a button click, but v_model is not updated
def on_button_clicked(widget, event, data):
    print(f"btn clicked: {combobox.v_model=}")
    name = combobox.v_model
    print(f'btn clicked: {name=}')
    # do some processing with name here


btn.on_event("click", on_button_clicked)

display(component)

Solution

  • Could be a bug in Vuetify: vuetifyjs/vuetify#12567 (also refer to this post on the ipyvuetify issue tracker).