feat(requests): Request Overrides & Request Editing (#653)

src/components/Common/SlideOver/index.tsx

@@ -1,8 +1,8 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { useState, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import Transition from '../../Transition';
 import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
-import useClickOutside from '../../../hooks/useClickOutside';
 
 interface SlideOverProps {
   show?: boolean;
@@ -21,9 +21,6 @@ const SlideOver: React.FC<SlideOverProps> = ({
   const [isMounted, setIsMounted] = useState(false);
   const slideoverRef = useRef(null);
   useLockBodyScroll(show);
-  useClickOutside(slideoverRef, () => {
-    onClose();
-  });
 
   useEffect(() => {
     setIsMounted(true);
@@ -44,8 +41,15 @@ const SlideOver: React.FC<SlideOverProps> = ({
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
       <div
         className={`z-50 fixed inset-0 overflow-hidden bg-opacity-50 bg-gray-800`}
+        onClick={() => onClose()}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') {
+            onClose();
+          }
+        }}
       >
         <div className="absolute inset-0 overflow-hidden">
           <section className="absolute inset-y-0 right-0 flex max-w-full pl-10">
@@ -59,7 +63,12 @@ const SlideOver: React.FC<SlideOverProps> = ({
               leaveFrom="translate-x-0"
               leaveTo="translate-x-full"
             >
-              <div className="w-screen max-w-md" ref={slideoverRef}>
+              {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+              <div
+                className="w-screen max-w-md"
+                ref={slideoverRef}
+                onClick={(e) => e.stopPropagation()}
+              >
                 <div className="flex flex-col h-full overflow-y-scroll bg-gray-700 shadow-xl">
                   <header className="px-4 py-6 space-y-1 bg-indigo-600">
                     <div className="flex items-center justify-between space-x-3">