EasyUI Forum

General Category => EasyUI for React => Topic started by: chrwei on October 05, 2022, 07:11:19 AM



Title: event bubbling in Accordion headers
Post by: chrwei on October 05, 2022, 07:11:19 AM
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.


Title: Re: event bubbling in Accordion headers
Post by: jarry on October 07, 2022, 07:08:18 PM
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>


Title: Re: event bubbling in Accordion headers
Post by: chrwei on October 10, 2022, 06:03:30 AM
Interesting, thanks!