Ant Design: How to prevent expansion when clicked on the Collapse header, but allow on a button?

Question

I am using Ant's Collapse component, which has a header with some text on Collapse.Panel. Also there's a Button component next to the header text. I need to allow Collapse's expansion only on button click, and not on the overall panel. I have tried to depict the UI here, as I can't post the screenshots.

 ____________________________________________________________
|                                                            |
|Panel Header Text <-- prevent                               |
|[Button]     <-- allow                                      |
|____________________________________________________________|

Ant's document have onChange method but it doesn't cater to an click event (which I could prevent to not make Collapse exapnd). How to restrict and allow some elements on that header to allow/prevent this collapsible behaviour?

Code Sandbox: https://codesandbox.io/s/hopeful-payne-ezpdn

Answer 1

Change your header node to this:

const panelHeader = (
  <React.Fragment>
    <Row onClick={event => event.stopPropagation()}><Col><Typography.Text>Header</Typography.Text></Col></Row>
    <Button>Expand</Button>
  </React.Fragment>
)

Your panel node should be:

<Panel showArrow={false} header={panelHeader} key="1">
      <p>{text}</p>
</Panel>

and add this Css to your styles:

.ant-collapse > .ant-collapse-item > .ant-collapse-header {
   padding: 0 !important;
}

.ant-btn {
   position: absolute;
   left: 15px;
   bottom: 15px;
}

.ant-typography {
   display: block;
   height: 80px;
   margin-left: 15px;
   margin-top: 15px;
}

You should add your arrow icon node in Row that has stopPropagation method.