webpart in viva connection unexpected link behaviour issue

[jonathanhotono]

I have spfx webpart that contains link button <a href="javascript:void(0);" role="button">button</a> that has been used across multiple tenants. This webpart has been working fine on viva connection for a while until recently went inoperable, when clicking it tries to open a new blank tab/store instead.

Why does the behavior on MS teams viva changed all the sudden? I thought teams viva connection behavior should be the same as what we have on browser.

To replicate this issue simply create a webpart and test it through teams viva connection. <a href="javascript:void(0);" role="button">button</a>

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[AJIXuMuK]

@jonathanhotono - could you please provide few details?

• what is "recently" in this context?
• what behavior have you experienced before?

And to be clear: I would not recommend using JS in href as this is a security issue close to eval

[jonathanhotono]

Hi @AJIXuMuK

Recently means just this week. I had multiple clients reported that the webpart stops working on microsoft viva connection. Clicking on that link button would attempt to open microsoft store instead of executing a react onClick event.

Obviously javascript:void(0) means do nothing - don't reload, don't navigate, do not run any code. However Microsoft teams viva decides to acts differently by doing something unexpected by opening the store app.

[AJIXuMuK]

The fix has been done. It will be rolled out be the middle of December.

[jonathanhotono]

@AJIXuMuK thanks :)

[jonathanhotono]

@AJIXuMuK Update: the fixed seems rolled in, however I found another issue that never happened before where I have to hold ctrl+click to get it do something with javascript react onClick event. Without ctrl+click the onClick function won't trigger. Now all webparts that contains <a onClick={action} /> does not work correctly across multiple tenants viva connections.

Sample code below:

<a href="#" onClick={testAlert} data-interception="off">Click to launch alert in MS Teams></a>

const testAlert = (e) => {
  e.preventDefault();
  alert("hello world");
}

[AJIXuMuK]

@jonathanhotono - please, open a separate issue. It seems to be something unrelated.

[ghost]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues