Use Filters as custom dropdowns

html

<div id="main" style="display:flex;"> 

 <div class="nowrap">
  <SPAN class="dropdown-el icon" >
   <LABEL><SpotfireControl id="CALC_VALUE" /></LABEL> 
  </SPAN>
  <BR>
  <SPAN class=pop>
    <SpotfireControl id="FILTER" />
  </SPAN>
 </div>
:
:
:
 <div class="nowrap">
  <SPAN class="dropdown-el icon" >
   <LABEL><SpotfireControl id="CALC_VALUE" /></LABEL> 
  </SPAN>
  <BR>
  <SPAN class=pop>
    <SpotfireControl id="FILTER" />
  </SPAN>
 </div>

</div>  

js

//hides all
function hideAll(el){ [...document.getElementsByClassName("pop")] .map((e,i)=>{ if(el!=e){ e.style.visibility="hidden" } }) }

//bind events
var x=[...document.querySelectorAll(".dropdown-el.icon")]
x.forEach(el=>{
 el.addEventListener('click',(ev)=>{
   ev.stopPropagation()
   hideAll()
   let pop = el.parentNode.lastElementChild;
   pop.style.visibility=pop.style.visibility=="hidden"?"visible":"hidden"
 })
})

hideAll()

//add style
var css=`<style>
.dropdown-el {
  text-align: center;
  background: #ebf4fb;
  min-height: 95vh;
  margin: 0;
  padding: 0;
  border-bottom: 5vh solid #3694d7;
  font-family: "Myriad Pro", "Arial", sans;
  font-size: 12px;
}
.dropdown-el {
  max-width: 18em;
  position: relative;
  display: inline-block;
  margin-right: 1em;
  min-height: 2em;
  max-height: 2em;
  overflow: hidden;
  top: 0.5em;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  color: #444;
  outline: none;
  border: 0.06em solid transparent;
  border-radius: 1em;
  background-color: #cde4f5;
  transition: 0.3s all ease-in-out;
}
.dropdown-el input:focus + label {
  background: #def;
}
.dropdown-el input {
  width: 1px;
  height: 1px;
  display: inline-block;
  position: absolute;
  opacity: 0.01;
}
.dropdown-el label {
  border-top: 0.06em solid #d9d9d9;
  display: block;
  height: 2em;
  line-height: 2em;
  padding-left: 1em;
  padding-right: 3em;
  cursor: pointer;
  position: relative;
  transition: 0.3s color ease-in-out;
}
.dropdown-el label:nth-child(2) {
  margin-top: 2em;
  border-top: 0.06em solid #d9d9d9;
}
.dropdown-el input:checked + label {
  display: block;
  border-top: none;
  position: absolute;
  top: 0;
  width: 100%;
}
.dropdown-el input:checked + label:nth-child(2) {
  margin-top: 0;
  position: relative;
}
.icon::after {
  content: "";
  position: absolute;
  right: 0.8em;
  top: 0.9em;
  border: 0.3em solid #3694d7;
  border-color: #3694d7 transparent transparent transparent;
  transition: 0.4s all ease-in-out;
}
.pop{
  border: 0.06em solid #3694d7;
  background: #fff;
  border-radius: 0.25em;
  padding: 0;
  box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
  min-height: 9em;
  overflow-y:auto;
  position:fixed;
  padding:2px;
  transition: 0.4s all ease-in-out;
 z-index:1;
} 
</style>`

document.getElementById("main").insertAdjacentHTML('beforeend', css)

Reference: https://community.tibco.com/wiki/convert-filter-controls-custom-dropdowns