[JavaScript]Adaptive card rendering issue in the newest version, when customization is applied.

Platform

What platform is your issue or question related to? (Delete other platforms).

• JavaScript

Author or host

Are you an author (like sending something to Outlook), or a host that is rendering your own cards? If host, please specify the corresponding host (app) name.

According to my understanding Host since we are using directline which means we can modify the adaptive cards host file if needed.

If you’re an author, who are you sending cards to?

Version of SDK

What version are you using? Ex: NuGet 1.0.2, or latest master, etc…

Using npm package botframework webchat. The product for the bot is Healthcare Bot. It is a SAAS service. There is a free pricing tier on Azure. The SDK is whatever they are using. I cannot see this information.

Details

Explain your issue. If you just have a question, please post on StackOverflow instead.

This issue was also filed in botframework webchat github page here: https://github.com/microsoft/BotFramework-WebChat/issues/2834

Succesfully reproduced in the comments: https://github.com/microsoft/BotFramework-WebChat/issues/2834#issuecomment-578610774

Here is the full description from the bot framework webchat issue page:

Screenshots

Old version:

New version:

Version

All the versions are NPM packages. Using React: Old version: Botframework-webchat 4.4.2. Where the adaptive cards package is 1.1.3

New version: Botframework-webchat 4.7.1. Where the adaptive cards package is 1.2.3

Describe the bug

Using react with create react app and using Javascript to manipulate the DOM to change the adaptive card behaviour. The current flow that is working in the old version is:

• the adaptive card button is clicked. The clicked button is disabled and the color is changed to green.
• if there are any other buttons in the adaptive card then disable them and change the color to grey.
• if the current adaptive card contains any radio buttons, checkboxes or any other kind of input elements disable them also.
• This allows the user to see a history of what the user has clicked by showing the clicked buttons as green and everything else as grey. The other benefit is that the buttons can only be clicked once (same applies to other html elements like radiobuttons). The default is that the adaptive card buttons can be clicked multiple times.

How this is achieved:

• For the current button being clicked we check if the “event.target” contains the button class and then the current button is disabled and a css class is added to make the button green.
• Another function checks all the buttons using normal for loop and the button class. The button is disabled and a css class is added to the button to make it grey.
• In order to achieve the above a normal click event listener using javascript is created and a function is applied to it. This function handles the card button click.
• The functions are called inside the store (create a new store like in the minimizablewebchat sample) to make them repeat after every activity.

New version problems:

• In the new version this does not work at all. The buttons keep the original state. Even the radio buttons and other elements are not disabled.
• During my investigation it seems to sometimes work for less than a second until it reverts to the original state and it does it for all the adaptive cards at the same time while the old version seemed to have only modified the current adaptive card instead of every card.
• Moreover the actual button in the adaptive card is no longer recognized by “event.target” while every other element is recognized. We need this in order to track the currently selected button. This is probably one of the reason why the custom code does not work anymore.
• I am not allowed to show actual code.

Steps to reproduce

1. Creating an adaptive card in the bot. Can you create an adaptive card somehow on your side?
2. Create a react app (for example use the minimzable webchat sample (the old version that is still on the readme.md instead of the new version that is in the code currently but not reflected in the readme file) in webhat directory in here: https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.recomposing-ui/a.minimizable-web-chat).
3. create button listener using javascript and apply a custom function to the listener that contains something like “console.log(event.target)”. Can also try to disable the target or add a class with a color and see that it is not applied.
4. Notice that in the new version clicking adaptive card button does not show in the browser console but clicking everything else in the chat does show. In the old version the button click showed in the console.
5. This means there is no point doing anything else for the adaptive card since it does not get recognized.
6. You can still try to “document.queryselectorall” to disable the button and if I remember correctly it disables all the buttons and this means the buttons cant be clicked at all.

Expected behavior

The adaptive card buttons and other html elements like radiobutton should disable when prompted by the DOM. Now it seems to go back to default state for every card after something is changed.

Is there another way to do this other than manipulating the DOM with JavaScript? I have not figured out any other way. Kind of like the “styleset” options to modify the look of the chat to ensure the changes are kept between versions.

Additional context

• The bug seems to appears when the adaptive cards npm package version changes to 1.2.0 or above.
• Something seems to have changed in the rendering of the adaptive card in version 1.2.0.
• When the version is 1.1.3 like it is in webchat 4.4.2 it works correctly.
• This happens when the botframework-webchat package is updated from 4.4.2 to any other above version like 4.5.2.
• This is currently a blocker since the bot uses adaptive cards heavily and this problem prevents the updating of the botframework-webchat npm package.
• This bug can be reproduced by the CDN version also using just JavaScript.
• We are using the minimizablewebchat.js sample, but it should not matter in this case since it can be reproduced from CDN version.
• Using Healthcare bot. There is a free pricing tier available on Azure.

[Antti-Leskinen]

I can share the adaptive card that is used in the above picture since it happens on any card no matter the content. As long as it includes button or any html element if I remember correctly. I added the file as txt. You need to change it to json. adaptive-card-button-error.txt

[paulcam206]

Closing as this is a webchat issue, not an Adaptive Cards issue.