fix(Dropdown): fix visibility in Drawer context

securityscorecard · Jul 18, 2024 · 6c1a3e1 · 6c1a3e1
1 parent 06c839d
commit 6c1a3e1
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 7 deletions.
diff --git a/src/components/Dropdown/ControlledDropdown.tsx b/src/components/Dropdown/ControlledDropdown.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, forwardRef, useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { SpaceSizes } from '../../theme';
@@ -10,7 +10,6 @@ import DropdownPane from './DropdownPane';
 import { DropdownPlacements } from './Dropdown.enums';
 import { mergeRefs } from '../../utils/mergeRefs';
 import { useFocusTrap } from '../../hooks/useFocusTrap';
-import { useFloatingContext } from '../../contexts/FloatingContext';
 
 const ControlledDropdown = forwardRef<
   HTMLDivElement,
@@ -45,12 +44,9 @@ const ControlledDropdown = forwardRef<
 
     useFocusTrap({ el: paneEl, enabled: isOpen && focusTrap });
     const { Portal } = usePortal();
-    const isInFloatingElement = useFloatingContext() ?? false;
-
-    const MaybePortal = isInFloatingElement ? Fragment : Portal;
 
     return isOpen ? (
-      <MaybePortal>
+      <Portal>
         <DropdownPane
           ref={mergeRefs(ref, setPaneEl)}
           arrowRef={setArrowEl}
@@ -67,7 +63,7 @@ const ControlledDropdown = forwardRef<
         >
           {children}
         </DropdownPane>
-      </MaybePortal>
+      </Portal>
     ) : null;
   },
 );

diff --git a/src/components/_internal/BaseSingleDatePicker/styles.ts b/src/components/_internal/BaseSingleDatePicker/styles.ts
@@ -115,6 +115,7 @@ export const datePickerStyles = css`
   }
   .react-datepicker-popper {
     z-index: 10;
+    width: 16.25rem;
   }
   .react-datepicker-popper[data-placement^='bottom']
     .react-datepicker__triangle,