Fix Firefox issue with onBlur

reactabular · Mar 23, 2018 · 4722fc8 · 4722fc8
1 parent 0019c97
commit 4722fc8
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 1 deletion.
diff --git a/__tests__/input-test.js b/__tests__/input-test.js
@@ -44,6 +44,37 @@ describe('edit.input', function () {
     expect(changedValue).toEqual(true);
   });
 
+  it('triggers onValue onBlur with firefox onClick issue', function () {
+    let changedValue = false;
+    const Input = input();
+    const result = TestUtils.renderIntoDocument(
+      <Wrapper>
+        <Input
+          value="name"
+          onValue={() => {
+            changedValue = true;
+          }}
+        />
+      </Wrapper>
+    );
+
+    const renderedInput = TestUtils.findRenderedDOMComponentWithTag(result, 'input');
+
+    renderedInput.value = 'foobar';
+
+    const nativeEvent = {
+      nativeEvent: {
+        explicitOriginalTarget: renderedInput,
+        originalTarget: renderedInput,
+        type: 'blur'
+      }
+    };
+
+    TestUtils.Simulate.blur(renderedInput, nativeEvent);
+
+    expect(changedValue).toEqual(false);
+  });
+
   it('triggers onValue onEnter', function () {
     let changedValue = false;
     const Input = input();

diff --git a/src/input.js b/src/input.js
@@ -9,7 +9,14 @@ const input = ({ props } = {}) => {
         onValue(parseValue(value));
       }
     };
-    const onBlur = ({ target: { value } }) => { // eslint-disable-line react/prop-types
+    const onBlur = (event) => { // eslint-disable-line react/prop-types
+      const { target: { value } } = event;
+
+      if (event.nativeEvent.explicitOriginalTarget &&
+        event.nativeEvent.explicitOriginalTarget === event.nativeEvent.originalTarget) {
+        return;
+      }
+
       onValue(parseValue(value));
     };
     const parseValue = v => (value === parseFloat(value) ? parseFloat(v) : v);