From 8bcab445c1a3e89b3bc61b291fd5c225cd95acce Mon Sep 17 00:00:00 2001
From: Louis Byrne <louisbyrne89@gmail.com>
Date: Tue, 7 Apr 2020 14:28:18 +0100
Subject: [PATCH] fix set visibility to hidden for day picker component

---
 src/components/DayPicker.jsx |  3 ++-
 stories/DayPicker.js         | 27 +++++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index a31a710f10..9c48eb6e0d 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -1060,6 +1060,7 @@ class DayPicker extends React.PureComponent {
       verticalBorderSpacing,
       horizontalMonthPadding,
       navPosition,
+      hidden
     } = this.props;
 
     const { reactDates: { spacing: { dayPickerHorizontalPadding } } } = theme;
@@ -1144,7 +1145,7 @@ class DayPicker extends React.PureComponent {
           isHorizontal && withPortal && styles.DayPicker_portal__horizontal,
           this.isVertical() && withPortal && styles.DayPicker_portal__vertical,
           dayPickerStyle,
-          !monthTitleHeight && styles.DayPicker__hidden,
+          hidden && styles.DayPicker__hidden,
           !noBorder && styles.DayPicker__withBorder,
         )}
       >
diff --git a/stories/DayPicker.js b/stories/DayPicker.js
index fe564feb03..a37cdf3736 100644
--- a/stories/DayPicker.js
+++ b/stories/DayPicker.js
@@ -105,6 +105,30 @@ function renderNavNextButton(buttonProps) {
   );
 }
 
+class TestWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showDatePicker: false,
+    };
+  }
+
+  render() {
+    const { showDatePicker } = this.state;
+    return (
+      <div>
+        <button
+          type="button"
+          onClick={() => this.setState({ showDatePicker: !showDatePicker })}
+        >
+          {showDatePicker ? 'Show' : 'Hide'}
+        </button>
+        <DayPicker hidden={showDatePicker} />
+      </div>
+    );
+  }
+}
+
 storiesOf('DayPicker', module)
   .add('default', withInfo()(() => (
     <DayPicker />
@@ -226,4 +250,7 @@ storiesOf('DayPicker', module)
   )))
   .add('noBorder', withInfo()(() => (
     <DayPicker noBorder />
+  )))
+  .add('hide', withInfo()(() => (
+    <TestWrapper />
   )));