DropDownButton not triggering event handler

[Guilherme Piveti Filho]

Hello, I`m facing a problem while using the DropDownButtonComponent. When I use the “target” parameter to call a div element which has a form inside it the event handlers (onClick, onSubmit…) don`t work. In the other hand if I use the same div element outside the drop down everything works fine. So how should I handle this problem? (I`m using React).

In this code (https://stackblitz.com/edit/react-v4kv29?file=index.js) I demonstrate the problem. The form without the <DropDownButtonComponent/> works fine, but when I uncomment this piece of code the event handler is not triggered.

[Gayathri KarunaiAnandam]

Hi Guilherme, 

We have checked your reported query. You can achieve this requirement by adding event listener to form element in beforeOpen event as demonstrated in the below code snippet. 

let beforeOpen = args => { 

    args.element 

      .getElementsByTagName('form')[0] 

      .addEventListener('submit', onClickPreventDefault); 

  }; 

 return ( 

<DropDownButtonComponent 

                  target="#sortByDropContent" 

                  beforeOpen={event => beforeOpen(event)} 

                > 

                  Sort By 

                </DropDownButtonComponent>  ); 

} 

For your reference, we have prepared  a sample based on this. Please check the below link. 

Sample: https://stackblitz.com/edit/react-v4kv29-xewvsb?file=index.js  

Please get back to us, if you need further assistance. 

Regards, 

Gayathri K