Added preventOpenOnFocus prop (Hacker0x01#1181)

* Added preventOpenOnFocus prop * Added tests for preventOpenOnFocus prop
kyonzz · Dec 18, 2017 · 1306eb2 · 1306eb2
1 parent f8c9868
commit 1306eb2
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/src/index.jsx b/src/index.jsx
@@ -94,6 +94,7 @@ export default class DatePicker extends React.Component {
     popperClassName: PropTypes.string, // <PopperComponent/> props
     popperModifiers: PropTypes.object, // <PopperComponent/> props
     popperPlacement: PropTypes.oneOf(popperPlacementPositions), // <PopperComponent/> props
+    preventOpenOnFocus: PropTypes.bool,
     readOnly: PropTypes.bool,
     required: PropTypes.bool,
     scrollableYearDropdown: PropTypes.bool,
@@ -139,6 +140,7 @@ export default class DatePicker extends React.Component {
       onSelect () {},
       onClickOutside () {},
       onMonthChange () {},
+      preventOpenOnFocus: false,
       onYearChange () {},
       monthsShown: 1,
       withPortal: false,
@@ -215,7 +217,9 @@ export default class DatePicker extends React.Component {
   handleFocus = (event) => {
     if (!this.state.preventFocus) {
       this.props.onFocus(event)
-      this.setOpen(true)
+      if (!this.props.preventOpenOnFocus) {
+        this.setOpen(true)
+      }
     }
   }
 
@@ -344,7 +348,7 @@ export default class DatePicker extends React.Component {
   onInputKeyDown = (event) => {
     this.props.onKeyDown(event)
     const eventKey = event.key
-    if (!this.state.open && !this.props.inline) {
+    if (!this.state.open && !this.props.inline && !this.props.preventOpenOnFocus) {
       if (eventKey !== 'Enter' && eventKey !== 'Escape' && eventKey !== 'Tab') {
         this.onInputClick()
       }

diff --git a/test/datepicker_test.js b/test/datepicker_test.js
@@ -784,4 +784,20 @@ describe('DatePicker', () => {
     datePicker.setProps({ selected: future })
     expect(utils.formatDate(datePicker.state('preSelection'), 'YYYY-MM-DD')).to.equal(utils.formatDate(future, 'YYYY-MM-DD'))
   })
+  it('should not set open state when focusing on the date input and the preventOpenOnFocus prop is set', () => {
+    const datePicker = TestUtils.renderIntoDocument(
+      <DatePicker preventOpenOnFocus />
+    )
+    const dateInput = datePicker.input
+    TestUtils.Simulate.focus(ReactDOM.findDOMNode(dateInput))
+    expect(datePicker.state.open).to.be.false
+  })
+  it('should not set open state onInputKeyDown when preventOpenOnFocus prop is set', () => {
+    const datePicker = TestUtils.renderIntoDocument(
+      <DatePicker preventOpenOnFocus />
+    )
+    const dateInput = datePicker.input
+    TestUtils.Simulate.keyDown(ReactDOM.findDOMNode(dateInput), getKey('ArrowLeft'))
+    expect(datePicker.state.open).to.be.false
+  })
 })