calcite-maps
calcite-maps copied to clipboard
Search dropdown not working
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
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;
}
That works but it leaves the drop-down arrow visible when the search is not expanded.
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: