event bubbling in Accordion headers

[chrwei]

I'm trying add a ComboBox to an AccordionPanel header such that the I will expand the panel manually when a valid option is selected in the combo.  Issue is the panel toggles as though i clicked the header itself with every click of the combobox.  Is there some way to cancel bubbling that event? ComboBox onClick doens't seem to fire, and a "window.event.stopPropagation();window.event.cancelBubble=true;" on focus and blur have no effect

Code:

<Accordion animate multiple selectedIndex={selectedPanel} >
  <AccordionPanel header={() => {
    return (
      <div key={1} >
        <div className="panel-title">Reports</div>
        <ComboBox
          data={[
            { value: 0, text: "Option 0"},
            { value: 1, text: "Option 1"},
          ]}
          onSelectionChange={LoadOption}
        />
      </div>
    );
  }} onPanelSelect={() => {
    if (selectedPanel.length === 0) {
      setselectedPanel([0]);
    }
  }}
    onPanelUnselect={() => {
      setselectedPanel([]);
    }}
  >
    Selected option {selectedoptioninfo}
  </AccordionPanel>
</Accordion>

I do still expect the panel to expand and collapse as normal when clicking part of the header that isn't the combobox, I just dont' think the clicks on the combo should bubble up, probably at all.  I can't think if a single case where dropping down a combo should fire a click on any parent elements.

[jarry]

Please wrap the ComboBox with a outer element and stop the event bubbling.

Code:

<Accordion animate multiple>
<AccordionPanel header={() => {
return (
<div key={1}>
<div className="panel-title">Reports</div>
<div style={{display:'inline-block'}} onClick={e => e.stopPropagation()}>
<ComboBox
data={[
{ value: 0, text: "Option 0" },
{ value: 1, text: "Option 1" },
]}
/>
</div>
</div>
);
}}
>
<p>Content0</p>
</AccordionPanel>
</Accordion>

[chrwei]

Interesting, thanks!