Fix: onBlur firing twice, one without an event (Hacker0x01#1547) (Hacker0x01#1548)

Author: Darrken

docs-site/bundle.js

@@ -68072,10 +68072,6 @@
               _this.input.blur();
             }
 
-            if (_this.props.onBlur) {
-              _this.props.onBlur();
-            }
-
             _this.cancelFocusInput();
           };
 
@@ -90372,13 +90368,15 @@
                 startDate: date
               });
             }),
-            (_this.handleOnBlur = function(date) {
-              var selectedDate = new Date(date);
+            (_this.handleOnBlur = function(event) {
+              var date = new Date(event.target.value);
               if ((0, _isValid2.default)(date)) {
                 console.log(
-                  'selected date: %s',
-                  (0, _format2.default)(selectedDate, 'dd/MM/yyyy')
+                  'date: %s',
+                  (0, _format2.default)(date, 'dd/MM/yyyy')
                 );
+              } else {
+                console.log('value: %s', date);
               }
             }),
             _temp)),
@@ -90396,7 +90394,7 @@
               _react2.default.createElement(
                 'code',
                 { className: 'js' },
-                '\nhandleOnBlur: function (date) {\n    const date = new Date(event.target.value);\n    if (isValid(date)) {\n      console.log("selected date: %s", format(date, "dd/MM/yyyy"));\n    } else {\n      console.log("selected date: %s", event.target.value);\n    }\n};\'}\n'
+                '\nhandleOnBlur: function (event) {\n    const date = new Date(event.target.value);\n    if (isValid(date)) {\n      console.log("date: %s", format(date, "dd/MM/yyyy"));\n    } else {\n      console.log("value: %s", date);\n    }\n};\'}\n'
               ),
               _react2.default.createElement('br', null),
               _react2.default.createElement(

docs-site/src/examples/on_blur_callbacks.jsx

@@ -1,7 +1,7 @@
-import React from "react";
-import DatePicker from "react-datepicker";
-import format from "date-fns/format";
-import isValid from "date-fns/isValid";
+import React from 'react';
+import DatePicker from 'react-datepicker';
+import format from 'date-fns/format';
+import isValid from 'date-fns/isValid';
 
 export default class Disabled extends React.Component {
   state = {
@@ -14,10 +14,12 @@ export default class Disabled extends React.Component {
     });
   };
 
-  handleOnBlur = date => {
-    const selectedDate = new Date(date);
+  handleOnBlur = event => {
+    const date = new Date(event.target.value);
     if (isValid(date)) {
-      console.log("selected date: %s", format(selectedDate, "dd/MM/yyyy"));
+      console.log('date: %s', format(date, 'dd/MM/yyyy'));
+    } else {
+      console.log('value: %s', date);
     }
   };
 
@@ -27,27 +29,27 @@ export default class Disabled extends React.Component {
         <pre className="column example__code">
           <code className="js">
             {`
-handleOnBlur: function (date) {
+handleOnBlur: function (event) {
     const date = new Date(event.target.value);
     if (isValid(date)) {
-      console.log("selected date: %s", format(date, "dd/MM/yyyy"));
+      console.log("date: %s", format(date, "dd/MM/yyyy"));
     } else {
-      console.log("selected date: %s", event.target.value);
+      console.log("value: %s", date);
     }
 };'}
 `}
           </code>
           <br />
           <code className="jsx">
-            {"<DatePicker"}
+            {'<DatePicker'}
             <br />
             {'key="example9"'}
             <br />
-            {"selected={this.state.startDate}"}
+            {'selected={this.state.startDate}'}
             <br />
-            {"onChange={this.handleChange}"}
+            {'onChange={this.handleChange}'}
             <br />
-            <strong>{"onBlur={this.handleOnBlur}"}</strong>
+            <strong>{'onBlur={this.handleOnBlur}'}</strong>
             <br />
             {'placeholderText="View blur callbacks in console" />'}
           </code>

src/index.jsx

@@ -280,10 +280,6 @@ export default class DatePicker extends React.Component {
       this.input.blur();
     }
 
-    if (this.props.onBlur) {
-      this.props.onBlur();
-    }
-
     this.cancelFocusInput();
   };