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.

Feature: Define an API to programmatically draw focus to focusable elements

See original GitHub issue

Is your feature request related to a problem? Please describe. Currently unable to programmatically draw focus to chakra components.

Describe the solution you’d like A standardized way to focus focusable elements. A couple potential solutions…

  • consistent ref names - for instance, components like Button, Input, Select, etc… can all have a ref available on the component named something like “input” or event “focusable”. This way focus can be drawn in the following way this.$refs.chakraSelect.$refs.input.focus() this.$refs.chakraButton.$refs.input.focus()
  • Having an explicit focus method available on the component itself this.$refs.chakraButton.focus()

Describe alternatives you’ve considered Currently I have to inspect the components/DOM and figure an implementation on a per component basis. The following implentations are currently how I draw focus to these components

  • Button - this.$refs.ckakraButton.$el.focus()
  • Input - this.$refs.chakraInput.$refs.input.focus()
  • Select - this.$refs.chakraSelect.$el.querySelector('select')?.focus()

Clearly theres no standardized way to do this (that I am aware of at least), I believe this adds significant value to component set and would love to see this feature available.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

dombavettacommented, Aug 20, 2020

@codebender828 That is exactly the API I had in mind. In the example above you can use the autofocus attribute and the browser would take of of that focus for you, I find a focus method most useful in situations where you may have something like a multi step form. Think Google sign in - it first shows a form with a single input asking for email and then transitions to the next step asking for password. Since these aren’t two separate pages we need to draw focus to the password input using JS.

This “internal component API mixin” you are referring to, is that the createStyledAttrsMixin, if not can you point me to it? createStyledAttrsMixin is about the only common mixin I saw used after skimming a handful of components.

dombavettacommented, Aug 31, 2020

No worries, hope you are feeling refreshed! And yes I was thinking I could probably implement this. Slightly off topic, but I’ve noted a couple bugs I’ve encountered while working through my project. I’ll start opening issues for those when I get some time to thoroughly investigate and determine its library level and not me misinterpreting documentation or just flat out consuming the components incorrectly. So… expect a couple more issues to pop up in the near future 😄

Read more comments on GitHub >

github_iconTop Results From Across the Web

Programmatically focus an element's first eligable child?
Yes you can write a method to find the first focusable element within your visible box and then set the focus. Sandbox Example...
Read more >
How to Use the Focus Subsystem - Oracle Help Center
This Swing Java Tutorial describes developing graphical user interfaces (GUIs) for applications and applets using Swing components.
Read more >
Keyboard-navigable JavaScript widgets - Accessibility | MDN
Use element.focus() to set focus · Use onfocus to track the current focus. Don't assume that all focus changes will come via key...
Read more >
Focus Overview - WPF .NET Framework - Microsoft Learn
Keyboard focus refers to the element that is currently receiving keyboard input. There can be only one element on the whole desktop that...
Read more >
Programmatically setting focus navigation start point? #5326
Strawman API proposal: el.focus({ setActiveElement: false });. This would unfocus the current active element, and set the focus navigation start point to el ......
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 Post

No results found

github_iconTop Related Hashnode Post

No results found