diff --git a/package.json b/package.json index f0e77641..7bba6aeb 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "clean": "rimraf dist", "copy-styles": "node ./copy-styles.mjs", "lint": "eslint . --ext .js,.jsx,.ts,.tsx", - "postinstall": "husky install", + "prepare": "husky install", "prepack": "yarn clean && yarn build", "prettier": "prettier --check . --cache", "test": "yarn lint && yarn tsc && yarn prettier && yarn unit", diff --git a/src/DateInput.jsx b/src/DateInput.jsx index db614151..cb97c098 100644 --- a/src/DateInput.jsx +++ b/src/DateInput.jsx @@ -347,9 +347,13 @@ export default class DateInput extends PureComponent { } onClick = (event) => { - if (event.target === event.currentTarget) { + if ( + event.target !== this.dayInput.current && + event.target !== this.monthInput.current && + event.target !== this.yearInput.current + ) { // Wrapper was directly clicked - const firstInput = event.target.children[1]; + const firstInput = event.currentTarget.querySelector('input[data-input]'); focus(firstInput); } }; diff --git a/src/DatePicker.spec.jsx b/src/DatePicker.spec.jsx index 3f89ea6b..aad8557b 100644 --- a/src/DatePicker.spec.jsx +++ b/src/DatePicker.spec.jsx @@ -499,4 +499,38 @@ describe('DatePicker', () => { expect(onChange).toHaveBeenCalledWith(null); }); + + it('focuses on first custom input when clicking on divider', () => { + const date = new Date(2017, 8, 30); + let customInput; + let divider; + + const { container, rerender } = render(); + + customInput = container.querySelector('input[data-input]'); + divider = container.querySelector('.react-date-picker__inputGroup__divider'); + + fireEvent.click(divider); + expect(customInput).toHaveFocus(); + + rerender(); + + customInput = container.querySelector('input[data-input]'); + divider = container.querySelector('.react-date-picker__inputGroup__divider'); + + fireEvent.click(divider); + expect(customInput).toHaveFocus(); + }); + + it('focuses on first custom input when clicking on leading zero', () => { + const date = new Date(2017, 8, 30); + + const { container } = render(); + + const customInput = container.querySelector('input[data-input]'); + const leadingZero = container.querySelector('.react-date-picker__inputGroup__leadingZero'); + + fireEvent.click(leadingZero); + expect(customInput).toHaveFocus(); + }); });