From f86a8e4fc82d8c75598c832cf4c3e75a72d751f0 Mon Sep 17 00:00:00 2001
From: Manuel Bouza <manuel@bouza.ch>
Date: Mon, 9 Apr 2018 19:17:03 +0200
Subject: [PATCH] Set type attribute of the clear button to button

A button in a form gets the type attribute set to submit by default, if the type is not specified.
Submitting a form with a clearable datepicker component by pressing enter in a field currently triggers the clearing of the datepicker component, instead of submitting the form.
This can be fixed by setting the type attribute of the clear button to "button".
---
 src/index.jsx           |  1 +
 test/datepicker_test.js | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/src/index.jsx b/src/index.jsx
index 18d9d0429..6d9fa11b9 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -605,6 +605,7 @@ export default class DatePicker extends React.Component {
     if (this.props.isClearable && this.props.selected != null) {
       return (
         <button
+          type="button"
           className="react-datepicker__close-icon"
           onClick={this.onClearClick}
           title={this.props.clearButtonTitle}
diff --git a/test/datepicker_test.js b/test/datepicker_test.js
index 1f54807f0..d5f43a5d1 100644
--- a/test/datepicker_test.js
+++ b/test/datepicker_test.js
@@ -303,6 +303,17 @@ describe("DatePicker", () => {
     );
   });
 
+  it("should set the type attribute on the clear button to button", () => {
+    var datePicker = TestUtils.renderIntoDocument(
+      <DatePicker selected={utils.newDate("2015-12-15")} isClearable />
+    );
+    var clearButton = TestUtils.findRenderedDOMComponentWithClass(
+      datePicker,
+      "react-datepicker__close-icon"
+    );
+    expect(clearButton.type).to.equal("button");
+  });
+
   it("should allow clearing the date when isClearable is true", () => {
     var cleared = false;
     function handleChange(d) {