The React synthetic event onAnimationStart does not appear to fire correctly and does not pass an event

My goal is to determine if the browser has auto-filled the input field in a form using react hooks. Other stack overflow threads have suggested creating the following in css:

@keyframes onAutoFillStart { }

@keyframes onAutoFillCancel { }

.input:-webkit-autofill {animation-name: onAutoFillStart;}

.input:not(:-webkit-autofill) {animation-name: onAutoFillCancel;}

This is supposed to create a void animation event that is triggered whenever the browser auto-fills a field.

The React documentation for synthetic events suggests using a synthetic event such as onAnimationStart. The name of the transition can be discovered with the property animationName.

I cannot get this to work. There appears to be two problems. onAnimationStart is not triggered when the field is autofilled. It appears to trigger every time the element is rendered. Also, onAnimatinoStart does not return the event, it returns an object of all the elements that have this event.

I have tried several options:

Option 1:

<input onAnimationStart={console.log(e)}/>

This logs an object for each element that has this event. The objects are logged every time the elements are rendered.

Option 2:

<input onAnimationStart={console.log(e.target)}/>

Similar behavior as option 1, however output is undefined

Option 3:

<input onAnimationStart={handleAnimation(e)}/>
const handleAnimation = (e) =>{console.log(e)}

Behaves like option 1

Option 4:

<input onAnimationStart={handleAnimation}/>
const handleAnimation = () =>{console.log"foo bar"}

"foo bar" does not get logged to the console.

Option 5:

<input onAnimationStart={(e) => handleAnimation(e)}/>
const handleAnimation = (e) => {console.log("foo bar " + e)}

Behaves like option 4.

I have also tried the same options replacing onAnimationStart with onAnimationStartCaputure. The results are identical.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW