[Rendering] Input.ChoiceSet not rendered while using ACFluentUI.useFluentUI()

Target Platforms

NodeJS

SDK Version

2.10.0

Application Name

Web page (SharePoint)

Problem Description

Trying to use the Javascript SDK along with the FluentUI controls as per here.

This renders text inputs as expected, but choice sets (style: compact or expanded) are not rendered at all.

Screenshots

Without useFluentUI():

With useFluentUI():

Card JSON

{
    "type": "AdaptiveCard",
    "version": "1.4",
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "Container",
                    "id": "f2a32e10-0cc5-3291-82f4-092153811b54",
                    "items": [
                        {
                            "type": "Container",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "weight": "bolder",
                                    "text": "You have a new technical document to review!",
                                    "wrap": true
                                }
                            ],
                            "spacing": "none",
                            "padding": "None"
                        },
                        {
                            "type": "Container",
                            "id": "92a32e10-0cc5-6691-82f4-092153811b54",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "weight": "bolder",
                                    "text": "Complete Review\n",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "id": "22d03800-3ead-7dde-aa90-4e9d034b1d9e",
                                    "text": "By completing this task you are confirming the review has been completed.",
                                    "wrap": true
                                },
                                {
                                    "type": "Input.Text",
                                    "id": "Comments",
                                    "placeholder": "Comments (please add any additional comments)",
                                    "isMultiline": true,
                                    "isRequired": true,
                                    "errorMessage": "This field is required"
                                },
{
        "type": "Input.ChoiceSet",
        "id": "snooze",
        "value": "5",
"style":"expanded",
        "choices": [
          {
            "title": "5 minutes",
            "value": "5"
          },
          {
            "title": "15 minutes",
            "value": "15"
          },
          {
            "title": "30 minutes",
            "value": "30"
          }
        ]
      },
                                {
                                    "type": "Input.Text",
                                    "id": "Description",
                                    "placeholder": "Description",
                                    "isMultiline": true,
                                    "isRequired": true,
                                    "errorMessage": "This field is required"
                                },
                                {
                                    "type": "Input.Text",
                                    "id": "FavoriteColor",
                                    "placeholder": "Favorite color",
                                    "isRequired": true,
                                    "errorMessage": "This field is required"
                                },
                                {
                                    "type": "ActionSet",
                                    "actions": [
                                        {
                                            "type": "Action.Execute",
                                            "data": {
                                                "cardConfigId": "ed632036-2849-5bfc-977c-7609a4e60582"
                                            },
                                            "verb": "cardSubmit",
                                            "title": "Submit",
                                            "fallback": "drop"
                                        }
                                    ]
                                }
                            ],
                            "padding": "None"
                        }
                    ],
                    "padding": "None"
                }
            ],
            "spacing": "none",
            "padding": {
                "top": "Small",
                "bottom": "Default",
                "left": "Default",
                "right": "Default"
            }
        }
    ],
    "originator": "xxx"
}

Sample Code Language

Typescript

Sample Code

Using pretty much the code provided in the npm package here

Start with the adaptivecards-fluentui integration and the ACFluentUI.useFluentUI() entry point, then reproduce the supplied Adaptive Card on the NodeJS web page. Verify compact and expanded Input.ChoiceSet controls render alongside the existing text inputs; the payload names no repository file or test.