Fix bug where OnFocus was only getting called once (#3)

* Fix bug where OnFocus was only getting called once

* Migrated from cWU to cDU

Author: erikras

src/ExternallyChanged.js

@@ -30,8 +30,8 @@ class ExternallyChangedState extends React.Component<Props, State> {
     }
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    const { input: { value }, meta: { active } } = nextProps
+  componentDidUpdate() {
+    const { input: { value }, meta: { active } } = this.props
     const { previous } = this.state
     if (value !== previous) {
       this.setState({ previous: value, externallyChanged: !active })

src/ExternallyChanged.test.js

@@ -36,10 +36,9 @@ describe('ExternallyChanged', () => {
     expect(spy.mock.calls[0][0]).toBe(false)
     focus('foo')
     expect(spy).toHaveBeenCalledTimes(2)
-    expect(spy.mock.calls[1][0]).toBe(false)
     change('foo', 'bar')
-    expect(spy).toHaveBeenCalledTimes(3)
-    expect(spy.mock.calls[2][0]).toBe(false)
+    expect(spy).toHaveBeenCalledTimes(4)
+    expect(spy.mock.calls[3][0]).toBe(false)
   })
 
   it('should change to true when value changes while not active', () => {
@@ -57,8 +56,8 @@ describe('ExternallyChanged', () => {
     expect(spy).toHaveBeenCalledTimes(1)
     expect(spy.mock.calls[0][0]).toBe(false)
     change('foo', 'bar')
-    expect(spy).toHaveBeenCalledTimes(2)
-    expect(spy.mock.calls[1][0]).toBe(true)
+    expect(spy).toHaveBeenCalledTimes(3)
+    expect(spy.mock.calls[2][0]).toBe(true)
   })
 
   it('should go back to false when field modified while active', () => {
@@ -78,13 +77,13 @@ describe('ExternallyChanged', () => {
     expect(spy).toHaveBeenCalledTimes(1)
     expect(spy.mock.calls[0][0]).toBe(false)
     change('foo', 'bar')
-    expect(spy).toHaveBeenCalledTimes(2)
-    expect(spy.mock.calls[1][0]).toBe(true)
-    focus('foo')
     expect(spy).toHaveBeenCalledTimes(3)
     expect(spy.mock.calls[2][0]).toBe(true)
-    change('foo', 'baz')
+    focus('foo')
     expect(spy).toHaveBeenCalledTimes(4)
-    expect(spy.mock.calls[3][0]).toBe(false)
+    expect(spy.mock.calls[3][0]).toBe(true)
+    change('foo', 'baz')
+    expect(spy).toHaveBeenCalledTimes(6)
+    expect(spy.mock.calls[5][0]).toBe(false)
   })
 })

src/OnBlur.js

@@ -25,8 +25,8 @@ class OnBlurState extends React.Component<Props, State> {
     }
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    const { children, meta: { active } } = nextProps
+  componentDidUpdate() {
+    const { children, meta: { active } } = this.props
     const { previous } = this.state
     if (previous && !active) {
       children()

src/OnChange.js

@@ -25,8 +25,8 @@ class OnChangeState extends React.Component<Props, State> {
     }
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    const { children, input: { value } } = nextProps
+  componentDidUpdate() {
+    const { children, input: { value } } = this.props
     const { previous } = this.state
     if (value !== previous) {
       this.setState({ previous: value })

src/OnFocus.js

@@ -25,12 +25,14 @@ class OnFocusState extends React.Component<Props, State> {
     }
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    const { children, meta: { active } } = nextProps
+  componentDidUpdate() {
+    const { children, meta: { active } } = this.props
     const { previous } = this.state
     if (active && !previous) {
       this.setState({ previous: active })
       children()
+    } else if (!active && previous) {
+      this.setState({ previous: active })
     }
   }
 

src/OnFocus.test.js

@@ -55,4 +55,30 @@ describe('OnFocus', () => {
     blur('foo')
     expect(spy).toHaveBeenCalledTimes(1)
   })
+
+  it('should call listener on subsequent focuses', () => {
+    const spy = jest.fn()
+    let blur
+    let focus
+    TestUtils.renderIntoDocument(
+      <Form onSubmit={onSubmitMock}>
+        {props => {
+          blur = props.blur
+          focus = props.focus
+          return <OnFocus name="foo">{spy}</OnFocus>
+        }}
+      </Form>
+    )
+    expect(spy).not.toHaveBeenCalled()
+    focus('foo')
+    expect(spy).toHaveBeenCalled()
+    expect(spy).toHaveBeenCalledTimes(1)
+    expect(spy).toHaveBeenCalledWith()
+
+    blur('foo')
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    focus('foo')
+    expect(spy).toHaveBeenCalledTimes(2)
+  })
 })