Add autofill hoc

[moriaam]

No description provided.

[xaviervia]

Let's make the w lowercase as per convention :)

[xaviervia]

Will this show? Since auto fill will put context inside. Maybe we can change the border color or something like that?

[xaviervia]

Also let's put a name='email' so that the autofill triggers.

[xaviervia]

Let’s call this magic variable something else, more generic.

[xaviervia]

How about __higherOrderComponents__withAutofillProps__wasInjected

[deepsweet]

Can we rely on document.getElementById(styleElementId) === null instead?

[xaviervia]

Ok, so about how to test this more, this is what I would do:

  it('has the autofilled prop when autofill animation gets triggered', done => {
    const root = document.createElement('div')
    let animationStartCallback
    function Target ({autoFilled, onAnimationStart}) {
      animationStartCallback = onAnimationStart

      return <div>{autoFilled ? 'autofilled' : 'not autofilled'}</div>
    }

    const DecoratedTarget = withAutoFillProps({
      autofilled: true,
    })(Target)

    render(<DecoratedTarget />, root)

    equal(root.innerText, 'not autofilled')

    animationStartCallback('onAutofillStart')

    equal(root.innerText, 'autofilled')
  })

…and the equivalent for when the autofilled gets removed ( animationStartCallback('onAutofillStop') )

This way you don't have to trigger the real autofill to test it, which is of course impossible 😅

[deepsweet]

Should we have unregisterAutofill as well?

onComponentDidMount() {
  registerAutofill()
}

onComponentWillUnmount() {
  unregisterAutofill()
}

[xaviervia]

Is that safe to do?

[deepsweet]

Yeah... if you have 5 components wrapped with this HOC then you can't just remove <style> from DOM when one of them is about to unmount. But from another hand it's a dirty side effect which should be cleaned up somehow if nobody is using it anymore.

[xaviervia]

So we need to keep track of how many are using it. In global state. Tricky

[moriaam]

I removed it by keeping a counter on the style element instead oh saving it on the window.