Clickable table rows covers button

Question

Made a table containing some fetched data with a button to open a menu on the right end of the rows. Made every row clickable to get redirected to a render where you can edit the current entry. However making the rows clickable(adding the link to the <tr>) covers the "Menu" button as they are rendered on the rows as well. Is there a way to avoid this, meaning still having the row clickable but the button rendered with each entry wont be affected?

<thead>
<tr>
<th>#</th>
<th>TestData</th>
<th>TestData</th>
<th>TestData</th>
<th>TestData</th>
<th>TestData</th>
<th>TestData</th>
<th>TestData</th>
<th>TestData</th>
<th></th>
</tr>
</thead>
           
<tbody>
{tableValues && tableValues.map((tableValue, index) => (
<tr key={index} className="hover:cursor-pointer" onClick={() => handleRowClick(tableValue.id)}>

<td>{index + 1}</td>
<td>{tableValue.TestData}</td>
<td>{tableValue.dispatch && dayjs.unix(tableValue.dispatch.seconds).format('DD/MM/YY')}</td>
<td>{tableValue.TestData}</td>
<td>{tableValue.TestData}</td>
<td>{tableValue.TestData}</td>
<td>{tableValue.TestData}</td>
<td>{tableValue.TestData}</td>
<td>{tableValue.TestData}</td>
<td>
<Menu shadow="md" width={200}>
<Menu.Target>
<UnstyledButton>
<IconDotsVertical>Toggle menu</IconDotsVertical>
</UnstyledButton>
</Menu.Target>
</Menu>
</tbody>

Example of a row in the table, dots on the right is the button https://i.stack.imgur.com/5WTfJ.png

Welcome to Stack Overflow! Please take the [tour] and read up on [ask]. Debugging your code is difficult without, well, seeing that code. Thus, please [edit] your post to contain a [mre]. — Adriaan, Aug 16 '22 at 08:02
what do you mean by it covers the delete button, is that the delete button is below, or when clicking the delete button, execute the row as well? — anuj joshi, Aug 16 '22 at 08:06
Do you mean that when clicking the button, the event listener for the whole row fires off as well (and that you only want the event listener for the button to execute)? — Emil Karlsson, Aug 16 '22 at 08:44
When clicking the button you are clicking the row aswell, meaning in my case you are redircted to an edit page for that specific entry. I want the button not to be affected by the clickable row, so you are actually able to open the menu. — Thor Christensen, Aug 16 '22 at 09:03

score 1 · Answer 1 · answered Sep 04 '22 at 19:15

You'll most likely have to stop the event propagation when clicking on the button, something like this:

<UnstyledButton
  onClick={(e) => e.stopPropagation()}
>
  <IconDotsVertical>Toggle menu</IconDotsVertical>
</UnstyledButton>

The stopPropagation() method prevents further propagation of the current event in the capturing and bubbling phases.

Stopping propagation is quite a common pattern. For instance, I've most recently met a similar problem while developing a library called Mantine DataTable (you might want to check it out since it appears you are using Mantine).

In my case, while I was building the "record selection" feature, I had to add a selection Checkbox to every row, but on the other hand the row itself had to have an onClick handler.

The solution I found was to simply use stopPropagation() when the user clicks the checkbox.

I think the same would work in your case as well.

Clickable table rows covers button

1 Answers1