Unable to Stop Propogation of Checkbox when on top of Collapse with Antd 4.x Library

Question

I am using Antd 4.x library. I have a Collapse and a popover that shows on Click of button on Collapse which has a Checkbox in it. I would like to Stop Propagation when checking/unchecking the checkbox, i.e. the Collapse opens/closes when checking/unchecking

Although when I click on Label of Checkbox the Collapse doesn't open/close but when the I do it on the checkable part of checkbox it happens.

I would like to Stop the open/close of Collapse when checking/unchecking of checkbox on popover

Demo Link to show the issue

TIA

Answer 1

You can wrapped your Panel extra content in a div and add onClick to stopPropagation. Also, you do not have to handle stopPropagation in Setting Button & Checkbox.

const onChange1 = (e: { target: { checked } }) => {
    console.log(`checked = ${e.target.checked}`);
  };

  const genExtra = () => (
    <div onClick={(e) => e.stopPropagation()}>
      <Popover content={<Checkbox onChange={onChange1}>Checkbox</Checkbox>} title='Title'>
        <SettingOutlined />
      </Popover>
    </div>
  );