JS implementation click any position to display the drop-down box list

By default, the drop-down box and the drop-down check box must be clicked on the right-most triangle to achieve the drop-down, which is not humanized enough. Most users prefer to click any position to expand the drop-down box option, and the specific effect is as follows:

Before optimization:

After the optimization:

Open %FR_HOME%\webapps\webroot\WEB-INF\reportlets\GettingStartedEN.cpt

Switch to the parameter panel, select the drop-down box widget, and add the post-initialization event:

var self = this;
$('input',this.element).click(function(){
    if(self.$view.css('display')=='none'){
        self.onTriggerClick();
    }
});

Note: In theory, you only need to add it in the widget's post-initialization event. If that doesn't work, try adding exactly the same code to the widget's pre-edit event.

Click to download the  template: 

JS_implementation_click_any_position_to_display_the drop-down_box_ list.cpt