question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Checkbox] Programmatically setting focus does not give the same effect as you would use tab

See original GitHub issue

When you use “TAB” and you select a checkbox it looks like in picture1. If you set programmatically the focus of the checkbox it does not have the effect. If you set the checkbox programmatically it doesn`t have the effect and looks like in picture2.

checkbox_materialui (Picture1)

checkbox2 (Picture2)

  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Picture1

Current Behavior

Picture2

Steps to Reproduce (for bugs)

<Checkbox
	checked={true}
	inputRef={ ref => this.myReference= ref}
/>

And then make a timer that waits a few seconds before you set the focus: this.myReference.focus();

Sorry, I tried Codesandbox, but I didn`t get it working 😕

Environment

Tech Version
Material-UI Beta25
React 16.2.0
browser Chrome

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:3
  • Comments:18 (10 by maintainers)

github_iconTop GitHub Comments

2reactions
mackankowskicommented, Oct 7, 2020

@Paul6552 Right, the browser focus stay at the same location. It needs to be moved manually https://codesandbox.io/s/j3ywrj7rrv. So, should calling focusVisible() move the focus too. Well, I would say yes. @tkvw What do you think?

capture d ecran 2018-12-01 a 11 04 47

My working sample based on @Paul6552’s code (using functional component and hooks):

https://codesandbox.io/s/mui-checkbox-set-visible-focus-programmatically-40vv3?file=/index.js

Enjoy!

1reaction
Paul6552commented, Oct 7, 2020

@mackankowski I have a really strange behavior in your example if I use the “tab”-key on my keyboard. Start your codesandbox example. Click once on the button “Set focus”. Don`t click anywhere else after this click. Now on your keyboard click the tab-key. Suddenly both (Checkbox AND Button) have the focus.

image

Read more comments on GitHub >

github_iconTop Results From Across the Web

[Checkbox] Programmatically setting focus does not give ...
I have a really strange behavior in your example if I use the "tab"-key on my keyboard. Start your codesandbox example. Click once...
Read more >
How to set same md-checkbox focus outline for all ...
I 'll try to explain. On almost all browsers tabbing between checkboxes works fine. On Firefox sometimes checkbox is focused but there is...
Read more >
Control focus with tabindex - web.dev
Try pressing the Tab key to navigate through your site. Are you able to reach all the interactive controls on the page? If...
Read more >
Trapping Focus Within An Element Using Tab-Key ...
Ben Nadel looks at how to programmatically keep focus within a container element (such as a modal window) using JavaScript when the user...
Read more >
Focusing: focus/blur
An element receives the focus when the user either clicks on it or uses the Tab key on the keyboard. There's also an...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found