SOLVED

How to set focus to a control when (Windows) Teams app tab opened?

Copper Contributor

Hi,

 

This seems like it should be a simple task but it's not working...we would like to automatically set focus to a control when a Teams app (personal) tab is selected. Simple enough in JS or via the autofocus attribute and works fine either way via Teams in Chrome.

 

However in the Windows Teams app the focus doesn't happen...it seems like it will only work once the user has manually clicked somewhere within the tab.

 

Is this expected behaviour? Is there any way to automatically set control focus when a tab is opened?

 

Cheers,

Steve

5 Replies

@SteveWBYG - Thanks for reporting your issue. Could you please share screen recording of the issue for both Teams client to get more clarity?

Thanks @Nivedipa-MSFT. I don't know what help a screen recording would be - I have uploaded an image of my test tab not focusing(!) The code for this page is as follows:

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Focus Test</title>
</head>
<body>
	<form>
		<p>Testing focus...</p>
		<input type="text" id="textBox" />
	</form>
	<script>
		document.getElementById("textBox").focus();
	</script>
</body>
</html>

 

If I view this content via a Teams personal app tab in Chrome it works as expected - the focus is automatically set to the text control when the app/tab is selected and I can type straight into it.

 

In the Teams Windows desktop app it does NOT work - the focus is not set and I have to manually click into the text box to enter text. This is an extra unwanted step for the user.

 

I hope you can help - I would be happy to provide any further information you need, or test anything reasonable that you could recommend. Thanks!

@SteveWBYG - Thanks for the details. We have tested this on Teams Desktop Client version 1.6.00.4378.  We are able to repro your issue. We have raised a bug for the same. We will let you know once we get any updates on it. Thanks.

best response confirmed by SteveWBYG (Copper Contributor)
Solution
@SteveWBYG - We got an update from engineering team saying that currently this behavior is by design. We focus the frame around the app and you need to hit the tab key if you want to move focus into the app.
Thanks for the confirmation that we weren't missing something obvious - but IMHO this does not make for an ideal user experience. They click the app's icon then must click AGAIN inside our app's content to interact with it (most users will not be aware of the tab key option although that does work). It's also inconsistent with Teams in Chrome where focus IS automatically set to the app's content. I hope this behaviour might be improved in future!
1 best response

Accepted Solutions
best response confirmed by SteveWBYG (Copper Contributor)
Solution
@SteveWBYG - We got an update from engineering team saying that currently this behavior is by design. We focus the frame around the app and you need to hit the tab key if you want to move focus into the app.

View solution in original post