close AntD Menu manually

user_3899126 0
Viewed 1463

I have a table implemented in antd and in each row there's a dropdown menu and when clicking on a menu item a modal will appear. Also, I have used onRow click on table rows as well. So to prevent from onRow click triggering when clicking on menu items I have used stopPropagation on menu item click. All works perfectly but the issue is because I have used stopPropagation on menu item clicks, when the modal appears, the dropdown menu does not close. Only if I click on somewhere it closes. How can I fix this issue?

My column with the dropdown

{
      title: "",
      key: "operation",
      fixed: "right",
      width: 40,
      className: "action-button",
      render: (value: any, row: any, index: any) => {
        return (
          <Dropdown
            overlay={menu}
            trigger={["click"]}
          >
              <FontAwesomeIcon
                icon={faEllipsisV}
              />
            
          </Dropdown>
        );
      },
    },

Menu component

const menu = (
    <Menu style={{ width: 100 }}>
      <Menu.Item key="0" style={{ padding: 0 }}>
        <span
          css={css`
            width: 100%;
            height: 100%;
            display: block;
            padding: 5px;
          `}
          onClick={(event) => showUpdateModal(event)}
        >
          Update
        </span>
      
      )}
    </Menu>
  );

function showUpdateModal(event: any) {
    event.stopPropagation();
    setUpdateModalVisibility(true);
  }

Table Component

<Table
          className="your-table"
          size="small"
          scroll={{
            x: 1200,
          }}
          {...tableProps}
          onRow={(record, rowIndex) => {
            return {
              onClick: (event) => {
                var selection = window.getSelection();
                if (selection && selection.type != "Range") {
                  history.push(
                    `/buy/${record.vehicleYear}-${record.make
                      .split(" ")
                      .join("-")}-${record.model.split(" ").join("-")}/${
                      record.itemId
                    }/1`
                  );
                }
              }, // click row
            };
          }}
          rowClassName="table-row"
          dataSource={sellerActivityData}
          columns={columns}
          
          
        />

I tried giving focus to an input field in my modal but it did not solve the issue.

antd typescript reactjs javascript
1 Answers

Here are the things that you can try:

  1. On your column dropdown render, try to put e.stopPropagation() on your FontAwesomeIcon component or to test it, change it to <button> first. It might trigger the table row click event if you do not put it.

     <FontAwesomeIcon
     icon={faEllipsisV}
     onClick={(e) => e.stopPropagation()}
 />

  2. Instead of putting onClick event on span, try to put it on Menu

     <Menu
     style={{ width: 100 }}
     onClick={({ key, domEvent }) => showUpdateModal(domEvent)}
 >
     <Menu.Item key="0" style={{ padding: 0 }}>
         <span
             css={css`
             width: 100%;
             height: 100%;
             display: block;
             padding: 5px;
          `}
         >
            Update
        </span>
   </Menu.Item>
 </Menu>;

Here's a working sample that I made on javascript and antd v4.x:

Edit

user_122623600
Related