Storybook Decorator for Auto Focus

AutoFocusStory.tsx

import React, { useCallback } from 'react';

/**
 * Storybook Decorator
 *
 * Auto click the first focusable element.
 */
const AutoFocusStory = (storyFn: () => {} | null | undefined) => {
  const autofocus = useCallback((node: HTMLDivElement) => {
    const element = node.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
    if (element instanceof HTMLElement) {
      element.click();
    }
  }, []);

  return (
    <div ref={autofocus}>
      {storyFn()}
    </div>
  );
};

export default AutoFocusStory;