How to mirror AdaptiveChoiceSetInput behavior on mobile and desktop devices?

Question

Working on a bot for teams using the Bot Framework SDK, I noticed that the AdaptiveChoiceSetInput (dropdowns) in cards don't behave the same way on mobile and desktop devices.

On desktop Teams, if a dropdown does not have a value, it defaults to a placeholder Select. This automatic defaulting also allows for validation to force a choice to be selected from the dropdown.

On mobile Teams, if a dropdown does not have a value, it instead defaults to the first choice. This is obviously incorrect as it makes it appear like a choice is selected in the dropdown, when it's really null.

A solution I tried was to manually add a default choice with value of null so that it would automatically set itself on mobile if the value was null. This caused an issue where the card did not appear on a mobile device.

Another solution was to add a value, like 0. Although it's likely possible to make things work this way, it lead to some complicated code I never finished because on desktop I had to account for the placeholder and the manually added default choice, and figure out how to prevent the form to be submitted with the manually added default choice.

How can I make the AdaptiveChoiceSetInput behave the same way on mobile version of Teams as in the desktop version?

Here's the relevant code:

private async Task<Attachment> GetEditableOrder(OrderModel order)
{
    List<AdaptiveChoice> orderAdaptiveChoices = _context.GetOrderAdaptiveChoices(order.id);

    var card = new AdaptiveCard(new AdaptiveSchemaVersion(1, 0));

    card.Body.Add(new AdaptiveColumnSet
    {
        Columns = new List<AdaptiveColumn>
        {
            new AdaptiveColumn
            {
                Items = new List<AdaptiveElement>
                {
                    new AdaptiveTextBlock
                    {
                        Text = "**Order**"
                    }
                }
            },
            new AdaptiveColumn
            {
                Items = new List<AdaptiveElement>
                {
                    new AdaptiveChoiceSetInput
                    {
                        Id = "orderId",
                        Choices = orderAdaptiveChoices,
                        Value = order.Id.ToString(),
                        Style = AdaptiveChoiceInputStyle.Compact,
                        Placeholder = "Select",
                        IsRequired = true,
                        ErrorMessage = "Selection required."
                    }
                }
            }
        }
    });

    card.Actions.Add(new AdaptiveSubmitAction
    {
        Type = AdaptiveSubmitAction.TypeName,
        Title = "Submit",
        Data = new JObject {
            { "submitLocation", "editOrder" }
        },
    });

    Attachment attachment = new Attachment()
    {
        ContentType = "application/vnd.microsoft.card.adaptive",
        Content = card
    };

    return attachment;
}

Answer 1

I solved my issue by manually adding an additional default choice titled "Select" with the value of an empty string. The values null and 0 did not work due to the issues I mentioned in my question. But an empty string seems to behave the same way as the placeholder in desktop version of Teams.

So, to make the dropdown in the cards behave the same way on desktop and mobile version of Teams, simply prepend a default AdaptiveChoice to your list with the value of an empty string:

orderAdaptiveChoices.Insert(0, new AdaptiveChoice { Value = "", Title = "Select" });

Whenever it is selected on either device, it will function the same way as the placeholder that is available only on desktop Teams.