CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
chad
chad

Reputation: 117

Material-UI: Prevent onClick from triggering for an element positioned under another in sticky Table

In my table I have a checkbox at the start of every row, including the table head, which has the sticky property.

When scrolling the table, rows will move behind the head row. If I go to click the head row's checkbox with another row's checkbox under it, they will both trigger their onClick functions.

Layered checkboxes

The jsx is equivalent to the following:

<Table>
   <TableHead style={{position: "sticky"}}>
      <TableRow>
         <TableCell>
            <Checkbox/>
         </TableCell>
         ...
      </TableRow>
   </TableHead>

   <TableBody>
      <TableRow>
         <TableCell>
            <Checkbox/>
         </TableCell>
         ...
      </TableRow>
      ...
   </TableBody>

</Table>

How can I prevent the checkbox underneath the head from being clicked when it is not visible?

Upvotes: 1

Views: 360

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81310

Instead of adding your custom style to create a fixed header. You can simply set stickyHeader props to true, which will also fix your problem:

<Table stickyHeader>

Live Demo

Edit 67016497/prevent-onclick-triggering-for-an-element-positioned-under-another

Upvotes: 1

Related Questions