Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Since 4.5, Adaptive Card Inputs won't focus #1680

Closed
mdrichardson opened this issue Jul 12, 2019 · 7 comments · Fixed by #1681 or #1690
Closed

Since 4.5, Adaptive Card Inputs won't focus #1680

mdrichardson opened this issue Jul 12, 2019 · 7 comments · Fixed by #1681 or #1690
Assignees
Labels
Approved Approved by the Triage team Bug Your classic code defect P0 Must Fix. Release-blocker

Comments

@mdrichardson
Copy link

Version

4.5.0

Describe the bug

Unable to use most Adaptive Card input fields. It seems to lose focus as soon as I click in the input field and text immediately disappears. See gif.

9009d58f-566e-4ca0-a0fe-90860260d3eb

To Reproduce

Try this:

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "text": "Test Adaptive Card"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Text:"
                        }
                    ],
                    "width": 20
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Input.Text",
                            "id": "userText",
                            "placeholder": "Enter Some Text"
                        }
                    ],
                    "width": 80
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}
import * as cardJson from './adaptiveCard.json';

this.addDialog(new TextPrompt('textPrompt'));

const card = CardFactory.adaptiveCard(cardJson);
const msg = MessageFactory.text('');
msg.attachments = [card];
await step.context.sendActivity(msg);
return await step.prompt('textPrompt', 'test');

Expected behavior

Able to use Adaptive Card inputs.

Additional context

@tdurnford says WebChat seems to work fine, still.

[bug]

@mdrichardson mdrichardson added the Bug Your classic code defect label Jul 12, 2019
@corinagum
Copy link
Contributor

+1 on Web Chat no-repro; I just verified on 4.5 bits.

@tonyanziano
Copy link
Contributor

Taking a look now

@tonyanziano
Copy link
Contributor

tonyanziano commented Jul 12, 2019

I've confirmed it's an Emulator bug. (I tried it on the same Emulator bits, but one with webchat@4.4.2 & one with @4.5.0 and they both reprod)

I believe it has something to do with the logic that highlights the selected activity when we click inside of it.

===

UPDATE: Found the issue. Working on a fix.

@tonyanziano
Copy link
Contributor

Workaround for now:

Tabbing into the adaptive card input field and typing works as expected. Clicking into the field is what causes the issue.

@MarcBollmann
Copy link

Version

4.5.1

Describe the Bug

Unable to use Adaptive Card input fields. It seems to lose focus as soon as I click in the input field and text immediately disappears. Like above.. If I use right-click to enter value per value it works, but when the Card is out of focus the input gets removed again.

To Reproduce

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "items": [
        {
          "type": "TextBlock",
          "text": "Create Ticket",
          "size": "ExtraLarge"
        },
        {
          "type": "TextBlock",
          "text": "You already entered this information"
        },
        {
          "type": "Container",
          "items": [
            {
              "type": "FactSet",
              "facts": [
              ]
            },
            {
              "type": "TextBlock",
              "text": "What's your problem?*"
            },
            {
              "type": "Input.Text",
              "placeholder": "Describe your problem",
              "isMultiline": true,
              "id": "input_problem"
            },
            {
              "type": "TextBlock",
              "text": "Do you have an error-code?"
            },
            {
              "type": "Input.Text",
              "placeholder": "Paste in your error-code if you have one",
              "isMultiline": true,
              "id": "input_errorcode"
            }
          ]
        }
      ],
      "type": "Container"
    },
    {
      "type": "Container",
      "items": [
        {
          "type": "FactSet",
          "facts": [
            {
              "title": "Submitted By",
              "value": "UserNameHere"
            },
            {
              "title": "Submitted On",
              "value": "DateHere"
            }
          ]
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Submit",
      "data": {
        "action": "submit"
      },
      "style": "positive",
      "id": "submit"
    },
    {
      "type": "Action.Submit",
      "title": "Cancel",
      "data": {
        "action": "cancel"
      },
      "style": "destructive",
      "id": "cancel"
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "lang": "en"
}

@tonyanziano
Copy link
Contributor

I can repro this, and it's because the example you are using is a <textarea> tag and not an <input> tag which is what #1681 fixed.

Today I will work on a fix for all the different inputs within adaptive cards, and I think we will push out a patch as well. I'll keep this thread updated.

@tonyanziano
Copy link
Contributor

This issue has been fixed in the newest release, 4.5.2, available now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Approved Approved by the Triage team Bug Your classic code defect P0 Must Fix. Release-blocker
Projects
None yet
5 participants