React - Elements in a list incorrectly receive hover state when a sibling is removed as result of a touch event

Question

I've logged a bug for this over in the React repo but it seems to have gone stale.

Essentially what I'm seeing is that if you render a list, e.g.:

return (
  <div>{items.map(item => <ItemDisplay key={item} item={item} />)}</div>
)

And then you tap an item to delete it, once that element has been removed from the DOM, its sibling receives a hover state.

I suspect what happens is that the actual element you want to remove isn't removed at all, but is just repurposed to display the other elements. So technically the element is still "hovered". But in reality it should be removed.

You can reproduce the example here by opening it with a touch device ( e.g. your phone ).

Answer 1

Try using react-app-polyfill: "This package includes polyfills for various browsers. It includes minimum requirements and commonly used language features used by Create React App projects."

npm install react-app-polyfill

And this have to be the first line in src/index.js

import 'react-app-polyfill/stable';

I tried with firefox and chrome from my mobile and everything is working fine..