Merge pull request #3656 from shreekeshmurkar/children-position-fix

fixed children alignment issue

src/calendar.jsx

@@ -978,6 +978,16 @@ export default class Calendar extends React.Component {
     }
   };
 
+  renderChildren = () => {
+    if (this.props.children) {
+      return (
+        <div className="react-datepicker__children-container">
+          {this.props.children}
+        </div>
+      );
+    }
+  };
+
   render() {
     const Container = this.props.container || CalendarContainer;
     return (
@@ -996,7 +1006,7 @@ export default class Calendar extends React.Component {
           {this.renderTodayButton()}
           {this.renderTimeSection()}
           {this.renderInputTimeSection()}
-          {this.props.children}
+          {this.renderChildren()}
         </Container>
       </div>
     );

src/stylesheets/datepicker.scss

@@ -681,3 +681,11 @@
     font-size: $datepicker__font-size * 1.8;
   }
 }
+
+.react-datepicker__children-container {
+  width: 13.8rem;
+  margin: 0.4rem;
+  padding-right: 0.2rem;
+  padding-left: 0.2rem;
+  height: auto;
+}

test/calendar_test.js

@@ -1712,4 +1712,33 @@ describe("Calendar", function () {
       expect(onKeyDownSpy.calledOnce).to.be.true;
     });
   });
+
+  describe("renderChildren", () => {
+    const renderCalendar = (props) =>
+      mount(
+        <Calendar
+          dateFormat={dateFormat}
+          onSelect={() => {}}
+          onClickOutside={() => {}}
+          hideCalendar={() => {}}
+          dropdownMode="scroll"
+          {...props}
+        />
+      );
+    const childrenContainerSelector = ".react-datepicker__children-container";
+
+    it("should render children components", function () {
+      const calendar = renderCalendar({
+        children: <div>This is a child component for test.</div>,
+      });
+      const childrenContainer = calendar.find(childrenContainerSelector);
+      expect(childrenContainer).to.have.length(1);
+    });
+
+    it("should not render children components", function () {
+      const calendar = renderCalendar();
+      const childrenContainer = calendar.find(childrenContainerSelector);
+      expect(childrenContainer).to.have.length(0);
+    });
+  });
 });