Add support for autoFocus prop (#208)

wojtekmaj · Nov 27, 2019 · bd56e88 · bd56e88
1 parent b12d488
commit bd56e88
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -86,6 +86,7 @@ Displays an input field complete with custom inputs, native input, and a calenda
 
 |Prop name|Description|Default value|Example values|
 |----|----|----|----|
+|autoFocus|Automatically focuses the input on mount.|n/a|`true`|
 |calendarAriaLabel|`aria-label` for the calendar button.|n/a|`"Toggle calendar"`|
 |calendarClassName|Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
 |calendarIcon|Content of the calendar button. Setting the value explicitly to `null` will hide the icon.|(default icon)|<ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li></ul>|

diff --git a/src/DateInput.jsx b/src/DateInput.jsx
@@ -155,7 +155,7 @@ function renderCustomInputs(placeholder, elementFunctions, allowMultipleInstance
         if (!allowMultipleInstances && usedFunctions.includes(renderFunction)) {
           res.push(currentMatch);
         } else {
-          res.push(renderFunction(currentMatch));
+          res.push(renderFunction(currentMatch, index));
           usedFunctions.push(renderFunction);
         }
       }
@@ -439,8 +439,13 @@ export default class DateInput extends PureComponent {
     }
   }
 
-  renderDay = (currentMatch) => {
-    const { dayAriaLabel, dayPlaceholder, showLeadingZeros } = this.props;
+  renderDay = (currentMatch, index) => {
+    const {
+      autoFocus,
+      dayAriaLabel,
+      dayPlaceholder,
+      showLeadingZeros,
+    } = this.props;
     const { day, month, year } = this.state;
 
     if (currentMatch && currentMatch.length > 2) {
@@ -454,6 +459,7 @@ export default class DateInput extends PureComponent {
         key="day"
         {...this.commonInputProps}
         ariaLabel={dayAriaLabel}
+        autoFocus={index === 0 && autoFocus}
         month={month}
         placeholder={dayPlaceholder}
         showLeadingZeros={showLeadingZerosFromFormat || showLeadingZeros}
@@ -463,8 +469,9 @@ export default class DateInput extends PureComponent {
     );
   }
 
-  renderMonth = (currentMatch) => {
+  renderMonth = (currentMatch, index) => {
     const {
+      autoFocus,
       locale,
       monthAriaLabel,
       monthPlaceholder,
@@ -482,6 +489,7 @@ export default class DateInput extends PureComponent {
           key="month"
           {...this.commonInputProps}
           ariaLabel={monthAriaLabel}
+          autoFocus={index === 0 && autoFocus}
           locale={locale}
           placeholder={monthPlaceholder}
           short={currentMatch.length === 3}
@@ -498,6 +506,7 @@ export default class DateInput extends PureComponent {
         key="month"
         {...this.commonInputProps}
         ariaLabel={monthAriaLabel}
+        autoFocus={index === 0 && autoFocus}
         placeholder={monthPlaceholder}
         showLeadingZeros={showLeadingZerosFromFormat || showLeadingZeros}
         value={month}
@@ -506,15 +515,16 @@ export default class DateInput extends PureComponent {
     );
   }
 
-  renderYear = () => {
-    const { yearAriaLabel, yearPlaceholder } = this.props;
+  renderYear = (currentMatch, index) => {
+    const { autoFocus, yearAriaLabel, yearPlaceholder } = this.props;
     const { year } = this.state;
 
     return (
       <YearInput
         key="year"
         {...this.commonInputProps}
         ariaLabel={yearAriaLabel}
+        autoFocus={index === 0 && autoFocus}
         placeholder={yearPlaceholder}
         value={year}
         valueType={this.valueType}
@@ -592,6 +602,7 @@ const isValue = PropTypes.oneOfType([
 ]);
 
 DateInput.propTypes = {
+  autoFocus: PropTypes.bool,
   className: PropTypes.string.isRequired,
   dayAriaLabel: PropTypes.string,
   dayPlaceholder: PropTypes.string,

diff --git a/src/DateInput/Input.jsx b/src/DateInput/Input.jsx
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import mergeClassNames from 'merge-class-names';
 import updateInputWidth, { getFontShorthand } from 'update-input-width';
 
+/* eslint-disable jsx-a11y/no-autofocus */
+
 function select(element) {
   if (!element) {
     return;
@@ -37,6 +39,7 @@ function updateInputWidthOnFontLoad(element) {
 
 export default function Input({
   ariaLabel,
+  autoFocus,
   className,
   disabled,
   itemRef,
@@ -61,6 +64,7 @@ export default function Input({
       key="input"
       aria-label={ariaLabel}
       autoComplete="off"
+      autoFocus={autoFocus}
       className={mergeClassNames(
         `${className}__input`,
         `${className}__${nameForClass || name}`,

diff --git a/src/DatePicker.jsx b/src/DatePicker.jsx
@@ -116,6 +116,7 @@ export default class DatePicker extends PureComponent {
 
   renderInputs() {
     const {
+      autoFocus,
       calendarAriaLabel,
       calendarIcon,
       clearAriaLabel,
@@ -162,6 +163,7 @@ export default class DatePicker extends PureComponent {
         <DateInput
           {...ariaLabelProps}
           {...placeholderProps}
+          autoFocus={autoFocus}
           className={`${baseClassName}__inputGroup`}
           disabled={disabled}
           format={format}
@@ -310,6 +312,7 @@ const isValue = PropTypes.oneOfType([
 ]);
 
 DatePicker.propTypes = {
+  autoFocus: PropTypes.bool,
   calendarAriaLabel: PropTypes.string,
   calendarClassName: PropTypes.oneOfType([
     PropTypes.string,