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

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.

[dombavetta]

@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.

[dombavetta]

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 😄