[Checkbox] Programmatically setting focus does not give the same effect as you would use tab
See original GitHub issueWhen 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.
(Picture1)
(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:
- Created 6 years ago
- Reactions:3
- Comments:18 (10 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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!
@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.