- Community
- Question
When a navigate action returns to the very screen, i.e. after selecting an item in a drop down, the screen's form is rendering input values from the previous action callback instead of from the current action callback.
Example video: https://youtube.com/shorts/BhC0yuaortU
- You can see that although if Item "p1" is selected in the drop down, the form still shows details of item "p0".
- Only once "p1" is selected AGAIN, the correct form data is shown
- Once "p2" is selected, the form will continue showing data for "p1"
- ...until "p2" is selected again.
I double checked that my flow endpoint's returned data is NOT the issue. The response data for the action data exchange callback is correct. It is the screen form displaying outdated form values. It's also noteworthy to say that this bug did not show in WhatsApp about a month ago, it's a new phenomena. It's reproducible on both Android and iOS, latest WhatsApp client apps.
I reproduced this bug both with a flow 3.1 (with form) and a flow 4.0 (without form and using "init-value" on the form fields)
Lars, the issue has been identified and fixed, I expect it to be landed within 24 hours
Hi Lars, thanks for posting an issue! Could you please provide a Flow JSON (Single screen is enough) + the example of server response?
Hi Evgenii, thanks for putting your attention to this severe bug. I am sharing with you requested details:
Relevant flow screen:
{
"id": "EDITOR",
"layout": {
"type": "SingleColumnLayout",
"children": [
{
"type": "TextBody",
"text": "${data.success_message}",
"visible": "${data.is_success_message_visible}",
"font-weight": "bold"
},
{
"type": "Dropdown",
"name": "product_id",
"label": "Product",
"required": "${data.is_product_edit_mode}",
"data-source": "${data.products}",
"init-value": "${data.product_id}",
"on-select-action": {
"name": "data_exchange",
"payload": {
"event": "select_product",
"is_product_edit_mode": "${data.is_product_edit_mode}",
"product_id": "${form.product_id}"
}
},
"visible": "${data.is_product_edit_mode}"
},
{
"type": "If",
"condition": "${data.is_product_fields_visible}",
"then": [
{
"type": "TextInput",
"name": "title",
"input-type": "text",
"label": "Titre",
"required": true,
"init-value": "${data.title}"
},
{
"type": "TextInput",
"name": "price",
"input-type": "number",
"label": "Prix (FCFA)",
"required": true,
"init-value": "${data.price}"
},
{
"type": "Dropdown",
"name": "unit_id",
"label": "Unité",
"required": true,
"data-source": "${data.units}",
"init-value": "${data.unit_id}"
},
{
"type": "Dropdown",
"name": "product_category_id",
"label": "Catégorie",
"required": false,
"data-source": "${data.categories}",
"init-value": "${data.product_category_id}",
"on-select-action": {
"name": "data_exchange",
"payload": {
"event": "select_category",
"is_inventory_managed": "${form.is_inventory_managed}",
"is_product_edit_mode": "${data.is_product_edit_mode}",
"is_sellable": "${form.is_sellable}",
"price": "${form.price}",
"product_category_id": "${form.product_category_id}",
"product_id": "${form.product_id}",
"title": "${form.title}",
"unit_id": "${form.unit_id}"
}
}
},
{
"type": "OptIn",
"name": "is_inventory_managed",
"label": "Gestion des Stocks",
"required": false
},
{
"type": "OptIn",
"name": "is_sellable",
"label": "Vendables au Client",
"required": false
}
]
},
{
"type": "EmbeddedLink",
"text": "${data.delete_link_text}",
"visible": "${data.is_product_selected}",
"on-click-action": {
"name": "data_exchange",
"payload": {
"event": "delete_product",
"product_id": "${form.product_id}"
}
}
},
{
"type": "Footer",
"label": "${data.footer_label}",
"on-click-action": {
"name": "data_exchange",
"payload": {
"event": "upsert_product",
"is_inventory_managed": "${form.is_inventory_managed}",
"is_product_edit_mode": "${data.is_product_edit_mode}",
"is_sellable": "${form.is_sellable}",
"price": "${form.price}",
"product_category_id": "${form.product_category_id}",
"product_id": "${form.product_id}",
"title": "${form.title}",
"unit_id": "${form.unit_id}"
}
},
"enabled": "${data.is_product_fields_visible}"
}
]
},
"title": "${data.screen_title}",
"terminal": true,
"data": {
"categories": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"title": {
"type": "string"
}
}
},
"__example__": [
{
"id": "food",
"title": "Food"
}
]
},
"delete_link_text": {
"type": "string",
"__example__": "Delete"
},
"footer_label": {
"type": "string",
"__example__": "Save"
},
"is_inventory_managed": {
"type": "boolean",
"__example__": true
},
"is_product_edit_mode": {
"type": "boolean",
"__example__": true
},
"is_product_selected": {
"type": "boolean",
"__example__": true
},
"is_product_fields_visible": {
"type": "boolean",
"__example__": true
},
"is_sellable": {
"type": "boolean",
"__example__": true
},
"is_success_message_visible": {
"type": "boolean",
"__example__": true
},
"price": {
"type": "string",
"__example__": "1000"
},
"product_category_id": {
"type": "string",
"__example__": "food"
},
"product_id": {
"type": "string",
"__example__": "juice"
},
"products": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"title": {
"type": "string"
}
}
},
"__example__": [
{
"id": "juice",
"title": "Juice"
}
]
},
"screen_title": {
"type": "string",
"__example__": "Edit product"
},
"success_message": {
"type": "string",
"__example__": "Product updated"
},
"title": {
"type": "string",
"__example__": "Sushi"
},
"unit_id": {
"type": "string",
"__example__": "KILOGRAM"
},
"units": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"title": {
"type": "string"
}
}
},
"__example__": [
{
"id": "KILOGRAM",
"title": "Kilogrammes"
}
]
}
}
}
Callback request:
{
"data": {
"event": "select_product",
"is_product_edit_mode": true,
"product_id": "3938ad14-f35d-4ee1-a069-5747895334dd"
},
"flow_token": "05f8832d-87ca-4865-895d-141551a169cc",
"screen": "EDITOR",
"action": "data_exchange",
"version": "3.0"
}
Server response:
{
"screen": "EDITOR",
"data": {
"categories": [
{
"id": "4b3f976c-e47a-4f2a-8b49-a3d3bb514139",
"title": "test"
},
{
"id": "NEW",
"title": "Nouvelle categorie..."
}
],
"delete_link_text": "Supprimer le Produit \ud83d\uddd1\ufe0f",
"footer_label": "Modifier",
"is_inventory_managed": false,
"is_product_edit_mode": true,
"is_product_fields_visible": true,
"is_product_selected": true,
"is_sellable": true,
"is_success_message_visible": false,
"price": "1001",
"product_category_id": "",
"product_id": "3938ad14-f35d-4ee1-a069-5747895334dd",
"products": [
{
"id": "c_0606089e-1d1b-4c16-b133-522e1371a3c0",
"title": "(SANS CAT\u00c9GORIE)"
},
{
"id": "084ca16d-5ce4-4bd6-86be-469c60d4824e",
"title": "\u27a4 p0 (1,000)"
},
{
"id": "3938ad14-f35d-4ee1-a069-5747895334dd",
"title": "\u27a4 p1 (1,001)"
},
{
"id": "aaa22e61-32b7-4813-a495-53ad1974abc5",
"title": "\u27a4 p2 (1,002)"
},
{
"id": "c_43aaca9b-6422-44b3-afa1-60788cc0ee75",
"title": "TEST"
},
{
"id": "43aaca9b-6422-44b3-afa1-60788cc0ee75",
"title": "\u27a4 p3 (1,003)"
},
{
"id": "0480004f-b467-4190-b2b0-8031c8efb959",
"title": "\u27a4 p4 (1,004)"
}
],
"screen_title": "Modifier un produit",
"success_message": "",
"title": "p1",
"unit_id": "PIECES",
"units": [
{
"id": "GRAMS",
"title": "Grammes"
},
{
"id": "KILOGRAMS",
"title": "Kilogrammes"
},
{
"id": "LITERS",
"title": "Litres"
},
{
"id": "PIECES",
"title": "Pi\u00e8ces"
}
]
},
"version": "3.0"
}
However both the iOS and the Android app do not show "title": "p1" and "price": 1001 after receiving above response. Instead the app shows "p0" and 1000, from the previous (!) server response. See also the video linked in my original post above.
How's the likelihood that this bug will get addressed by WhatsApp soon?
As said earlier, this severe bug reproduces both with flows version 3.1 and 4.0 (as used above).
Hey Lars, we'll try to get it addressed by the end of the week (worst-case - mid of the next week). I'll update within the thread