Can anyone check why manual setFocus not working as expected

[hanif khan]

Describe the bug
I'm trying to focus on first button with value "btn 1" using setFocus but its not working as expected. but when i use focusSelf its working fine. Is there anything missing in this code.

To Reproduce
Steps to reproduce the behavior:

1. Open this code link and check app2.js code(https://codesandbox.io/p/sandbox/upbeat-wiles-42j3nf)

[TD]

@hhanifkhan: Hello!

In your examples you are passing a prop named focusKey to your focusable component, but you never pass this value to the useFocusable hook itself - Without this the hook cannot know what you want your focus key value to be, so it automatically generates one.

Basically you are missing this important part that I've commented next to in this example:

const CoolButton = ({focusKey}) => {
  const {focused, ref} = useFocusable({
    focusKey: 'MY_BUTTONS_FOCUS_KEY' // <-- Add this, hardcode a value to check, or use your focusKey prop!
  });

  return <button ref={ref} style={{background: focused ? '#f0f' : '#0f0'}}>I'm a button!</>;
};

Now that you've done this the hook will know of this focus key and doing this will work as you expect:

setFocus('MY_BUTTONS_FOCUS_KEY');

Best of luck to you!

Closing this as it's not an issue.

[hanif khan]

Thanks