javascript - Adaptive Card clears input on submit

Question

From a Microsoft Teams bot I send an Adaptive Card with input fields and a Submit action. When the user clicks Submit I receive the data entered but the form fields are cleared.

Why is this? What am I doing wrong? This behavior is extremely annoying as I can't verify the input and ask the user to correct it.

This happens in the desktop Teams app, Teams in a browser, Teams webchat in a web page and the Bot Emulator. In the Emulator it suffices for the field to loose focus.

In case it matters I use nodejs.

Answer 1

You're not doing anything wrong. That's just how Adaptive Cards work in Teams, perhaps as a way to signify that the data has been sent to the bot successfully. There may be something you can do to fix your problem though.

Adaptive Card input fields have a value property that allows you to specify the field's initial value. If you send a card to the user and the input fields' value properties are populated, the fields won't be empty. This means you can send such a card as an update instead of a new activity and it will look like the card has been modified in place, since Teams supports updating activities. If the update uses the same card but with the values the user entered then it will look like the card remains unchanged, which would fix your problem of the values disappearing.

There was a question about dynamically adding input fields to Adaptive Cards, and the answer contains sample code that preserves input field values:

var inputId = `text${i}`;
body.push({
    type: "Input.Text",
    id: inputId,
    value: cardData[inputId] // This is where the value is preserved
});

If you want this whole process to be made easier with prebuilt code that you can install in NuGet packages, feel free to voice your support for these ideas on GitHub:
Bot.Builder.Community.AdaptiveCards
AdaptiveCard Prompt