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();
+ });
});