Dynamic Typeahead search UI broken in Messaging extension

[shubham-betterworks]

While using the dynamic typeahead search in a messaging extension with isMultiSelect: true the UI breaks and does not behave how it works in a standard adaptive card sent in the message.

Issues

1. It doesn't show the selected data as chips instead just shows 2 items selected
2. the X icon at the input doesn't clear the selections

[Meghana-MSFT]

We are looking into this, we will get back to you.

[shubham-betterworks]

@Meghana-MSFT any updates on this?

[Meghana-MSFT]

@shubham-betterworks - We were trying to repro your issue, could you please let us know if you are using Search based messaging extension or Action based messaging extension.
Can you please share the repro steps?

[shubham-betterworks]

@Meghana-MSFT it is an action based messaging extension.

Steps to reproduce:

1. Clone https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-type-ahead-search-adaptive-cards/nodejs.
2. Add messaging extension command in manifest.json

"composeExtensions": [
    {
        "botId": "{{Microsoft-App-Id}}",
        "commands": [
            {
                "id": "dynamicsearch",
                "type": "action",
                "title": "Dynamic Search",
                "description": "Dynamic Search",
                "initialRun": false,
                "fetchTask": true,
                "context": [
                    "compose"
                ]
            }
        ]
    }
  ],

3. Add the following messaging extension invoke handler in TeamsBot

handleTeamsMessagingExtensionFetchTask(context, action) {
    const card = CardFactory.adaptiveCard(this.adaptiveCardForDyanamicSearch());

    return {
      task: {
        type: "continue",
        value: {
          card
        },
      },
    };
  }

4. In onInvokeActivity method change last line return null with return super.onInvokeActivity(context);

[shubham-betterworks]

@Meghana-MSFT any updates?

[Meghana-MSFT]

We are also able to repro this issue, we are checking with the engineering team. We will update you.

[shubham-betterworks]

@Meghana-MSFT any updates?

[Meghana-MSFT]

@shubham-betterworks - Apologies for the delay in response, A bug has been raised for the same. We will keep you posted on the updates.

[Meghana-MSFT]

Could you please share the below details as the engineering teams needs this information -

How did the customer initiate the ME flow? From engineering team's investigation, as long as the bot is added to a team or chat, and initiated the expected way, the ME works.

[shubham-betterworks]

Add the bot --> Go to chat window with the bot --> Initiate the messaging extension command --> Search and select multiple options

ME pop-up opens. the issue is in the representation of selected items as shared in the screenshots

[Meghana-MSFT]

Could you please also let us know the scope of bot? Is it personal scope or to a group chat/team?

[shubham-betterworks]

scope is personal

[Meghana-MSFT]

@shubham-betterworks - Engineering team has tested and confirmed that dynamic search does work on ME cards. Team has informed that the way the bot is created is the root cause of the issue. The bot should handle invoke of both "composeExtension/fetchTask" as well as dynamic typeahead invoke "application/search". Engineering team has shared the below sample as reference. https://github.com/deekshanya/typeaheadME

It is a private repo. Access will be shared as needed.

[shubham-betterworks]

@Meghana-MSFT can you please give access to the repo which you shared?

Also just to clarify the Messaging extension pop-up opens and allows searching and selecting. The issue is with the UI. It doesn't show the items specified, instead it just shows x item(s) selected.

[shubham-betterworks]

@Meghana-MSFT waiting to get access to the GitHub repo

[Meghana-MSFT]

I requested for repo access to the engineering team.

Engineering team has shared the below guidance -
For any dynamic choices chosen, it would have to be handled by the bot developer. This is because we don't retain any bot specific data currently.

Few recommendations for resolving this:

1. Create a static list from selected dynamic options and show these to the user on update of card.
2. Modify your default value for the input choiceset to include the chosen dynamic typeahead inputs.

[ChetanSharma-msft]

@shubham-betterworks - Please let us know if you still have any query or shall we close this issue ?

[shubham-betterworks]

@ChetanSharma-msft I'm still getting the UI issue. Waiting for access to the GitHub repo to see what needs to be changed to get it working

[Meghana-MSFT]

@shubham-betterworks - I requested for the access, I will let you know once it is approved.

[shubham-betterworks]

@ChetanSharma-msft, @Meghana-MSFT Still getting broken UI in messaging extension. When the adaptive card with dynamic search and multiple selections true is used in Messaging extension the UI doesn't show the selected data properly(only shows x items selected) whereas when the same card is sent as a message from the bot the result is different. Please refer to the video to see this behavior

search.multiple.selection.mov

[shubham-betterworks]

@ChetanSharma-msft @Meghana-MSFT Selection clear button (X) is also not working. When we click on X icon it opens the choices dropdown instead of clearing the selections.

search.clear.mov

[Meghana-MSFT]

Thank you for the video, we have shared the videos with engineering team. we will get back to you.

[shubham-betterworks]

@Meghana-MSFT any updates???

[Meghana-MSFT]

We are checking with the engineering team for an update. Please be assured that I will post here as soon as I have an update from engineering team. Thanks.

Update : Engineering team has confirmed that they are actively working on the issue mentioned. We currently do not have an ETA to share.

[Meghana-MSFT]

Please find the below updates for issues mentioned in this thread and #455

1. When the adaptive card with dynamic search and multiple selections true is used in Messaging extension the UI doesn't show the selected data properly(only shows x items selected) whereas when the same card is sent as a message from the bot the result is different - This is due to difference in one component being rendered by react and other by angular.

2. Selection clear button (X) is also not working. When we click on X icon it opens the choices dropdown instead of clearing the selections - Work item has been created to fix this issue.

3. When a default value is provided in the input.choiceset field with dynamic search functionality enabled in the adaptive card the messaging extension treats it as a placeholder and not an actual input value whereas the same card works fine when sent as a message from a bot in the chat - This is similar to 1st one, the issue is in difference of rendering. Team has said that if UI is the only bothering issue, parity will be maintained once everything is in react.

[shubham-betterworks]

@Meghana-MSFT thanks for the updates.

So there two internal work items which will fix these issues

1. Migration from angular to react (Resolves point 1 and point 3)
2. Bug ticket (Resolves point 2).

Point 1 and Point 3 and not just UI issues. They also impact the user experiences like the following scenarios

1. The user can't remove one of the selected items very easily
2. The user gets a feeling that the input is automatically filled but actually it is not

Also any ETA by when we can expect these issues resolved?

[Meghana-MSFT]

we currently do not have any ETA to share.