Bugfix/issue 7 popper anchor el

README.md

@@ -74,6 +74,7 @@ Name | Type | Required | Default value | Description
 `definedRanges` | `DefinedRange[]` | _optional_ | - | custom defined ranges to show in the list
 `closeOnClickOutside` | `boolean` | _optional_ | `true` | defines if DateRangePicker will be closed when clicking outside of it
 `wrapperClassName` | `object` | _optional_ | `undefined` | defines additional wrapper style classes
+`MenuProps` | `object` | _optional_ | `{disablePortal: true}` | defines props to be passed to the nested Select component - needed for use with Popper
 
 ## Made possible by
 

package/src/components/DateRangePicker.tsx

@@ -18,7 +18,7 @@ import {
 import { DateRange, NavigationAction, DefinedRange } from '../types';
 import { getValidatedMonths, parseOptionalDate } from '../utils';
 
-import { defaultRanges } from '../defaults';
+import { defaultRanges, defaultMenuProps } from '../defaults';
 
 import Menu from './Menu';
 
@@ -36,6 +36,10 @@ interface DateRangePickerProps {
   minDate?: Date | string;
   maxDate?: Date | string;
   onChange: (dateRange: DateRange) => void;
+  MenuProps?: {
+    disablePortal: boolean,
+    anchorEl?: Node
+  }
 }
 
 const DateRangePicker: React.FunctionComponent<DateRangePickerProps> = (
@@ -50,6 +54,7 @@ const DateRangePicker: React.FunctionComponent<DateRangePickerProps> = (
     minDate,
     maxDate,
     definedRanges = defaultRanges,
+    MenuProps = defaultMenuProps,
   } = props;
 
   const minDateValid = parseOptionalDate(minDate, addYears(today, -10));
@@ -164,6 +169,7 @@ const DateRangePicker: React.FunctionComponent<DateRangePickerProps> = (
       setDateRange={setDateRangeValidated}
       helpers={helpers}
       handlers={handlers}
+      MenuProps={MenuProps}
     />
   ) : null;
 };

package/src/components/DateRangePickerWrapper.tsx

@@ -39,6 +39,10 @@ export interface DateRangePickerWrapperProps {
   onChange: (dateRange: DateRange) => void;
   closeOnClickOutside?: boolean;
   wrapperClassName?: string;
+  MenuProps?: {
+    disablePortal: boolean,
+    anchorEl?: Node
+  };
 }
 
 const DateRangePickerWrapper: React.FunctionComponent<DateRangePickerWrapperProps> = (

package/src/components/Header.tsx

@@ -36,6 +36,7 @@ interface HeaderProps {
   prevDisabled: boolean;
   onClickNext: () => void;
   onClickPrevious: () => void;
+  MenuProps: object
 }
 
 const MONTHS = [
@@ -67,6 +68,7 @@ const Header: React.FunctionComponent<HeaderProps> = ({
   prevDisabled,
   onClickNext,
   onClickPrevious,
+  MenuProps,
 }: HeaderProps) => {
   const classes = useStyles();
 
@@ -93,7 +95,7 @@ const Header: React.FunctionComponent<HeaderProps> = ({
         <Select
           value={getMonth(date)}
           onChange={handleMonthChange}
-          MenuProps={{ disablePortal: true }}
+          MenuProps={MenuProps}
         >
           {MONTHS.map((month, idx) => (
             <MenuItem key={month} value={idx}>
@@ -107,7 +109,7 @@ const Header: React.FunctionComponent<HeaderProps> = ({
         <Select
           value={getYear(date)}
           onChange={handleYearChange}
-          MenuProps={{ disablePortal: true }}
+          MenuProps={MenuProps}
         >
           {generateYears(date, 30).map((year) => (
             <MenuItem key={year} value={year}>

package/src/components/Menu.tsx

@@ -56,6 +56,10 @@ interface MenuProps {
     onDayHover: (day: Date) => void;
     onMonthNavigate: (marker: symbol, action: NavigationAction) => void;
   };
+  MenuProps: {
+    disablePortal: boolean,
+    anchorEl?: Node
+  }
 }
 
 const Menu: React.FunctionComponent<MenuProps> = (props: MenuProps) => {
@@ -73,12 +77,13 @@ const Menu: React.FunctionComponent<MenuProps> = (props: MenuProps) => {
     setDateRange,
     helpers,
     handlers,
+    MenuProps,
   } = props;
 
   const { startDate, endDate } = dateRange;
   const canNavigateCloser = differenceInCalendarMonths(secondMonth, firstMonth) >= 2;
   const commonProps = {
-    dateRange, minDate, maxDate, helpers, handlers,
+    dateRange, minDate, maxDate, helpers, handlers, MenuProps,
   };
   return (
     <Paper elevation={5} square>

package/src/components/Month.tsx

@@ -23,7 +23,6 @@ import {
 import Header from './Header';
 import Day from './Day';
 
-
 // eslint-disable-next-line no-unused-vars
 import { NavigationAction, DateRange } from '../types';
 
@@ -62,6 +61,10 @@ interface MonthProps {
     onDayHover: (day: Date) => void;
     onMonthNavigate: (marker: symbol, action: NavigationAction) => void;
   };
+  MenuProps: {
+    disablePortal: boolean,
+    anchorEl?: Node
+  }
 }
 
 const Month: React.FunctionComponent<MonthProps> = (props: MonthProps) => {
@@ -76,6 +79,7 @@ const Month: React.FunctionComponent<MonthProps> = (props: MonthProps) => {
     setValue: setDate,
     minDate,
     maxDate,
+    MenuProps,
   } = props;
 
   // eslint-disable-next-line react/destructuring-assignment
@@ -91,6 +95,7 @@ const Month: React.FunctionComponent<MonthProps> = (props: MonthProps) => {
           prevDisabled={!back}
           onClickPrevious={() => handlers.onMonthNavigate(marker, NavigationAction.Previous)}
           onClickNext={() => handlers.onMonthNavigate(marker, NavigationAction.Next)}
+          MenuProps={MenuProps}
         />
 
         <Grid

package/src/defaults.ts

@@ -51,4 +51,8 @@ const getDefaultRanges = (date: Date): DefinedRange[] => [
   },
 ];
 
+export const defaultMenuProps = {
+  disablePortal: true,
+};
+
 export const defaultRanges = getDefaultRanges(new Date());