Test bootstrap, find that it didnt use <select>, so cant show the dropdown correctly

src/managers/filterManager.ts

@@ -14,6 +14,11 @@ export class FilterManager implements IFilterManager{
     constructor(host:IVisualHost){
         this.host=host;
     }
+    public clear():void{
+        console.debug("clear start:");
+        this.host.applyJsonFilter(null,"general","filter",powerbi.FilterAction.remove);
+        console.debug("clear end");
+    }
     public update(field:powerbi.DataViewCategoryColumn):void{
         let queryName:string=field.source.queryName;
         let splitPosition:number=queryName.indexOf('.');

src/managers/layoutManager.ts

@@ -3,13 +3,22 @@ import powerbi from "powerbi-visuals-api";
 import DataView = powerbi.DataView;
 import * as visualInterfaces from "../visual/visualInterfaces";
 import * as d3 from "d3";
-import { ILayoutManager } from "../visual/visualInterfaces";
+import { ILayoutManager,IFilterManager } from "../visual/visualInterfaces";
+import { IFilter } from "powerbi-models";
 type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;
 export class LayoutManager implements ILayoutManager{
     layout:Selection<HTMLElement>;
     // constructor(layout:Selection<HTMLElement>){
     //     this.layout=layout;
     // }
+    header:Selection<HTMLDivElement>
+    constructor(layout:Selection<HTMLElement>,filterManager:IFilterManager){
+        this.layout=layout;
+        this.header=this.layout.append('div').attr('header',true);
+        this.header.append('button').attr('clear',true).text('clear').on('click',function(){
+            filterManager.clear();
+        });
+    }
     update(dataView:DataView,width:number,height:number):void{
         //this.layout.style("width",width+"px").style("height",height+"px");
     }

src/managers/managerFactory.ts

@@ -4,8 +4,8 @@ import * as d3 from "d3";
 import powerbi from "powerbi-visuals-api";
 type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;
 export class ManagerFactory{
-    public static CreateLayoutManager(classLayoutManager:visualInterfaces.ILayoutManagerConstructor,container:Selection<HTMLElement>):visualInterfaces.ILayoutManager{
+    public static CreateLayoutManager(classLayoutManager:visualInterfaces.ILayoutManagerConstructor,container:Selection<HTMLElement>,filterManager:visualInterfaces.IFilterManager):visualInterfaces.ILayoutManager{
-        return new classLayoutManager(container);
+        return new classLayoutManager(container,filterManager);
     }
     public static CreateSelectorManager(classSelectorManager:visualInterfaces.ISelectorManagerConstructor,container:Selection<HTMLElement>,filterManager:visualInterfaces.IFilterManager):visualInterfaces.ISelectorManager{
         return new classSelectorManager(container,filterManager);

src/managers/selectorManager.ts

@@ -67,44 +67,22 @@ abstract class Selector implements ISelector{
     public abstract update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn):void;
 }
 class DropDownSelector extends Selector{
-    private dropDown:Selection<HTMLSelectElement>;
+    private dropDown:Selection<HTMLElement>;
     protected createView() {
         console.debug('dropDownViewManager','createView start');
-        this.dropDown=this.manager.selectorContainer.append("select").classed("dropDown-selector",true).classed("selector",true).attr("multiple",true);
+        
+        this.dropDown=this.manager.selectorContainer.append('div').classed('dropDown-selector',true)
+            .append('select').attr('id','dropDown-select').attr('multiple','true');
         console.debug('dropDownViewManager','createView end');
     }
     public dispose(){
         this.dropDown.remove();
     }
-    public update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn) {
+    public update(field: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn) {
         console.debug('dropDownViewManager','update start');
-        let options=this.dropDown.selectAll("option").data(categories.values,function(d){return d.toString();});//map data
-        options.enter().append("option").text(function(d){return d.toString();}).attr('dropDown-option');//add
-        options.exit().remove();//delete
-        console.debug("dropDown:",this.dropDown);
         let filterManager:IFilterManager=this.manager.filterManager;
-        // this.dropDown.on("input change",function(){
-        //     console.debug('DropDownSelector:',"input change");
-        //     console.debug('this',this);
-        //     console.debug('filterManager:',filterManager);
-        //     let selectedValues:string[]=[];
-        //     for(let i=0;i<this.selectedOptions.length;i++){
-        //         let option=this.selectedOptions.item(i);
-        //         if(option.selected){
-        //             console.debug("option selected",option);
-        //             console.debug('option.text:',option.text);
-        //             selectedValues.push(option.text);
-        //         }
-        //     }
-        //     if(selectedValues.length==0){
-        //     }else{
-        //         console.debug("selection.length",selectedValues.length);
-        //         filterManager.filterStringField(selectedValues);
-        //     }
-        //     console.debug("this",this.selectedOptions);
-        // });
         
-        $('.dropDown-selector').multiselect({
+        $('#dropDown-select').multiselect({
             onChange:function(){
                 let selectedValues:string[]=[];
                 $('option:selected').map(function(a,item){
@@ -113,9 +91,22 @@ class DropDownSelector extends Selector{
                     filterManager.filterStringField(selectedValues);
                 });
             },
-            maxHeight:100,
+            maxHeight:200,
             includeSelectAllOption:true
         });
+        let options=[];
+        field.values.map((item)=>{
+            options.push({
+                label:item.toString()
+            });
+        });
+        $('#dropDown-select').multiselect('dataprovider',options);
+        $('.dropDown-selector').css('overflow','visible').css('z-index',1000).css('position','relative');
+        $('.dropdown-menu').css('overflow','flow').css('z-index',1000).css('position','relative');
+        //$('#dropDown-select').multiselect('rebuild');
+
+        console.debug("dropDown:",this.dropDown);
+        
         console.debug('dropDownViewManager','update end');
     }
 }

src/visual/visual.ts

@@ -63,20 +63,22 @@ export class Visual implements IVisual {
         if (document) {
             this.selectionManager =options.host.createSelectionManager();
             let container=d3.select(options.element).append("div").classed("container",true);
-            d3.select(options.element).on('contextmenu', () => {
+            // d3.select(options.element).on('contextmenu', () => {
-                const mouseEvent: MouseEvent = <MouseEvent>d3.event;
+            //     const mouseEvent: MouseEvent = <MouseEvent>d3.event;
-                //const eventTarget: EventTarget = mouseEvent.target;
+            //     //const eventTarget: EventTarget = mouseEvent.target;
-                //let dataPoint = d3.select(eventTarget).datum();
+            //     //let dataPoint = d3.select(eventTarget).datum();
-                this.selectionManager.showContextMenu({}, {
+            //     this.selectionManager.showContextMenu({}, {
-                    x: mouseEvent.clientX,
+            //         x: mouseEvent.clientX,
-                    y: mouseEvent.clientY
+            //         y: mouseEvent.clientY
-                });
+            //     });
-                //mouseEvent.preventDefault();
+            //     //mouseEvent.preventDefault();
-            });
+            // });
             let headerContainer=container.append("div").classed("header-container",true);
             let selectorContainer=container.append("div").classed("selector-container",true);
-            this.layoutManager=ManagerFactory.CreateLayoutManager(LayoutManager,container);
+            //First, create the filterManager
             this.filterManager=ManagerFactory.CreateFilterManager(FilterManager,options.host);
+            //Then, layoutManager and selectorManager
+            this.layoutManager=ManagerFactory.CreateLayoutManager(LayoutManager,container,this.filterManager);
             this.selectorManager=ManagerFactory.CreateSelectorManager(SelectorManager,selectorContainer,this.filterManager);
         }
         console.debug('end constructor');

src/visual/visualInterfaces.ts

@@ -16,7 +16,7 @@ export interface ILayoutManager{
     update(dataView:DataView,width:number,height:number):void;
 }
 export interface ILayoutManagerConstructor{
-    new(container:Selection<HTMLElement>):ILayoutManager;
+    new(container:Selection<HTMLElement>,filterManager:IFilterManager):ILayoutManager;
 };
 
 //ISelectorManager
@@ -35,6 +35,7 @@ export interface ISelectorManagerConstructor{
 export interface IFilterManager{
     update(field:powerbi.DataViewCategoryColumn):void;
     filterStringField(selection:string[]):void;
+    clear():void;
 }
 export interface IFilterManagerConstructor{
     new(host:IVisualHost):IFilterManager;