Clicking on an item affecting hover area of other element in ios safari & chrome

Question

Some context about my app:

I am using simple create-react-app boilerplate and having a list of buttons each button having a close icon & text. On clicking the close icon, the button is removed from the list.

CSS Effects: I am applying a line-through effect on the button on hover.

Problem:

On ios safari/chrome, if I remove the first button; the hover effect is added to the second button. This doesn't happen in Android Chrome.

GIF for the issue:

Code related to the issue:

Component:

export default function App() {
  const [items, updateItem] = React.useState(["apple", "ball", "cat"]);

  const removeItem = itemToBeRemoved => {
    updateItem(currentItems =>
      currentItems.filter(currentItem => !currentItem.includes(itemToBeRemoved))
    );
  };
  return (
    <div className="filters">
      {items.map(item => (
        <a key={item}>
          <span onClick={() => removeItem(item)}>&#x2715;</span>
          <span>{item}</span>
        </a>
      ))}
    </div>
  );
}

Styles:

.filters {
  margin: 0 -3px;
  max-width: 100%;
}

a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  border: 1px solid transparent;
  min-height: 30px;
  word-wrap: break-word;
  padding: 5px 12px;
  line-height: 1.2rem;
  background-color: #eee;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
  margin: 2px 3px;
  padding: 5px 8px;
  font-size: 0.85rem;
}

a:hover,
a:focus {
  background-color: #ccc;
}

a:focus {
  outline: 0;
  border-color: 1px solid blue;
  box-shadow: 0 0 0 2px #0000ff;
}

a span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a span:last-child {
  display: flex;
  height: 100%;
  top: 0;
  align-items: center;
  border-left: 1px solid gray;
  padding-left: 8px;
  margin-left: 8px;
}

a:hover span:last-child,
a:focus span:last-child {
  text-decoration: line-through;
}

Codesandbox Link: https://codesandbox.io/s/suspicious-swanson-o5jgi

My understanding:

Safari assumes that the pointer stays in the same place until the next tap (on different location) i.e why we see the hover state in the next button. Let me know if I am wrong.

Hey, @keikai I don't think so it is related to `key` because all the keys are different and unique. — Yash Joshi, Mar 23 '20 at 15:52
Your understanding seems correct. This issue occurs even with a plain HTML button (no React). — chipit24, Mar 23 '20 at 15:53
Take a look at https://stackoverflow.com/questions/18047353/fix-css-hover-on-iphone-ipad-ipod. — chipit24, Mar 23 '20 at 16:07

score -1 · Answer 1 · answered Mar 23 '20 at 15:57

-1

This could be happening due to the key property, i think that in your case the key should be the index of the property on the array and not the object itself, give it a try :)

answered Mar 23 '20 at 15:57

Breno Prata

712
5
10

They `key` isn't the issue. This is apparently a well-known problem for iOS and is unrelated to React. Also, the key should usually be unique, and you should avoid using the index as the key unless you know your list is going to be static, but since the user can delete items from anywhere, using the index here would cause issues. OP is also not using an object for the key, but a string. – chipit24 Mar 23 '20 at 15:59

Clicking on an item affecting hover area of other element in ios safari & chrome

1 Answers1