Repository: react-dates/react-dates (language: javascript)

Issue:
Custom Arrow Icon does not work if small={true}
**react-dates version**
e.g. react-dates@19.0.1

**Describe the bug**
The `customArrowIcon` property is ignored when property `small` is set to `true`

**Source code (including props configuration)**
Steps to reproduce the behavior:
```
<DateRangePicker
  startDate={this.state.startDate}
  startDateId="your_unique_start_date_id"
  endDate={this.state.endDate}
  endDateId="your_unique_end_date_id"
  onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })}
  focusedInput={this.state.focusedInput}
  onFocusChange={focusedInput => this.setState({ focusedInput })}
  small={true}
  customArrowIcon={<span>I will not appear</span>}
/>
```



Discussion / hints:
This seems to be very intentional: https://github.com/airbnb/react-dates/blob/master/src/components/DateRangePickerInput.jsx#L176

I might expect `customArrowIcon` to be disallowed when `small` is `true`, however, to enforce that.

Fix patch:
diff --git a/package.json b/package.json
index 5382ecef77..d5f62e238c 100644
--- a/package.json
+++ b/package.json
@@ -51,42 +51,42 @@
   },
   "homepage": "https://github.com/airbnb/react-dates#readme",
   "devDependencies": {
-    "@babel/cli": "^7.5.5",
-    "@babel/core": "^7.5.5",
-    "@babel/register": "^7.5.5",
-    "@babel/runtime": "^7.0.0",
-    "@storybook/addon-actions": "^5.1.11",
-    "@storybook/addon-info": "^5.1.11",
-    "@storybook/addon-links": "^5.1.11",
-    "@storybook/addon-options": "^5.1.11",
-    "@storybook/addons": "^5.1.11",
-    "@storybook/react": "^5.1.11",
-    "@welldone-software/why-did-you-render": "^3.3.1",
-    "airbnb-js-shims": "^2.2.0",
-    "aphrodite": "^2.3.1",
-    "babel-eslint": "^10.0.3",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-inline-react-svg": "^1.1.0",
-    "babel-plugin-inline-svg": "^1.0.1",
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
+    "@babel/register": "^7.12.10",
+    "@babel/runtime": "^7.12.5",
+    "@storybook/addon-actions": "^5.3.21",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-links": "^5.3.21",
+    "@storybook/addon-options": "^5.3.21",
+    "@storybook/addons": "^5.3.21",
+    "@storybook/react": "^5.3.21",
+    "@welldone-software/why-did-you-render": "^3.6.0",
+    "airbnb-js-shims": "^2.2.1",
+    "aphrodite": "^2.4.0",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-inline-react-svg": "^1.1.2",
+    "babel-plugin-inline-svg": "^1.2.0",
     "babel-plugin-istanbul": "^5.2.0",
     "babel-plugin-transform-replace-object-assign": "^2.0.0",
-    "babel-preset-airbnb": "^4.0.1",
+    "babel-preset-airbnb": "^4.5.0",
     "chai": "^4.2.0",
-    "clean-css": "^4.2.1",
-    "coveralls": "^3.0.6",
-    "cross-env": "^5.2.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-helper": "^1.3.6",
-    "eslint": "^6.2.1",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.14.3",
-    "eslint-plugin-react-hooks": "^1.7.0",
-    "eslint-plugin-react-with-styles": "^2.2.0",
+    "clean-css": "^4.2.3",
+    "coveralls": "^3.1.0",
+    "cross-env": "^5.2.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-helper": "^1.3.9",
+    "eslint": "^7.18.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react-with-styles": "^2.3.0",
     "git-directory-deploy": "^1.5.1",
     "imports-loader": "^0.8.0",
-    "in-publish": "^2.0.0",
+    "in-publish": "^2.0.1",
     "karma": "^4.2.0",
     "karma-chai": "^0.1.0",
     "karma-firefox-launcher": "^1.2.0",
@@ -96,33 +96,33 @@
     "mkdirp": "^0.5.5",
     "mocha": "^3.5.3",
     "mocha-wrap": "^2.1.2",
-    "moment": "^2.24.0",
+    "moment": "^2.29.1",
     "moment-jalaali": "^0.7.4",
     "node-sass": "^4.12.0",
     "nyc": "^14.1.1",
     "raw-loader": "^0.5.1",
     "react": "^0.14 || ^15.5.4 || ^16.1.1",
     "react-dom": "^0.14 || ^15.5.4 || ^16.1.1",
-    "react-with-styles-interface-aphrodite": "^6.0.0",
+    "react-with-styles-interface-aphrodite": "^6.0.1",
     "react-with-styles-interface-css-compiler": "^2.2.0",
-    "rimraf": "^2.6.3",
-    "safe-publish-latest": "^1.1.3",
-    "sass-loader": "^7.2.0",
-    "sinon": "^7.4.1",
-    "sinon-sandbox": "^2.0.5",
+    "rimraf": "^2.7.1",
+    "safe-publish-latest": "^1.1.4",
+    "sass-loader": "^7.3.1",
+    "sinon": "^7.5.0",
+    "sinon-sandbox": "^2.0.6",
     "style-loader": "^0.20.3",
     "typescript": "*",
-    "webpack": "^4.31.0"
+    "webpack": "^4.46.0"
   },
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
-    "color2k": "^1.1.0",
+    "color2k": "^1.1.1",
     "consolidated-events": "^1.1.1 || ^2.0.0",
     "enzyme-shallow-equal": "^1.0.4",
     "is-touch-device": "^1.0.1",
     "lodash": "^4.1.1",
     "object.assign": "^4.1.2",
-    "object.values": "^1.1.1",
+    "object.values": "^1.1.2",
     "prop-types": "^15.7.2",
     "raf": "^3.4.1",
     "react-moment-proptypes": "^1.7.0",
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 92407bdaf7..924ba9c4bc 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -182,10 +182,10 @@ function DateRangePickerInput({
   const calendarIcon = customInputIcon || (
     <CalendarIcon {...css(styles.DateRangePickerInput_calendarIcon_svg)} />
   );
-
-  let arrowIcon = customArrowIcon || <RightArrow {...css(styles.DateRangePickerInput_arrow_svg)} />;
+  let arrowIcon = <RightArrow {...css(styles.DateRangePickerInput_arrow_svg)} />;
   if (isRTL) arrowIcon = <LeftArrow {...css(styles.DateRangePickerInput_arrow_svg)} />;
   if (small) arrowIcon = '-';
+  if (customArrowIcon) arrowIcon = customArrowIcon;
 
   const closeIcon = customCloseIcon || (
     <CloseButton
diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
index 4c4f4e2174..0f686a1c17 100644
--- a/src/components/DayPickerKeyboardShortcuts.jsx
+++ b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -102,6 +102,14 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
     this.handleFocus();
   }
 
+  handleFocus() {
+    if (this.hideKeyboardShortcutsButton) {
+      // automatically move focus into the dialog by moving
+      // to the only interactive element, the hide button
+      this.hideKeyboardShortcutsButton.focus();
+    }
+  }
+
   onKeyDown(e) {
     e.stopPropagation();
 
@@ -152,14 +160,6 @@ class DayPickerKeyboardShortcuts extends React.PureComponent {
     this.hideKeyboardShortcutsButton = ref;
   }
 
-  handleFocus() {
-    if (this.hideKeyboardShortcutsButton) {
-      // automatically move focus into the dialog by moving
-      // to the only interactive element, the hide button
-      this.hideKeyboardShortcutsButton.focus();
-    }
-  }
-
   render() {
     const {
       block,
diff --git a/stories/DateRangePicker_input.js b/stories/DateRangePicker_input.js
index 7650210a6a..a2fff36872 100644
--- a/stories/DateRangePicker_input.js
+++ b/stories/DateRangePicker_input.js
@@ -126,6 +126,14 @@ storiesOf('DRP - Input Props', module)
       customArrowIcon={<TestCustomArrowIcon />}
     />
   )))
+  .add('with custom arrow icon and RTL support', withInfo()(() => (
+    <DateRangePickerWrapper
+      initialStartDate={moment().add(3, 'days')}
+      initialEndDate={moment().add(10, 'days')}
+      customArrowIcon={<TestCustomArrowIcon />}
+      isRTL
+    />
+  )))
   .add('with custom close icon', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'days')}


Test patch:
diff --git a/test/components/DateRangePickerInput_spec.jsx b/test/components/DateRangePickerInput_spec.jsx
index 65274e2d23..6358c708fc 100644
--- a/test/components/DateRangePickerInput_spec.jsx
+++ b/test/components/DateRangePickerInput_spec.jsx
@@ -69,6 +69,26 @@ describe('DateRangePickerInput', () => {
       )).dive();
       expect(wrapper.find('.custom-arrow-icon')).to.have.lengthOf(1);
     });
+
+    it('custom icon is rendered when in RTL mode', () => {
+      const wrapper = shallow(
+        <DateRangePickerInput
+          customArrowIcon={<span className="custom-arrow-icon" />}
+          isRTL
+        />,
+      ).dive();
+      expect(wrapper.find('.custom-arrow-icon')).to.have.lengthOf(1);
+    });
+
+    it('custom icon is rendered when using small mode', () => {
+      const wrapper = shallow(
+        <DateRangePickerInput
+          customArrowIcon={<span className="custom-arrow-icon" />}
+          small
+        />,
+      ).dive();
+      expect(wrapper.find('.custom-arrow-icon')).to.have.lengthOf(1);
+    });
   });
 
   describe('props.customCloseIcon', () => {