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

[dombavetta]

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.

[codebender828]

Hey @dombavetta ! I also think this is a good observation.

Thank you for capturing this. Since we have an internal component API mixin used to create most components, I think this would be a good place to locate the focus method for components that are focusable.

For clarity, I believe the API you're proposing is something like this for focusable components👇🏽?

In the consumer scope

<template>
  <c-button ref="chakraButton">
    Do something
  </c-button>
</template>

<script>
  export default {
    async mounted () {
      await this.$nextTick()
      this.$refs.chakraButton.focus()
    }
  }
</script>

[codebender828]

At the moment, I'm focused on handling transitions for components (#251), happy to have someone work on this while I guide the direction of implementation.

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

[codebender828]

Hey Dom! Sorry I haven't been able to respond to issues as usually do. Been spending some time with family recently seeing as I lost some family members.

Yes I think the createStyledAttrsMixin function is perfect for the job. It's the mixin I was talking about. Are you thinking of taking this on?

[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 😄