Button can't be clickable when clicking the center of it

[AmyLi0728]

Steps to reproduce

Broswer: chrome 111 or 120
card json:
{
"task": {
"value": {
"card": {
"content": {
"type": "AdaptiveCard",
"body": [
{
"items": [],
"id": "empty-container",
"separator": false,
"type": "Container"
},
{
"items": [
{
"columns": [
{
"width": "auto",
"items": [
{
"horizontalAlignment": null,
"size": "small",
"style": null,
"url": "https://as-prod.asyncgw.teams.microsoft.com/v1/objects/0-ea-d2-06fc8919d449e838b84e439e8f09f726/views/img_preview",
"height": "auto",
"id": "tile-icon:Manage My Data",
"separator": false,
"type": "Image"
}
],
"verticalContentAlignment": "center",
"id": "tile-first-column:Manage My Data",
"separator": false,
"type": "Column"
},
{
"width": "stretch",
"items": [
{
"color": null,
"horizontalAlignment": null,
"isSubtle": false,
"maxLines": 0,
"size": "medium",
"text": "Manage My Data",
"weight": "bolder",
"wrap": true,
"id": "tile-title:Manage My Data",
"separator": false,
"type": "TextBlock"
}
],
"verticalContentAlignment": "center",
"bleed": true,
"id": "tile-second-column:Manage My Data",
"separator": false,
"type": "Column"
},
{
"width": "auto",
"items": [
{
"actions": [
{
"data": {
"id": "tile-action-data:Manage My Data",
"msteams": {
"type": "task/fetch"
},
"requestType": "command",
"namespace": "worktech-ec",
"command": "TeamsWebAppEntry",
"step": "showECSnackList",
"_commandSession": {
"userId": "103106"
},
"path": "",
"_actionTitle": "Manage My Data"
},
"iconUrl": "https://as-prod.asyncgw.teams.microsoft.com/v1/objects/0-ea-d9-9540fd54c8c7450b3961dbb2bf42510b/views/img_preview",
"id": "tile-submit-action:Manage My Data",
"tooltip": "Manage My Data",
"type": "Action.Submit"
}
],
"id": "tile-action-set:Manage My Data",
"separator": false,
"type": "ActionSet"
}
],
"id": "tile-third-column:Manage My Data",
"separator": false,
"type": "Column"
}
],
"id": "tile-item:Manage My Data",
"separator": false,
"type": "ColumnSet"
}
],
"style": "emphasis",
"id": "tile-container:Manage My Data",
"spacing": "Small",
"separator": false,
"height": "stretch",
"type": "Container"
},
{
"items": [
{
"columns": [
{
"width": "auto",
"items": [
{
"horizontalAlignment": null,
"size": "small",
"style": null,
"url": "https://as-prod.asyncgw.teams.microsoft.com/v1/objects/0-ea-d6-8351b1a9bd9669202105bdddfad613de/views/img_preview",
"height": "auto",
"id": "tile-icon:Manage My Team",
"separator": false,
"type": "Image"
}
],
"verticalContentAlignment": "center",
"id": "tile-first-column:Manage My Team",
"separator": false,
"type": "Column"
},
{
"width": "stretch",
"items": [
{
"color": null,
"horizontalAlignment": null,
"isSubtle": false,
"maxLines": 0,
"size": "medium",
"text": "Manage My Team",
"weight": "bolder",
"wrap": true,
"id": "tile-title:Manage My Team",
"separator": false,
"type": "TextBlock"
}
],
"verticalContentAlignment": "center",
"bleed": true,
"id": "tile-second-column:Manage My Team",
"separator": false,
"type": "Column"
},
{
"width": "auto",
"items": [
{
"actions": [
{
"data": {
"id": "tile-action-data:Manage My Team",
"msteams": {
"type": "task/fetch"
},
"requestType": "command",
"namespace": "worktech-ec",
"command": "TeamsWebAppEntry",
"step": "showDirectReports",
"_commandSession": {
"userId": "103106"
},
"path": "",
"_actionTitle": "Manage My Team"
},
"iconUrl": "https://as-prod.asyncgw.teams.microsoft.com/v1/objects/0-ea-d3-604f67c4b09c2e4e2ad97b1d80662924/views/img_preview",
"id": "tile-submit-action:Manage My Team",
"tooltip": "Manage My Team",
"type": "Action.Submit"
}
],
"id": "tile-action-set:Manage My Team",
"separator": false,
"type": "ActionSet"
}
],
"id": "tile-third-column:Manage My Team",
"separator": false,
"type": "Column"
}
],
"id": "tile-item:Manage My Team",
"separator": false,
"type": "ColumnSet"
}
],
"style": "emphasis",
"id": "tile-container:Manage My Team",
"spacing": "Small",
"separator": false,
"height": "stretch",
"type": "Container"
},
{
"items": [
{
"columns": [
{
"width": "auto",
"items": [
{
"horizontalAlignment": null,
"size": "small",
"style": null,
"url": "https://as-prod.asyncgw.teams.microsoft.com/v1/objects/0-ea-d3-66e41d257227a4d6f79ea4a44100c02a/views/img_preview",
"height": "auto",
"id": "tile-icon:Request Feedback",
"separator": false,
"type": "Image"
}
],
"verticalContentAlignment": "center",
"id": "tile-first-column:Request Feedback",
"separator": false,
"type": "Column"
},
{
"width": "stretch",
"items": [
{
"color": null,
"horizontalAlignment": null,
"isSubtle": false,
"maxLines": 0,
"size": "medium",
"text": "Request Feedback",
"weight": "bolder",
"wrap": true,
"id": "tile-title:Request Feedback",
"separator": false,
"type": "TextBlock"
}
],
"verticalContentAlignment": "center",
"bleed": true,
"id": "tile-second-column:Request Feedback",
"separator": false,
"type": "Column"
},
{
"width": "auto",
"items": [
{
"actions": [
{
"data": {
"id": "tile-action-data:Request Feedback",
"msteams": {
"type": "task/fetch"
},
"requestType": "command",
"namespace": "worktech-feedback",
"command": "RequestFeedback",
"step": "requestFeedbackFormStep",
"_commandSession": {
"userId": "103106"
},
"path": "",
"_actionTitle": "Request Feedback"
},
"iconUrl": "https://as-prod.asyncgw.teams.microsoft.com/v1/objects/0-ea-d10-5a921ea1cba83c33b3baec79412a3dad/views/img_preview",
"id": "tile-submit-action:Request Feedback",
"tooltip": "Request Feedback",
"type": "Action.Submit"
}
],
"id": "tile-action-set:Request Feedback",
"separator": false,
"type": "ActionSet"
}
],
"id": "tile-third-column:Request Feedback",
"separator": false,
"type": "Column"
}
],
"id": "tile-item:Request Feedback",
"separator": false,
"type": "ColumnSet"
}
],
"style": "emphasis",
"id": "tile-container:Request Feedback",
"spacing": "Small",
"separator": false,
"height": "stretch",
"type": "Container"
},
{
"items": [
{
"columns": [
{
"width": "auto",
"items": [
{
"horizontalAlignment": null,
"size": "small",
"style": null,
"url": "https://as-prod.asyncgw.teams.microsoft.com/v1/objects/0-ea-d11-62a1771c13f8a4b6333f099a35407914/views/img_preview",
"height": "auto",
"id": "tile-icon:Give Feedback",
"separator": false,
"type": "Image"
}
],
"verticalContentAlignment": "center",
"id": "tile-first-column:Give Feedback",
"separator": false,
"type": "Column"
},
{
"width": "stretch",
"items": [
{
"color": null,
"horizontalAlignment": null,
"isSubtle": false,
"maxLines": 0,
"size": "medium",
"text": "Give Feedback",
"weight": "bolder",
"wrap": true,
"id": "tile-title:Give Feedback",
"separator": false,
"type": "TextBlock"
}
],
"verticalContentAlignment": "center",
"bleed": true,
"id": "tile-second-column:Give Feedback",
"separator": false,
"type": "Column"
},
{
"width": "auto",
"items": [
{
"actions": [
{
"data": {
"id": "tile-action-data:Give Feedback",
"msteams": {
"type": "task/fetch"
},
"requestType": "command",
"namespace": "worktech-feedback",
"command": "GiveFeedback",
"step": "giveFeedbackFormStep",
"_commandSession": {
"userId": "103106"
},
"path": "",
"_actionTitle": "Give Feedback"
},
"iconUrl": "https://as-prod.asyncgw.teams.microsoft.com/v1/objects/0-ea-d8-9ae219855c7aa7e8655f7c2fa49df27e/views/img_preview",
"id": "tile-submit-action:Give Feedback",
"tooltip": "Give Feedback",
"type": "Action.Submit"
}
],
"id": "tile-action-set:Give Feedback",
"separator": false,
"type": "ActionSet"
}
],
"id": "tile-third-column:Give Feedback",
"separator": false,
"type": "Column"
}
],
"id": "tile-item:Give Feedback",
"separator": false,
"type": "ColumnSet"
}
],
"style": "emphasis",
"id": "tile-container:Give Feedback",
"spacing": "Small",
"separator": false,
"height": "stretch",
"type": "Container"
},
{
"items": [
{
"columns": [
{
"width": "auto",
"items": [
{
"horizontalAlignment": null,
"size": "small",
"style": null,
"url": "https://as-prod.asyncgw.teams.microsoft.com/v1/objects/0-ea-d1-2160cc79509f6372c7cd5933d345fbf7/views/img_preview",
"height": "auto",
"id": "tile-icon:Clock My Time",
"separator": false,
"type": "Image"
}
],
"verticalContentAlignment": "center",
"id": "tile-first-column:Clock My Time",
"separator": false,
"type": "Column"
},
{
"width": "stretch",
"items": [
{
"color": null,
"horizontalAlignment": null,
"isSubtle": false,
"maxLines": 0,
"size": "medium",
"text": "Clock My Time",
"weight": "bolder",
"wrap": true,
"id": "tile-title:Clock My Time",
"separator": false,
"type": "TextBlock"
}
],
"verticalContentAlignment": "center",
"bleed": true,
"id": "tile-second-column:Clock My Time",
"separator": false,
"type": "Column"
},
{
"width": "auto",
"items": [
{
"actions": [
{
"data": {
"id": "tile-action-data:Clock My Time",
"msteams": {
"type": "task/fetch"
},
"requestType": "command",
"namespace": "cico",
"command": "ClockInClockOut",
"step": "clockInClockOutMainStep",
"_commandSession": {
"userId": "103106"
},
"path": "",
"_actionTitle": "Clock My Time"
},
"iconUrl": "https://as-prod.asyncgw.teams.microsoft.com/v1/objects/0-ea-d5-30512ce80207bbab5cbe62c907d3b62d/views/img_preview",
"id": "tile-submit-action:Clock My Time",
"tooltip": "Clock My Time",
"type": "Action.Submit"
}
],
"id": "tile-action-set:Clock My Time",
"separator": false,
"type": "ActionSet"
}
],
"id": "tile-third-column:Clock My Time",
"separator": false,
"type": "Column"
}
],
"id": "tile-item:Clock My Time",
"separator": false,
"type": "ColumnSet"
}
],
"style": "emphasis",
"id": "tile-container:Clock My Time",
"spacing": "Small",
"separator": false,
"height": "stretch",
"type": "Container"
},
{
"items": [
{
"columns": [
{
"width": "auto",
"items": [
{
"horizontalAlignment": null,
"size": "small",
"style": null,
"url": "https://as-prod.asyncgw.teams.microsoft.com/v1/objects/0-ea-d5-ef38eab2cdc76b859eb9351c155ce93e/views/img_preview",
"height": "auto",
"id": "tile-icon:View My Pay Statement",
"separator": false,
"type": "Image"
}
],
"verticalContentAlignment": "center",
"id": "tile-first-column:View My Pay Statement",
"separator": false,
"type": "Column"
},
{
"width": "stretch",
"items": [
{
"color": null,
"horizontalAlignment": null,
"isSubtle": false,
"maxLines": 0,
"size": "medium",
"text": "View My Pay Statement",
"weight": "bolder",
"wrap": true,
"id": "tile-title:View My Pay Statement",
"separator": false,
"type": "TextBlock"
}
],
"verticalContentAlignment": "center",
"bleed": true,
"id": "tile-second-column:View My Pay Statement",
"separator": false,
"type": "Column"
},
{
"width": "auto",
"items": [
{
"actions": [
{
"data": {
"id": "tile-action-data:View My Pay Statement",
"msteams": {
"type": "task/fetch"
},
"requestType": "command",
"namespace": "payroll",
"command": "PayStatement",
"step": "viewPayStatementStep",
"_commandSession": {
"userId": "103106"
},
"path": "/paystatement/entry",
"_actionTitle": "View My Pay Statement"
},
"iconUrl": "https://as-prod.asyncgw.teams.microsoft.com/v1/objects/0-ea-d2-32513acf6160c1c27cee24e19b75e312/views/img_preview",
"id": "tile-submit-action:View My Pay Statement",
"tooltip": "View My Pay Statement",
"type": "Action.Submit"
}
],
"id": "tile-action-set:View My Pay Statement",
"separator": false,
"type": "ActionSet"
}
],
"id": "tile-third-column:View My Pay Statement",
"separator": false,
"type": "Column"
}
],
"id": "tile-item:View My Pay Statement",
"separator": false,
"type": "ColumnSet"
}
],
"style": "emphasis",
"id": "tile-container:View My Pay Statement",
"spacing": "Small",
"separator": false,
"height": "stretch",
"type": "Container"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5"
},
"contentType": "application/vnd.microsoft.card.adaptive"
},
"width": "small",
"title": "Try out the features we picked for you"
},
"type": "continue"
},
"responseType": "task"
}

Screen.Recording.2024-06-17.at.17.48.24.mov

Expected behavior

button should be clickable

Actual behavior

not clickable

Error details

No response

[AmyLi0728]

But for chrome 125, button can be clickable, please noted. Thanks

[Nivedipa-MSFT]

@AmyLi0728 - Thanks for reporting your issue. We will test this and update you soon.

[AmyLi0728]

Hi Team,
I found this issue is not related to chrome version, maybe your teams version,
it doesn't work for "1415/24051622220", but works for "1415/24050307617", please check.
but I want to know why keep different versions for different users in same company and same environment.
Thanks,
Amy

[Nivedipa-MSFT]

@AmyLi0728 - We have tested this on Microsoft Teams version 24166.1700.2940.9537 desktop client. Its working fine at our end.

Clickable_Issue.webm

Could you please update the Teams version and check again?

[AmyLi0728]

Hi, team,
From your video, I see your buttons are not rendered correctly, can you create a button with icon by using adaptive card to have a test? And our manual test and automation test are based on Web client by using chrome, It diesn't work for Web chrome with teams version "1415/24051622220"

Thanks,
Amy

[AmyLi0728]

Hi, team,
I have checked just now with desktop client, it doesn't work too, and the version information is

Screen.Recording.2024-06-20.at.11.16.03.mov

Thanks,
Amy

[AmyLi0728]

Hi Team,
Is there any update for this issue? it's urgent for us.
Thanks,
Amy

[Nivedipa-MSFT]

@AmyLi0728 - We have tested this on Chrome version 126.0.6478.115 and Teams version 1415/24051622220.
And also tested on Teams desktop version 24171.1500.2949.5639.
We are able to repro your issue.

Chrome:
Chrome.webm

Teams Desktop Client:
Teams_Desktop.webm

We have raised a bug for the same. We will let you know once we get any updates on it.

[AmyLi0728]

Hi Team,
Is there any update for this bug? it blocked our work.
Thanks,
Amy

[AmyLi0728]

Hi Team,
When will you plan to release this fix? this is a function issue, and blocked our feature in production, many customers complain with this issue, so could you please take high priority for this issue? Very appreciate.
Thanks,
Amy

[Nivedipa-MSFT]

@AmyLi0728 - We are checking the status of the bug with the engineering team, we will inform you once we get any updates on it.

[AmyLi0728]

Hi team,

We found in version “Ring: Canary (R0)”, the icon button can be clicked, but not for public Ring version. So have you resolved this bug? whether will we just need to wait this fix to release? and when will this fix be available for public?

Thanks,
Amy