issue 560: updates DateInput component's readOnly prop to be configurable by consumer implementation

Author: Viktoriya Savkina

src/components/DateInput.jsx

@@ -37,7 +37,7 @@ const defaultProps = {
   focused: false,
   disabled: false,
   required: false,
-  readOnly: false,
+  readOnly: null,
   showCaret: false,
 
   onChange() {},
@@ -172,7 +172,7 @@ export default class DateInput extends React.Component {
           placeholder={placeholder}
           autoComplete="off"
           disabled={disabled}
-          readOnly={readOnly || isTouch}
+          readOnly={typeof readOnly === 'boolean' ? readOnly : isTouch}
           required={required}
           aria-describedby={screenReaderMessage && screenReaderMessageId}
         />

test/components/DateInput_spec.jsx

@@ -273,18 +273,18 @@ describe('DateInput', () => {
       expect(wrapper.state()).to.contain.keys({ isTouchDevice: false });
     });
 
-    it('sets readOnly when a touch device and props.readOnly === true', () => {
-      const wrapper = shallow(<DateInput id="date" readOnly />);
+    it('sets readOnly to true when no value was provided on a touch device', () => {
+      const wrapper = shallow(<DateInput id="date" />);
       wrapper.setState({ isTouchDevice: true });
       wrapper.update();
       expect(!!wrapper.find('input').prop('readOnly')).to.equal(true);
     });
 
-    it('sets readOnly when a touch device and props.readOnly === false', () => {
+    it('sets readOnly to provided value on a touch device', () => {
       const wrapper = shallow(<DateInput id="date" readOnly={false} />);
       wrapper.setState({ isTouchDevice: true });
       wrapper.update();
-      expect(!!wrapper.find('input').prop('readOnly')).to.equal(true);
+      expect(!!wrapper.find('input').prop('readOnly')).to.equal(false);
     });
 
     describe('focus/isFocused', () => {