CODEWITHSUNDEEP
reactjscheckboxantdstoppropagation
user578219
user578219

Reputation: 617

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

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

Upvotes: 0

Views: 751

Answers (2)

HKBN-ITDS
HKBN-ITDS

Reputation: 669

First of all, you have to understand that when an event occurs, the event always has an event source, that is, the object that caused the event. An event cannot be generated out of thin air. This is the occurrence of an event.

When the event occurs, the event will start to propagate. In your case, when we click the checkbox, a click event will be generated, but the checkbox cannot handle this event. The event must be propagated from the checkbox to reach the code that can handle the event. (for example, we assign a function name stopPropagation to the Fragment's onClick property, which is to let "stopPropagation" handle the Chekbox's click event).

 import React, { Fragment } from "react";
    
    function stopPropagation(e) {
        //The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.
        if (e && e.stopPropagation) {
          e.stopPropagation();
        } else {
           //If it is IE browser
          window.event.cancelBubble = true;
        }
      }
    
      const genExtra = () => (
        <Fragment onClick={(e) => stopPropagation(e)}>
          <Popover
            content={<Checkbox onChange={onChange1}>Checkbox</Checkbox>}
            title="Title"
          >
            {/* <Button type="primary" shape="circle" icon={<SearchOutlined />} /> */}
            <SettingOutlined
              onClick={(event) => {
                event.stopPropagation();
              }}
            />
          </Popover>
        </Fragment>
      );

For your reference: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

Upvotes: 0

Muhammad Nouman Rafique
Muhammad Nouman Rafique

Reputation: 1576

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>
  );

Upvotes: 1

Related Questions