[Javascript][Renderer] [TextBlock not well handle maxLines that clips the text at wrong position]

[yingliao]

Platform

What platform is your issue or question related to? (Delete other platforms).

• .NET HTML
• .NET WPF
• Android
• iOS
• JavaScript
• UWP

Author or host

I'm developer from Microsoft Teams platform (bots & apps team).

Version of SDK

1.2 (actually it happens for any version)

Details

Here's the original bug reported to our team that should belong to SDK issue:
https://domoreexp.visualstudio.com/MSTeams/_workitems/edit/1423672

Repro:

1. Copy & paste the card payload (as attached below) to official designer https://adaptivecards.io/designer/
2. Observe the multiline text clips at wrong position (screenshot as attached).

{
  "type": "AdaptiveCard",
  "body": [
    {
      "items": [
        {
          "columns": [
            {
              "width": "auto",
              "items": [
                {
                  "size": "small",
                  "url": "https://urlp.asm.skype.com/v1/url/content?url=https%3a%2f%2fdebra10.atlassian.net%2fsecure%2fviewavatar%3fsize%3dlarge%26avatarId%3d10318%26avatarType%3dissuetype%26format%3dpng",
                  "height": "auto",
                  "spacing": "none",
                  "type": "Image"
                }
              ],
              "verticalContentAlignment": "center",
              "type": "Column"
            },
            {
              "width": "stretch",
              "items": [
                {
                  "maxLines": 1,
                  "size": "small",
                  "text": "Jira cloud",
                  "spacing": "none",
                  "type": "TextBlock"
                },
                {
                  "text": "JC-1",
                  "spacing": "none",
                  "type": "TextBlock"
                }
              ],
              "verticalContentAlignment": "center",
              "type": "Column"
            },
            {
              "width": "auto",
              "items": [
                {
                  "color": "accent",
                  "horizontalAlignment": "right",
                  "text": "**Unwatch issue**",
                  "spacing": "none",
                  "type": "TextBlock"
                }
              ],
              "selectAction": {
                "data": {
                  "command": "unwatch JC-1"
                },
                "title": "Unwatch issue",
                "type": "Action.Submit"
              },
              "spacing": "none",
              "type": "Column"
            }
          ],
          "type": "ColumnSet"
        },
        {
          "columns": [
            {
              "width": "stretch",
              "items": [
                {
                  "color": "dark",
                  "maxLines": 3,
                  "text": "[Issue ](https://debra10.atlassian.net/browse/JC-1?atlOrigin=eyJpIjoiNGQ2YTg5MzY0Yzg4NDI5NTg4NzE4Y2QzZjI0Mzc5ODkiLCJwIjoiamlyYS1tc3RlYW1zIn0)",
                  "wrap": true,
                  "spacing": "none",
                  "type": "TextBlock"
                },
                {
                  "isSubtle": true,
                  "text": "Backlog | Medium | 12/18/2020",
                  "weight": "lighter",
                  "spacing": "small",
                  "type": "TextBlock"
                },
                {
                  "facts": [
                    {
                      "title": "Reporter:",
                      "value": "Debra Berger"
                    },
                    {
                      "title": "Assignee:",
                      "value": "Unassigned"
                    }
                  ],
                  "spacing": "small",
                  "type": "FactSet"
                },
                {
                  "columns": [
                    {
                      "width": "auto",
                      "items": [
                        {
                          "color": "accent",
                          "text": "_(Assign to me)_",
                          "spacing": "none",
                          "type": "TextBlock"
                        }
                      ],
                      "selectAction": {
                        "data": {
                          "command": "assign JC-1"
                        },
                        "title": "Assign to me",
                        "type": "Action.Submit"
                      },
                      "type": "Column"
                    }
                  ],
                  "spacing": "none",
                  "type": "ColumnSet"
                }
              ],
              "type": "Column"
            }
          ],
          "spacing": "small",
          "type": "ColumnSet"
        },
        {
          "maxLines": 2,
          "text": "\nTeams\n\nProfile picture of Electron 10 LKG6.\nJira Cloud\n\n\n\n\n\n\nMeet \n\nJira Cloud app icon\nJira Cloud\nCreate an issue\n\n      \n",
          "wrap": true,
          "type": "TextBlock"
        }
      ],
      "type": "Container"
    }
  ],
  "actions": [
    {
      "card": {
        "type": "AdaptiveCard",
        "body": [
          {
            "text": "Add your comment to JC-1",
            "type": "TextBlock"
          },
          {
            "isMultiline": true,
            "id": "commentText",
            "type": "Input.Text"
          }
        ],
        "actions": [
          {
            "data": {
              "command": "cancel"
            },
            "title": "Cancel",
            "type": "Action.Submit"
          },
          {
            "data": {
              "command": "comment JC-1"
            },
            "title": "Save",
            "type": "Action.Submit"
          }
        ],
        "version": "1.2"
      },
      "title": "Comment",
      "type": "Action.ShowCard"
    },
    {
      "data": {
        "fetchTaskData": {
          "commandName": "editIssue",
          "issueId": "10011",
          "issueKey": "JC-1"
        },
        "msteams": {
          "type": "task/fetch"
        }
      },
      "title": "Edit",
      "type": "Action.Submit"
    },
    {
      "data": {
        "msteams": {
          "type": "imBack",
          "value": "log JC-1"
        }
      },
      "title": "Log Work",
      "type": "Action.Submit"
    }
  ],
  "version": "1.2"
}

[ghost]

please review this issue for target Milestone, Inconsistencies & Priority upon triage.

[shalinijoshi19]

@dclaux / @paulcam206 yet another text clipped issue; Is this a dup of #4847 ?

[ghost]

Hi @yingliao. We have acknowledged this issue report. Please continue to follow this issue for updates/progress/questions.

[dclaux]

As a matter of fact I fixed this yesterday, check out this PR: #5307

The fix will be in our next SDK release, and Teams will have to take a dependency on it.