BotFramework-WebChat
BotFramework-WebChat copied to clipboard
Web Chat UI fails to render action in overflow menu when mode property is set to `secondary`
Is your feature request related to a problem?
Reference IcM #430453809.
As described in the Adaptive Cards schema documentation, starting with schema version 1.5, every action can include an optional mode property. By default, this property is set to primary
which tells the adaptive card to render the action as a button. If mode is set to secondary
, then the action should be rendered as an overflow menu.
However, in Web Chat, when an adaptive card (example below) is sent by the bot that includes an action where the mode property is set to "secondary", Web Chat is unable to render the overflow menu. Instead, the overflow menu is rendered as basic HTML on the page. The functionality of the action appears to be undisturbed, so the issue is only with regard to the correct rendering of elements in the UI.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Log a Ticket",
"id": "LogTicket",
"data": {
"value": "Log a Ticket"
}
},
{
"type": "Action.Submit",
"title": "View Ticket Status",
"id": "ViewTicketStatus",
"data": {
"value": "View Ticket Status"
}
},
{
"type": "Action.Submit",
"title": "Create DL",
"id": "CreateDL",
"mode": "secondary",
"data": {
"value": "Create DL"
}
},
{
"type": "Action.Submit",
"title": "View DL Details",
"id": "ViewDLDetails",
"mode": "secondary",
"data": {
"value": "View DL Details"
}
}
]
}
]
}
Describe the suggestion or request in detail
Web Chat should support adaptive cards actions where the mode property has a set value of secondary
so it can properly display the action as an overflow menu.
Describe alternatives you have considered
The only other option is to render the action as a simple button.
Additional context
Adaptive Cards Designer
Test in Web Chat demo - End result is the same when using Web Chat in an HTML page.