How to stop propagation outside item rows-CodePudding

Research on propagation has not given me answers. I have a React list using divs. Each item has a clickable row that takes the user to another page. But within the row, there are dropdown elements for updating the item. stopPropagation has been added to the dropdowns so that the user does not go to another page.

However, if you open the dropdown and then click off to the side because you changed your mind, the row action gets triggered anyway and takes the user to another page. How do I stop that from happening? I cannot target only the row container for redirecting to another page because I can't seem to add a reference to that element that I can match on in event.target. Is there another way to achieve this?

DROPDOWN

const select = () => (
<Select value={value} onChange={(e) => onChange(e)}>
  {items.map((option) => (
      <MenuItem className={menuItemClass} key={option.id} value={option.id}>
        {option.name}
      </MenuItem>
    ))}
</Select>
)

ONCHANGE

const onChange = async (event) => {
   event.stopPropagation();
   updateItem();
   ...

ROW

<TableRowBody onClick={(event) => onClickRow(rowItem, event)}>
   ...
   <select />
   ...
</TableRowBody>

ONCLICKROW

const onClickRow = (value, event) => {
    setValue(value);
};

CodePudding user response：

If the clickable element can be a sibling of the select, you can do a css hack like this:

select:focus ~ .clickable-div{
     pointer-events:none
}
.clickable-div{
    position: absolute;
    height: 100%;
    width: 100%;
}

When the select is open (focus), it's sibling, .clickable-div will not respond to clicks.

<TableRowBody >
   ....
   <div onClick={(event) => onClickRow(rowItem, event)} className="clickable-div"></div>
   <select />
   ...
</TableRowBody>