Add support for portalContainer prop

Closes #91

Author: wojtekmaj

README.md

@@ -111,6 +111,7 @@ Displays an input field complete with custom inputs, native input, and a calenda
 | onCalendarOpen       | Function called when the calendar opens.                                                                                                                                                                                                     | n/a                     | `() => alert('Calendar opened')`                                                                               |
 | onChange             | Function called when the user picks a valid date. If any of the fields were excluded using custom `format`, `new Date(y, 0, 1, 0, 0, 0)`, where `y` is the current year, is going to serve as a "base".                                      | n/a                     | `(value) => alert('New date is: ', value)`                                                                     |
 | openCalendarOnFocus  | Whether to open the calendar on input focus.                                                                                                                                                                                                 | `true`                  | `false`                                                                                                        |
+| portalContainer      | Element to render the calendar in using portal.                                                                                                                                                                                              | n/a                     | `document.getElementById('my-div')`                                                                            |
 | required             | Whether date input should be required.                                                                                                                                                                                                       | `false`                 | `true`                                                                                                         |
 | returnValue          | Which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be `"start"`, `"end"` or `"range"`. The latter will cause an array with start and end values to be passed.                           | `"start"`               | `"range"`                                                                                                      |
 | showLeadingZeros     | Whether leading zeros should be rendered in date inputs.                                                                                                                                                                                     | `false`                 | `true`                                                                                                         |

src/DatePicker.jsx

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react';
+import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import makeEventProps from 'make-event-props';
 import mergeClassNames from 'merge-class-names';
@@ -235,29 +236,36 @@ export default class DatePicker extends PureComponent {
       calendarClassName,
       className: datePickerClassName, // Unused, here to exclude it from calendarProps
       onChange,
+      portalContainer,
       value,
       ...calendarProps
     } = this.props;
 
     const className = `${baseClassName}__calendar`;
+    const classNames = mergeClassNames(className, `${className}--${isOpen ? 'open' : 'closed'}`);
+
+    const calendar = (
+      <Calendar
+        className={calendarClassName}
+        onChange={(value) => this.onChange(value)}
+        value={value || null}
+        {...calendarProps}
+      />
+    );
 
-    return (
+    return portalContainer ? (
+      createPortal(<div className={classNames}>{calendar}</div>, portalContainer)
+    ) : (
       <Fit>
         <div
           ref={(ref) => {
             if (ref && !isOpen) {
               ref.removeAttribute('style');
             }
           }}
-          className={mergeClassNames(className, `${className}--${isOpen ? 'open' : 'closed'}`)}
-          style={isOpen ? undefined : {}}
+          className={classNames}
         >
-          <Calendar
-            className={calendarClassName}
-            onChange={(value) => this.onChange(value)}
-            value={value || null}
-            {...calendarProps}
-          />
+          {calendar}
         </div>
       </Fit>
     );
@@ -364,6 +372,7 @@ DatePicker.propTypes = {
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   openCalendarOnFocus: PropTypes.bool,
+  portalContainer: PropTypes.object,
   required: PropTypes.bool,
   returnValue: PropTypes.oneOf(['start', 'end', 'range']),
   showLeadingZeros: PropTypes.bool,

src/DatePicker.less

@@ -95,9 +95,6 @@
   &__calendar {
     width: 350px;
     max-width: 100vw;
-    position: absolute;
-    top: 100%;
-    left: 0;
     z-index: 1;
 
     &--closed {

test/Test.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import DatePicker from 'react-date-picker/src/entry.nostyle';
 import 'react-date-picker/src/DatePicker.less';
 import 'react-calendar/dist/Calendar.css';
@@ -35,12 +35,14 @@ const nineteenNinetyFive = new Date(1995, now.getUTCMonth() + 1, 15, 12);
 const fifteenthOfNextMonth = new Date(now.getUTCFullYear(), now.getUTCMonth() + 1, 15, 12);
 
 export default function Test() {
+  const portalContainer = useRef();
   const [disabled, setDisabled] = useState(false);
   const [locale, setLocale] = useState(null);
   const [maxDate, setMaxDate] = useState(fifteenthOfNextMonth);
   const [maxDetail, setMaxDetail] = useState('month');
   const [minDate, setMinDate] = useState(nineteenNinetyFive);
   const [minDetail, setMinDetail] = useState('century');
+  const [renderInPortal, setRenderInPortal] = useState(false);
   const [returnValue /* , setReturnValue */] = useState('start');
   const [required, setRequired] = useState(true);
   const [showLeadingZeros, setShowLeadingZeros] = useState(true);
@@ -77,7 +79,9 @@ export default function Test() {
           <ValueOptions setValue={setValue} value={value} />
           <ViewOptions
             disabled={disabled}
+            renderInPortal={renderInPortal}
             setDisabled={setDisabled}
+            setRenderInPortal={setRenderInPortal}
             setShowLeadingZeros={setShowLeadingZeros}
             setShowNeighboringMonth={setShowNeighboringMonth}
             setShowWeekNumbers={setShowWeekNumbers}
@@ -110,13 +114,15 @@ export default function Test() {
               onCalendarClose={() => console.log('Calendar closed')}
               onCalendarOpen={() => console.log('Calendar opened')}
               onChange={setValue}
+              portalContainer={renderInPortal ? portalContainer.current : undefined}
               required={required}
               returnValue={returnValue}
               showLeadingZeros={showLeadingZeros}
               showNeighboringMonth={showNeighboringMonth}
               showWeekNumbers={showWeekNumbers}
               value={value}
             />
+            <div ref={portalContainer} />
             <br />
             <br />
             <button id="submit" type="submit">

test/ViewOptions.jsx

@@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
 
 export default function ViewOptions({
   disabled,
+  renderInPortal,
   setDisabled,
+  setRenderInPortal,
   setShowLeadingZeros,
   setShowNeighboringMonth,
   setShowWeekNumbers,
@@ -35,6 +37,12 @@ export default function ViewOptions({
     setShowNeighboringMonth(checked);
   }
 
+  function onRenderInPortalChange(event) {
+    const { checked } = event.target;
+
+    setRenderInPortal(checked);
+  }
+
   return (
     <fieldset id="viewoptions">
       <legend htmlFor="viewoptions">View options</legend>
@@ -73,13 +81,25 @@ export default function ViewOptions({
         />
         <label htmlFor="showNeighboringMonth">{"Show neighboring month's days"}</label>
       </div>
+
+      <div>
+        <input
+          checked={renderInPortal}
+          id="renderInPortal"
+          onChange={onRenderInPortalChange}
+          type="checkbox"
+        />
+        <label htmlFor="renderInPortal">Render in portal</label>
+      </div>
     </fieldset>
   );
 }
 
 ViewOptions.propTypes = {
   disabled: PropTypes.bool.isRequired,
+  renderInPortal: PropTypes.bool.isRequired,
   setDisabled: PropTypes.func.isRequired,
+  setRenderInPortal: PropTypes.func.isRequired,
   setShowLeadingZeros: PropTypes.func.isRequired,
   setShowNeighboringMonth: PropTypes.func.isRequired,
   setShowWeekNumbers: PropTypes.func.isRequired,