PIMS-89 Investigate Removing react-click-away-listener

[dbarkowsky]

🎯 Summary

PIMS-89:

Looked at removing/replacing the react-click-away-listener with something custom.
It was working in all situations except one, which was just a strange implementation, I think.

Tried to write a custom one, which worked everywhere except the table filters. Ended up just keeping the existing package, as there's no strong reason to remove it at this point and it is working.

I'll include the custom code below for future use.

Also had to add console.error suppression for a recently updated test.

🔰 Checklist

• I have read and agree with the following checklist and am following the guidelines in our Code of Conduct document.

• I have performed a self-review of my code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation where required.
• I have tested my changes to the best of my ability.
• My changes generate no new warnings.

[dbarkowsky]

The custom clickaway listener that didn't end up getting included:

import React, { MutableRefObject, useMemo, useRef } from 'react';

/**
 * Hook that alerts clicks outside of the passed ref
 */
const useOutsideAlerter = (ref: MutableRefObject<unknown>, onClickAway: () => void) => {
  useMemo(() => {
    /**
     * Alert if clicked on outside of element
     */
    const handleClickOutside: EventListener = (event) => {
      if (
        ref.current &&
        ref.current !== null &&
        !(ref.current as HTMLDivElement).contains(event.target as Node)
      ) {
        onClickAway();
      }
    };
    // Bind the event listener
    document.addEventListener('mouseup', handleClickOutside);
    return () => {
      // Unbind the event listener on clean up
      document.removeEventListener('mouseup', handleClickOutside);
    };
  }, [ref]);
};

interface IClickAwayListenerProps {
  children: React.ReactElement;
  onClickAway: () => void;
}

/**
 * Component that alerts if you click outside of it
 */
const ClickAwayListener = (props: IClickAwayListenerProps) => {
  const { children, onClickAway } = props;
  const wrapperRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
  useOutsideAlerter(wrapperRef, onClickAway);

  return <div ref={wrapperRef}>{children}</div>;
};

export default ClickAwayListener;

[codeclimate]

Code Climate has analyzed commit 020d569 and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 100.0% (50% is the threshold).

This pull request will bring the total coverage in the repository to 55.4%.

View more on Code Climate.

[github-actions]

🚀 Deployment Information

The APP Image has been built with the tag: 1907. Please make sure to utilize this specific tag when promoting these changes to the TEST and PROD environments during the APP deployment. For more updates please monitor Image Tags Page on Wiki.