2

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!

Ato Koomson
  • 43
  • 5
  • Why you have declare Square component just for a button? Remove that component and directly bind the button in app component – Vimal Patel Jan 04 '21 at 15:19
  • Oh no no special reason. I'm new to angular so I'm testing things out. I tried your recommendation to put the button directly in the app.Component.html, but the problem still persists. – Ato Koomson Jan 04 '21 at 17:50
  • 1
    Can you reproduce the issue using stackblitz or codesandbox? – Vimal Patel Jan 05 '21 at 03:04
  • Hey Vimal, I added a link to a stackblitz that shows the app. – Ato Koomson Jan 05 '21 at 07:04
  • 1
    there seems to same issue logged in github [link](https://github.com/angular/components/issues/12132). As per the post instead of array of value use array of object – Vimal Patel Jan 05 '21 at 08:46
  • This issue has nothing to do with click event, it is the button ripple effect which is causing the issue. – Vimal Patel Jan 05 '21 at 08:47
  • Thanks Vim, I got it working with the "array -> object" suggestion. You can see the progress in the blitz link. Also, what general steps did you use to debug this issue, because I was trying to debug earlier but I couldn't figure out what the issue was. btw I'm new to angular. – Ato Koomson Jan 05 '21 at 09:50
  • I did not debug at all, your application was working as expected, click event was firing was also correct. so I thought to google around ripple effect as that the only thing odd. – Vimal Patel Jan 05 '21 at 10:20

2 Answers2

2

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.

novarx
  • 498
  • 3
  • 6
0

Problem Solved

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

Ato Koomson
  • 43
  • 5