How to use the @chakra-ui/utils.getFirstTabbableIn function in @chakra-ui/utils

To help you get started, we’ve selected a few @chakra-ui/utils examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github chakra-ui / chakra-ui / packages / chakra-ui-hooks / src / useFocusOnShow.tsx View on Github external
React.useEffect(() => {
    const initialFocusRef = options.focusRef;
    const shouldFocus = options.visible && options.autoFocus;

    if (shouldFocus) {
      if (initialFocusRef && initialFocusRef.current) {
        ensureFocus(initialFocusRef.current);
      } else {
        if (ref.current) {
          const firstTabbable = getFirstTabbableIn(ref.current, true);
          if (firstTabbable) {
            ensureFocus(firstTabbable);
          } else {
            ensureFocus(ref.current);
          }
        }
      }
    }
  }, [options.visible, options.autoFocus, ref, options.focusRef]);
}