calcite-maps icon indicating copy to clipboard operation
calcite-maps copied to clipboard

Search dropdown not working

Open jjhi11 opened this issue 6 years ago • 2 comments

I have multiple sources for my search widget and the dropdown is not opening with them. I first noticed this on .9 and seems to still not work with .10

jjhi11 avatar Jan 09 '19 21:01 jjhi11

I think the css is hiding it. Try something like this:

.calcite-maps .calcite-search-expander .esri-search__sources-button.esri-widget--button {
  display: flex !important;
}

.calcite-maps .calcite-search-expanded .esri-menu.esri-search__sources-menu {
  display: block !important;
}

alaframboise avatar Jan 10 '19 18:01 alaframboise

That works but it leaves the drop-down arrow visible when the search is not expanded.

calcite-search

I didn't like how this looked so In order to hide drop-down until search widget is expanded I modified the setExpanded function in calcitemaps0arcgis-support.js like so:

  // calcitemaps-arcgis-support.js
  function setExpanded(e, expand) {
    var searchExpander = query(".calcite-search-expander .esri-search");
    var searchSourceMenu = query(".calcite-search-expander .esri-search__sources-menu");    // added
    if (searchExpander && searchExpander.length > 0) {
      if (expand) {
        query(searchExpander[0]).addClass("calcite-search-expanded");
        query(searchSourceMenu[0]).addClass("calcite-search-source-menu-expanded");  // added
        search._expanded = true;
      } else {
        query(searchExpander[0]).removeClass("calcite-search-expanded");
        query(searchSourceMenu[0]).removeClass("calcite-search-source-menu-expanded"); // added
        search._expanded = false;
      }
    }            
  }

I also put this in my CSS

 .calcite-search-expander .esri-search__sources-button{
  display: none;
}
.calcite-search-expanded .esri-search__sources-button{
  display: block;
}
.calcite-search-source-menu-expanded{
  display: block !important;
}

The results:

search-before

search-expanded

search-menu-expanded

jg76379 avatar May 14 '19 13:05 jg76379