Jump between fields if e.g. "01" was typed in (#219)

* Jump between fields if e.g. "01" was typed in

* Add unit tests

Author: wojtekmaj

src/DateInput.jsx

@@ -352,15 +352,15 @@ export default class DateInput extends PureComponent {
     }
 
     const { value } = input;
-    const max = parseInt(input.getAttribute('max'), 10);
+    const max = input.getAttribute('max');
 
     /**
      * Given 1, the smallest possible number the user could type by adding another digit is 10.
      * 10 would be a valid value given max = 12, so we won't jump to the next input.
      * However, given 2, smallers possible number would be 20, and thus keeping the focus in
      * this field doesn't make sense.
      */
-    if (value * 10 > max) {
+    if ((value * 10 > max) || (value.length >= max.length)) {
       const property = 'nextElementSibling';
       const nextInput = findInput(input, property);
       focus(nextInput);

src/DateInput.spec.jsx

@@ -567,7 +567,7 @@ describe('DateInput', () => {
     expect(document.activeElement).toBe(dayInput.getDOMNode());
   });
 
-  it('jumps to the next field when a value which can\'t be extended to another valid value is entered ', () => {
+  it('jumps to the next field when a value which can\'t be extended to another valid value is entered', () => {
     const component = mount(
       <DateInput {...defaultProps} />
     );
@@ -584,7 +584,24 @@ describe('DateInput', () => {
     expect(document.activeElement).toBe(monthInput.getDOMNode());
   });
 
-  it('does not jump the next field when a value which can be extended to another valid value is entered ', () => {
+  it('jumps to the next field when a value as long as the length of maximum value is entered', () => {
+    const component = mount(
+      <DateInput {...defaultProps} />
+    );
+
+    const customInputs = component.find('input[type="number"]');
+    const dayInput = customInputs.at(0);
+    const monthInput = customInputs.at(1);
+
+    dayInput.getDOMNode().focus();
+    dayInput.getDOMNode().value = '03';
+
+    dayInput.simulate('keyup', { target: dayInput.getDOMNode(), key: '3' });
+
+    expect(document.activeElement).toBe(monthInput.getDOMNode());
+  });
+
+  it('does not jump the next field when a value which can be extended to another valid value is entered', () => {
     const component = mount(
       <DateInput {...defaultProps} />
     );