@atlaskit/editor-plugin-media-insert/dist/es2019/ui/hooks/use-unholy-autofocus.js

Media Insert plugin for @atlaskit/editor-core

import React, { useEffect } from 'react';
/**
 * Autofocuses the first interactive element in the first tab panel
 * when the media picker is opened.
 *
 * This is to mitigate the issue where the PopupWithListeners component
 * renders initially at the top of the editor and then repositioned.
 *
 * We want to autofocus after the repositioning to ensure we don't scroll
 * to the top of the editor when the media picker is opened.
 */
export const useUnholyAutofocus = () => {
  const autofocusRef = React.useRef(null);
  const positionRef = React.useRef(null);
  const onPositionCalculated = React.useCallback(position => {
    if (positionRef.current === null) {
      // Initial position is _always incorrect, so the first time this is set
      // we're going to ignore it.
      positionRef.current = position;
    } else if (positionRef.current !== position) {
      var _autofocusRef$current;
      // If it isn't the first position and it has changed, we're likely in
      // the actual position we want. We'll call focus and update the position.
      (_autofocusRef$current = autofocusRef.current) === null || _autofocusRef$current === void 0 ? void 0 : _autofocusRef$current.focus();
      positionRef.current = position;
    }

    // Important to return this as the popup uses the returned position
    return position;
  }, [autofocusRef]);

  /**
   * If we don't clear the ref, then reopening the media picker will
   * not correctly focus the button.
   *
   * WARNING: If the component re-renders the ref will be cleared and
   * the button will be focused again.
   *
   * This is a trade-off, we prefer that the button is correctly focused
   * if the media picker is re-opened, rather than re-focusing the button
   * if the component re-renders/ the browser window is resized.
   *
   * This is a temporary solution until we can find a better way to do it.
   */
  useEffect(() => {
    return () => {
      positionRef.current = null;
    };
  });
  return {
    autofocusRef,
    onPositionCalculated
  };
};