EasyUI Forum
December 08, 2024, 04:30:54 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: event bubbling in Accordion headers  (Read 5434 times)
chrwei
Full Member
***
Posts: 219


View Profile Email
« 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.
Logged
jarry
Administrator
Hero Member
*****
Posts: 2278


View Profile Email
« Reply #1 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>
Logged
chrwei
Full Member
***
Posts: 219


View Profile Email
« Reply #2 on: October 10, 2022, 06:03:30 AM »

Interesting, thanks!
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!