[JS] Filtered ChoiceSet support

[dclaux]

Related Issue

Fixes #5986

Description

Implements the new "filtered" style on ChoiceSet as defined here: #4713

This implementation uses the standard HTML5 "combobox" feature, namely an <input type="text"> associated with a <datalist>. The caveats of this implementation are:

• The drop down arrow doesn’t look very good, and there is no way to style it
• The drop down arrow doesn’t appear in Firefox. You have to click twice inside the edit to see the dropdown
• This HTML5 feature isn’t supported in Opera on Android
• The filtering mechanism looks for any match anywhere in the available values. For instance, “two” would match both “Two” and “Network”

NOTES:

• For validation, the code looks for an a choice whose value is an exact, case sensitive match to the value entered in the input. The spec still lists this topic as an open issue.
• This PR introduces a minor breaking change in the designer, where the isCompactProperty property on ChoiceSetPeer has been removed and replaced by a styleProperty. It is extremely unlikely any developer will have any issue with this.

Sample Card

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Input.ChoiceSet",
            "choices": [
                {
                    "title": "Choice 1",
                    "value": "Choice 1"
                },
                {
                    "title": "Choice 2",
                    "value": "Choice 2"
                }
            ],
            "placeholder": "Placeholder text",
            "style": "filtered",
            "label": "Filtered ChoiceSet",
            "isRequired": true,
            "errorMessage": "Error!",
            "id": "abc"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Action.Submit"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5"
}

How Verified

Verified manually in adaptivecards-designer-app

Microsoft Reviewers: Open in CodeFlow

[ghost]

Hi @dclaux. Thanks for helping make the AdaptiveCards JS renderer + tooling better. As additional verification, once the JS build succeeds, please go to the test site to test out your website/designer changes.

[paulcam206]

looks good!

[dclaux]

@paulcam206 thanks for the initial review, may I ask you take a quick look at the newest commit. There was a styling issue (filtered ChoiceSet's height wasn't consistent with other inputs) and I forgot to handle placeholder.