Leaking click event

user_14937826 0
Viewed 157

I'm having this problem related to click events in angular. My application is a tic-tac-toe app. My application uses angular materials. The problem: when a user clicks a button on the board, the click event seems to be leaking into a nearby button on the board. The following image demonstrates what I'm talking about. Image of problem. As you can see, the button in col 1 row 2 was activated even though that button was not clicked. Below is a blitz of my application.

https://stackblitz.com/github/flashato9/tic-tac-toe

It would be great if I can get some help on this problem. Thanks!

ripple-effect ngfor angular-material button arrays
2 Answers

really nice question =)

So the problem seems to be, that the mat button somehow responds to the change of the text cursor position.

if you change your square.component.html like so:

<div class="grid-button"><span>{{value}}</span></button>

and change the square.component.scss like so:

.grid-button{
  width: 100%;
  height: 100%;
  background-color: rgb(91, 158, 91);
  font-size: 10rem;
  border-radius: 4px;
  text-align: center;
  padding: 50px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.grid-button:hover {
    background-color: green;
}

when you now click a "button" you clearly see, that the cursor jumps to the next Field. But a simple div does not seem to react with :hover to that.

You can additionaly to the above CSS add user-select: none; to the .grid-button to not show the cursor or maybe a plain button (not Material) would also work.

Long story short: I would recommend not to use a Material Component if you change most of it's apperance, because there will probably allways be sideeffects.

user_108436550

Problem Solved

Here is the link posted by Vimal Patel in the comments.

user_149378260
Related