diff --git a/css/CalendarMonth.scss b/css/CalendarMonth.scss
index 2bd734728d..b419ce0d25 100644
--- a/css/CalendarMonth.scss
+++ b/css/CalendarMonth.scss
@@ -7,7 +7,7 @@
 
   &:first-of-type {
     position: absolute;
-    z-index: -1;
+    z-index: $react-dates-z-index - 1;
     opacity: 0;
     pointer-events: none;
   }
diff --git a/css/CalendarMonthGrid.scss b/css/CalendarMonthGrid.scss
index 388c35d0c3..61ebbfe6ae 100644
--- a/css/CalendarMonthGrid.scss
+++ b/css/CalendarMonthGrid.scss
@@ -2,7 +2,7 @@
 
 .CalendarMonthGrid {
   background: $react-dates-color-white;
-  z-index: 0;
+  z-index: $react-dates-z-index;
   text-align: left;
 }
 
@@ -10,7 +10,7 @@
   -webkit-transition: -webkit-transform 0.2s ease-in-out;
   -moz-transition: -moz-transform 0.2s ease-in-out;
   transition: transform 0.2s ease-in-out;
-  z-index: 1;
+  z-index: $react-dates-z-index + 1;
 }
 
 .CalendarMonthGrid--horizontal {
diff --git a/css/DateInput.scss b/css/DateInput.scss
index 78c01ee35e..2040e25eeb 100644
--- a/css/DateInput.scss
+++ b/css/DateInput.scss
@@ -25,7 +25,7 @@ $caret-top: $react-dates-spacing-vertical-picker - $react-dates-width-tooltip-ar
   border: $react-dates-width-tooltip-arrow / 2 solid transparent;
   border-top: 0;
   left: 22px;
-  z-index: 2;
+  z-index: $react-dates-z-index + 2;
 }
 
 .DateInput--with-caret::before {
diff --git a/css/DateRangePicker.scss b/css/DateRangePicker.scss
index 0587d2af91..78ef48e3d9 100644
--- a/css/DateRangePicker.scss
+++ b/css/DateRangePicker.scss
@@ -17,7 +17,7 @@
 }
 
 .DateRangePicker__picker {
-  z-index: 1;
+  z-index: $react-dates-z-index + 1;
   background-color: $react-dates-color-white;
   position: absolute;
   top: $react-dates-spacing-vertical-picker;
@@ -58,7 +58,7 @@
   top: 0;
   right: 0;
   padding: 15px;
-  z-index: 2;
+  z-index: $react-dates-z-index + 2;
 
   svg {
     height: 15px;
diff --git a/css/DayPicker.scss b/css/DayPicker.scss
index 6939c5f372..401bb6aefb 100644
--- a/css/DayPicker.scss
+++ b/css/DayPicker.scss
@@ -40,7 +40,7 @@
   color: $react-dates-color-placeholder-text;
   position: absolute;
   top: 62px;
-  z-index: 2;
+  z-index: $react-dates-z-index + 2;
   padding: 0 13px;
   text-align: left;
 
diff --git a/css/DayPickerKeyboardShortcuts.scss b/css/DayPickerKeyboardShortcuts.scss
index daaae90947..93517a848b 100644
--- a/css/DayPickerKeyboardShortcuts.scss
+++ b/css/DayPickerKeyboardShortcuts.scss
@@ -17,10 +17,11 @@
 .DayPickerKeyboardShortcuts__show {
   width: 22px;
   position: absolute;
+  z-index: $react-dates-z-index + 2;
 }
 
 .DayPickerKeyboardShortcuts__show--bottom-right {
-  border-top: 26px solid $react-dates-color-white;
+  border-top: 26px solid transparent;
   border-right: 33px solid $react-dates-color-primary;
   bottom: 0;
   right: 0;
@@ -36,7 +37,7 @@
 }
 
 .DayPickerKeyboardShortcuts__show--top-right {
-  border-bottom: 26px solid $react-dates-color-white;
+  border-bottom: 26px solid transparent;
   border-right: 33px solid $react-dates-color-primary;
   top: 0;
   right: 0;
@@ -52,7 +53,7 @@
 }
 
 .DayPickerKeyboardShortcuts__show--top-left {
-  border-bottom: 26px solid $react-dates-color-white;
+  border-bottom: 26px solid transparent;
   border-left: 33px solid $react-dates-color-primary;
   top: 0;
   left: 0;
@@ -73,6 +74,7 @@
 }
 
 .DayPickerKeyboardShortcuts__panel {
+  overflow: auto;
   background: $react-dates-color-white;
   border: 1px solid $react-dates-color-border;
   border-radius: 2px;
@@ -81,7 +83,7 @@
   bottom: 0;
   right: 0;
   left: 0;
-  z-index: 2;
+  z-index: $react-dates-z-index + 2;
   padding: 22px;
   margin: 33px;
 }
@@ -102,7 +104,7 @@
   position: absolute;
   right: 22px;
   top: 22px;
-  z-index: 2;
+  z-index: $react-dates-z-index + 2;
 
   svg {
     height: 15px;
@@ -126,7 +128,6 @@
 
 .KeyboardShortcutRow__key-container {
   display: inline-block;
-  width: 15%;
   white-space: nowrap;
   text-align: right;
   margin-right: 6px;
@@ -141,7 +142,9 @@
 }
 
 .KeyboardShortcutRow__action {
-  display: inline-block;
+  display: inline;
+  word-break: break-word;
+  margin-left: 8px;
 }
 
 .DayPickerKeyboardShortcuts__panel--block {
diff --git a/css/DayPickerNavigation.scss b/css/DayPickerNavigation.scss
index a5e1d88080..1e9fe2b2c9 100644
--- a/css/DayPickerNavigation.scss
+++ b/css/DayPickerNavigation.scss
@@ -34,7 +34,7 @@
     border-radius: 3px;
     padding: 6px 9px;
     top: 18px;
-    z-index: 2;
+    z-index: $react-dates-z-index + 2;
     position: absolute;
   }
 
@@ -64,7 +64,7 @@
   left: 0;
   height: 52px;
   width: 100%;
-  z-index: 2;
+  z-index: $react-dates-z-index + 2;
 
   .DayPickerNavigation__prev,
   .DayPickerNavigation__next {
diff --git a/css/SingleDatePicker.scss b/css/SingleDatePicker.scss
index a1d4b79a0e..d08cc8a61a 100644
--- a/css/SingleDatePicker.scss
+++ b/css/SingleDatePicker.scss
@@ -6,7 +6,7 @@
 }
 
 .SingleDatePicker__picker {
-  z-index: 1;
+  z-index: $react-dates-z-index + 1;
   background-color: $react-dates-color-white;
   position: absolute;
   top: $react-dates-spacing-vertical-picker;
@@ -47,7 +47,7 @@
   top: 0;
   right: 0;
   padding: 15px;
-  z-index: 2;
+  z-index: $react-dates-z-index + 2;
 
   svg {
     height: 15px;
diff --git a/css/variables.scss b/css/variables.scss
index d52eac4362..11a7fe4491 100644
--- a/css/variables.scss
+++ b/css/variables.scss
@@ -26,3 +26,5 @@ $react-dates-color-placeholder-text: #757575 !default;
 $react-dates-color-text: #484848 !default;
 $react-dates-color-text-focus: #007a87 !default;
 $react-dates-color-focus: #99ede6 !default;
+
+$react-dates-z-index: 0 !default;
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index ebd5b7d254..b80728514a 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -65,6 +65,7 @@ const defaultProps = {
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDates: false,
   renderCalendarInfo: null,
+  hideKeyboardShortcutsPanel: false,
   daySize: DAY_SIZE,
 
   // navigation related props
@@ -298,6 +299,7 @@ export default class DateRangePicker extends React.Component {
       renderDay,
       renderCalendarInfo,
       initialVisibleMonth,
+      hideKeyboardShortcutsPanel,
       customCloseIcon,
       onClose,
       phrases,
@@ -336,6 +338,7 @@ export default class DateRangePicker extends React.Component {
           withPortal={withPortal || withFullScreenPortal}
           daySize={daySize}
           initialVisibleMonth={initialVisibleMonthThunk}
+          hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
           navPrev={navPrev}
           navNext={navNext}
           minimumNights={minimumNights}
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
index 140ebf97ce..038ec870f2 100644
--- a/src/components/DayPicker.jsx
+++ b/src/components/DayPicker.jsx
@@ -48,6 +48,7 @@ const propTypes = forbidExtraProps({
   hidden: PropTypes.bool,
   initialVisibleMonth: PropTypes.func,
   renderCalendarInfo: PropTypes.func,
+  hideKeyboardShortcutsPanel: PropTypes.bool,
   daySize: nonNegativeInteger,
 
   // navigation props
@@ -84,6 +85,7 @@ export const defaultProps = {
   hidden: false,
   initialVisibleMonth: () => moment(),
   renderCalendarInfo: null,
+  hideKeyboardShortcutsPanel: false,
   daySize: DAY_SIZE,
 
   // navigation props
@@ -385,6 +387,7 @@ export default class DayPicker extends React.Component {
     this.setState({
       monthTransition: PREV_TRANSITION,
       translationValue,
+      focusedDate: null,
       nextFocusedDate,
     });
   }
@@ -401,6 +404,7 @@ export default class DayPicker extends React.Component {
     this.setState({
       monthTransition: NEXT_TRANSITION,
       translationValue,
+      focusedDate: null,
       nextFocusedDate,
     });
   }
@@ -488,7 +492,13 @@ export default class DayPicker extends React.Component {
   }
 
   updateStateAfterMonthTransition() {
-    const { currentMonth, monthTransition, focusedDate, nextFocusedDate } = this.state;
+    const {
+      currentMonth,
+      monthTransition,
+      focusedDate,
+      nextFocusedDate,
+      withMouseInteractions,
+    } = this.state;
 
     if (!monthTransition) return;
 
@@ -502,7 +512,7 @@ export default class DayPicker extends React.Component {
     let newFocusedDate = null;
     if (nextFocusedDate) {
       newFocusedDate = nextFocusedDate;
-    } else if (focusedDate) {
+    } else if (!focusedDate && !withMouseInteractions) {
       newFocusedDate = this.getFocusedDay(newMonth);
     }
 
@@ -522,7 +532,7 @@ export default class DayPicker extends React.Component {
     }, () => {
       // we don't want to focus on the relevant calendar day after a month transition
       // if the user is navigating around using a mouse
-      if (this.state.withMouseInteractions) {
+      if (withMouseInteractions) {
         const activeElement = getActiveElement();
         if (activeElement && activeElement !== document.body) {
           activeElement.blur();
@@ -674,6 +684,7 @@ export default class DayPicker extends React.Component {
       onDayMouseLeave,
       renderDay,
       renderCalendarInfo,
+      hideKeyboardShortcutsPanel,
       onOutsideClick,
       monthFormat,
       daySize,
@@ -792,7 +803,7 @@ export default class DayPicker extends React.Component {
               {verticalScrollable && this.renderNavigation()}
             </div>
 
-            {!isTouch &&
+            {!isTouch && !hideKeyboardShortcutsPanel &&
               <DayPickerKeyboardShortcuts
                 block={this.isVertical() && !withPortal}
                 buttonLocation={keyboardShortcutButtonLocation}
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
index e104c09192..962f790ee4 100644
--- a/src/components/DayPickerRangeController.jsx
+++ b/src/components/DayPickerRangeController.jsx
@@ -46,6 +46,7 @@ const propTypes = forbidExtraProps({
   orientation: ScrollableOrientationShape,
   withPortal: PropTypes.bool,
   initialVisibleMonth: PropTypes.func,
+  hideKeyboardShortcutsPanel: PropTypes.bool,
   daySize: nonNegativeInteger,
 
   navPrev: PropTypes.node,
@@ -87,7 +88,7 @@ const defaultProps = {
   numberOfMonths: 1,
   orientation: HORIZONTAL_ORIENTATION,
   withPortal: false,
-
+  hideKeyboardShortcutsPanel: false,
   initialVisibleMonth: DayPickerDefaultProps.initialVisibleMonth,
   daySize: DAY_SIZE,
 
@@ -315,6 +316,7 @@ export default class DayPickerRangeController extends React.Component {
       withPortal,
       enableOutsideDays,
       initialVisibleMonth,
+      hideKeyboardShortcutsPanel,
       daySize,
       focusedInput,
       renderDay,
@@ -381,6 +383,7 @@ export default class DayPickerRangeController extends React.Component {
         navNext={navNext}
         renderDay={renderDay}
         renderCalendarInfo={renderCalendarInfo}
+        hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
         isFocused={isFocused}
         getFirstFocusableDay={this.getFirstFocusableDay}
         onBlur={onBlur}
diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
index 9f0557b0ca..9e4d114a26 100644
--- a/src/components/SingleDatePicker.jsx
+++ b/src/components/SingleDatePicker.jsx
@@ -58,6 +58,7 @@ const defaultProps = {
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDate: false,
   renderCalendarInfo: null,
+  hideKeyboardShortcutsPanel: false,
   daySize: DAY_SIZE,
 
   // navigation related props
@@ -392,6 +393,7 @@ export default class SingleDatePicker extends React.Component {
       renderCalendarInfo,
       date,
       initialVisibleMonth,
+      hideKeyboardShortcutsPanel,
       customCloseIcon,
       phrases,
       daySize,
@@ -434,6 +436,7 @@ export default class SingleDatePicker extends React.Component {
           withPortal={withPortal || withFullScreenPortal}
           hidden={!focused}
           initialVisibleMonth={initialVisibleMonthThunk}
+          hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
           navPrev={navPrev}
           navNext={navNext}
           renderDay={renderDay}
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
index 8b807c35fb..fce4eab578 100644
--- a/src/shapes/DateRangePickerShape.js
+++ b/src/shapes/DateRangePickerShape.js
@@ -47,6 +47,7 @@ export default {
   keepOpenOnDateSelect: PropTypes.bool,
   reopenPickerOnClearDates: PropTypes.bool,
   renderCalendarInfo: PropTypes.func,
+  hideKeyboardShortcutsPanel: PropTypes.bool,
 
   // navigation related props
   navPrev: PropTypes.node,
diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
index 789015b2ef..ced1f8552f 100644
--- a/src/shapes/SingleDatePickerShape.js
+++ b/src/shapes/SingleDatePickerShape.js
@@ -36,6 +36,7 @@ export default {
   keepOpenOnDateSelect: PropTypes.bool,
   reopenPickerOnClearDate: PropTypes.bool,
   renderCalendarInfo: PropTypes.func,
+  hideKeyboardShortcutsPanel: PropTypes.bool,
   daySize: nonNegativeInteger,
 
   // navigation related props
diff --git a/stories/DateRangePicker_calendar.js b/stories/DateRangePicker_calendar.js
index 1fc3427a2c..413ff825e3 100644
--- a/stories/DateRangePicker_calendar.js
+++ b/stories/DateRangePicker_calendar.js
@@ -129,4 +129,10 @@ storiesOf('DRP - Calendar Props', module)
       )}
       autoFocus
     />
+  ))
+  .addWithInfo('with keyboard shorcuts panel hidden', () => (
+    <DateRangePickerWrapper
+      hideKeyboardShortcutsPanel
+      autoFocus
+    />
   ));
diff --git a/stories/SingleDatePicker_calendar.js b/stories/SingleDatePicker_calendar.js
index f382a17dc0..100d8e47fa 100644
--- a/stories/SingleDatePicker_calendar.js
+++ b/stories/SingleDatePicker_calendar.js
@@ -120,4 +120,10 @@ storiesOf('SDP - Calendar Props', module)
       )}
       autoFocus
     />
+  ))
+  .addWithInfo('with keyboard shorcuts panel hidden', () => (
+    <SingleDatePickerWrapper
+      hideKeyboardShortcutsPanel
+      autoFocus
+    />
   ));
diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
index 3b5198e596..52a591a28c 100644
--- a/test/components/DayPicker_spec.jsx
+++ b/test/components/DayPicker_spec.jsx
@@ -114,8 +114,8 @@ describe('DayPicker', () => {
     });
 
     describe('DayPickerKeyboardShortcuts', () => {
-      it('component exists if state.isTouchDevice is false', () => {
-        const wrapper = shallow(<DayPicker />);
+      it('component exists if state.isTouchDevice is false and hideKeyboardShortcutsPanel is false', () => {
+        const wrapper = shallow(<DayPicker hideKeyboardShortcutsPanel={false} />);
         wrapper.setState({ isTouchDevice: false });
         expect(wrapper.find(DayPickerKeyboardShortcuts)).to.have.lengthOf(1);
       });
@@ -125,6 +125,11 @@ describe('DayPicker', () => {
         wrapper.setState({ isTouchDevice: true });
         expect(wrapper.find(DayPickerKeyboardShortcuts)).to.have.lengthOf(0);
       });
+
+      it('component does not exist if hideKeyboardShortcutsPanel is true', () => {
+        const wrapper = shallow(<DayPicker hideKeyboardShortcutsPanel />);
+        expect(wrapper.find(DayPickerKeyboardShortcuts)).to.have.lengthOf(0);
+      });
     });
   });