wave
wave copied to clipboard
h2oai
Text box value clearing
Wave SDK Version, OS
0.21.1
Actual behavior
I want to clear the value of a textbox when dropdown is changed in a dialog. But this is weirdly interconnected with textbox tooltip.
Scenario 1: Without tooltip - Not working
from h2o_wave import app, main, Q, ui
@app("/")
async def serve(q: Q) -> None:
if not q.client.initialized:
q.page['meta'] = ui.meta_card(box='')
q.page['example'] = ui.form_card(box='1 1 2 1', items=[
ui.button(name='show_dialog', label='Open dialog', primary=True)
])
q.client.initialized = True
q.client.dropdown1 = "1"
else:
if q.args.show_dialog:
show_dialog(q)
if q.args.dropdown1:
if q.args.dropdown1 != q.client.dropdown1:
q.client.dropdown1 = q.args.dropdown1
q.client.textbox = ""
show_dialog(q)
if q.args.cancel:
q.page['meta'].dialog = None
q.client.dropdown1 = None
q.client.textbox = None
await q.page.save()
def show_dialog(q):
q.page["meta"].dialog = ui.dialog(
title="Dialog",
items=[
ui.dropdown(
name="dropdown1",
label="Dropdown1",
value=q.client.dropdown1,
trigger=True,
choices=[
ui.choice(name="1", label="Choice 1"),
ui.choice(name="2", label="Choice 2")
],
),
ui.textbox(
name="textbox",
label="Text box",
value=q.client.textbox,
),
ui.button(name='cancel', label='Cancel')
],
events=["dismissed"],
closable=True,
)
https://user-images.githubusercontent.com/29954570/183548744-aaa8c616-1b10-44c3-b227-d8962f71ba55.mov
Scenario 2: With tooltip - Not working
from h2o_wave import app, main, Q, ui
@app("/")
async def serve(q: Q) -> None:
if not q.client.initialized:
q.page['meta'] = ui.meta_card(box='')
q.page['example'] = ui.form_card(box='1 1 2 1', items=[
ui.button(name='show_dialog', label='Open dialog', primary=True)
])
q.client.initialized = True
q.client.dropdown1 = "1"
else:
if q.args.show_dialog:
show_dialog(q)
if q.args.dropdown1:
if q.args.dropdown1 != q.client.dropdown1:
q.client.dropdown1 = q.args.dropdown1
q.client.textbox = ""
show_dialog(q)
if q.args.cancel:
q.page['meta'].dialog = None
q.client.dropdown1 = None
q.client.textbox = None
await q.page.save()
def show_dialog(q):
q.page["meta"].dialog = ui.dialog(
title="Dialog",
items=[
ui.dropdown(
name="dropdown1",
label="Dropdown1",
value=q.client.dropdown1,
trigger=True,
choices=[
ui.choice(name="1", label="Choice 1"),
ui.choice(name="2", label="Choice 2")
],
),
ui.textbox(
name="textbox",
label="Text box",
value=q.client.textbox,
tooltip="Tooltip"
),
ui.button(name='cancel', label='Cancel')
],
events=["dismissed"],
closable=True,
)
https://user-images.githubusercontent.com/29954570/183548927-8fe94a08-90ee-402d-aebd-3c7c236b97e0.mov
Scenario 3: With tooltip only for one choice- Working
from h2o_wave import app, main, Q, ui
@app("/")
async def serve(q: Q) -> None:
if not q.client.initialized:
q.page['meta'] = ui.meta_card(box='')
q.page['example'] = ui.form_card(box='1 1 2 1', items=[
ui.button(name='show_dialog', label='Open dialog', primary=True)
])
q.client.initialized = True
q.client.dropdown1 = "1"
else:
if q.args.show_dialog:
show_dialog(q)
if q.args.dropdown1:
if q.args.dropdown1 != q.client.dropdown1:
q.client.dropdown1 = q.args.dropdown1
q.client.textbox = ""
show_dialog(q)
if q.args.cancel:
q.page['meta'].dialog = None
q.client.dropdown1 = None
q.client.textbox = None
await q.page.save()
def show_dialog(q):
q.page["meta"].dialog = ui.dialog(
title="Dialog",
items=[
ui.dropdown(
name="dropdown1",
label="Dropdown1",
value=q.client.dropdown1,
trigger=True,
choices=[
ui.choice(name="1", label="Choice 1"),
ui.choice(name="2", label="Choice 2")
],
),
ui.textbox(
name="textbox",
label="Text box",
value=q.client.textbox,
tooltip="Choice 1" if q.client.dropdown1 == "1" else None
),
ui.button(name='cancel', label='Cancel')
],
events=["dismissed"],
closable=True,
)
https://user-images.githubusercontent.com/29954570/183549101-7f9a418b-1ba3-4971-b73e-b866bbfbcb90.mov
Also with this scenario and making tetxbox trigger=true, I found that even though the value of the textbox is empty it will be available as an arg.
https://user-images.githubusercontent.com/29954570/183550904-273c15c0-0054-481f-a1b4-908beba01310.mov
Expected behavior
Clear textbox value without any problem.
Also with this scenario and making tetxbox trigger=true, I found that even though the value of the textbox is empty it will be available as an arg.
@ShehanIshanka Indeed this shouldn't be the case and is not consistent with the rest of the components.
Some basic explanation: When using tooltip you add a new Tooltip component under the hood (in React) which in turn recreates Textbox allowing you to set its initial value once again. With trigger=True you get the empty string because Wave is detecting the newly created Textbox with value "". I hope it clarifies.
I created a new PR that once merged will allow you to update "value" dynamically.
