[Rendering] Filtered ChoiceSets render improperly when two choices have the same title

[thomasylee]

Target Platforms

Microsoft Teams app as well as website, on both Windows and MacOS.

SDK Version

1.5

Application Name

Microsoft Teams

Problem Description

When an Adaptive Card has a filtered Input.ChoiceSet that has two options with the same titles but different ids, the card rendering in Microsoft Teams accumulates duplicates that don't go away when the card loses focus.

While I agree that in general ChoiceSets would ideally have options with unique titles, this UI quirkiness turns what would normally be just a likely ignored duplicate entry into a confusing and buggy-looking experience.

Steps to reproduce (using the card produced by the sample curl command):

1. Click the "Fruit" field.
2. Type "b"
3. Type backspace
4. Repeat steps (2) and (3) a few times. Note that the duplicated entry "Banana" gets added to the card below the dropdown each time, even though nothing was selected.
5. Click away from the card to see that the duplicates are still shown on the card even when it loses focus.

Screenshots

Card JSON

{
    "type": "AdaptiveCard",
    "version": "1.5",
    "body":
    [
        {
            "size": "large",
            "text": "Pick a Fruit",
            "weight": "bolder",
            "type": "TextBlock"
        },
        {
            "choices":
            [
                {
                    "title": "Apple",
                    "value": "1"
                },
                {
                    "title": "Banana",
                    "value": "2"
                },
                {
                    "title": "Banana",
                    "value": "3"
                },
                {
                    "title": "Pear",
                    "value": "4"
                }
            ],
            "id": "fruit",
            "isRequired": true,
            "label": "Fruit",
            "style": "filtered",
            "type": "Input.ChoiceSet"
        }
    ],
    "actions":
    [
        {
            "data":
            {
                "command": "fruit"
            },
            "title": "Submit",
            "type": "Action.Execute"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}

Sample Code Language

Curl

Sample Code

# The following curl command creates an Adaptive Card with the problematic rendering.
# $TEST_BOT_ID = the Microsoft Teams bot id to test with
# $CONVERSATION_ID = the Microsoft Teams conversation to send the card to
# $TOKEN = the Microsoft token received from https://login.microsoftonline.com/botframework.com/oauth2/v2.0/token
curl -d '{
    "type": "message",
    "timestamp": "2022-07-11T11:35:08.067226Z",
    "from": {
        "id": "$TEST_BOT_ID",
        "properties": {}
    },
    "conversation": {
        "isGroup": false,
        "id": "$CONVERSATION_ID",
        "properties": {}
    },
    "historyDisclosed": false,
    "attachments": [
        {
            "contentType": "application/vnd.microsoft.card.adaptive",
            "content": {
                "type": "AdaptiveCard",
                "version": "1.5",
                "body": [
                    {
                        "size": "large",
                        "text": "Pick a Fruit",
                        "weight": "bolder",
                        "type": "TextBlock"
                    },
                    {
                        "choices": [
                            {
                                "title": "Apple",
                                "value": "1"
                            },
                            {
                                "title": "Banana",
                                "value": "2"
                            },
                            {
                                "title": "Banana",
                                "value": "3"
                            },
                            {
                                "title": "Pear",
                                "value": "4"
                            }
                        ],
                        "id": "fruit",
                        "isRequired": true,
                        "label": "Fruit",
                        "style": "filtered",
                        "type": "Input.ChoiceSet"
                    }
                ],
                "actions": [
                    {
                        "data": {
                            "command": "fruit"
                        },
                        "title": "Submit",
                        "type": "Action.Execute"
                    }
                ],
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
            },
            "properties": {}
        }
    ],
    "entities": [],
    "properties": {}
}' -H 'Content-Type: application/json' -H "Authorization: Bearer $TOKEN" 'https://smba.trafficmanager.net/amer/v3/conversations/$CONVERSATION_ID/activities'

[beervoley]

@thomasylee thanks for submitting the bug :) we'll have a look soon

[thomasylee]

Hi @beervoley, any update on this one?

Let me know if you need anything else from my side.

[thomasylee]

Hey, any update on this issue?