qwc2 2025.11.19 → 2025.11.27

package/components/PluginsContainer.js

@@ -1,13 +1,14 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
 function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
@@ -58,7 +59,10 @@ var PluginsContainer = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "renderPlugins", function () {
       var device = ConfigUtils.isMobile() ? 'mobile' : 'desktop';
       var plugins = PluginStore.getPlugins();
-      return _this.props.pluginsConfig.map(function (pluginConf) {
+      return _toConsumableArray(_this.props.pluginsConfig).sort(function (a, b) {
+        var _ref, _a$order;
+        return (_ref = (_a$order = a.order) !== null && _a$order !== void 0 ? _a$order : 0 - b.order) !== null && _ref !== void 0 ? _ref : 0;
+      }).map(function (pluginConf) {
         var _this$props$theme, _this$props$theme2, _pluginConf$key;
         var Plugin = plugins[pluginConf.name + "Plugin"];
         if (!Plugin) {
@@ -157,6 +161,47 @@ var PluginsContainer = /*#__PURE__*/function (_React$Component) {
             el.style.setProperty('--buttons-container-height', "".concat(height, "px"));
           }
         });
+        var mutationObserver = new MutationObserver(function (mutations) {
+          mutationObserver.disconnect();
+          var _iterator = _createForOfIteratorHelper(mutations),
+            _step;
+          try {
+            var _loop = function _loop() {
+              var m = _step.value;
+              if (m.type === "childList") {
+                // Reorder child nodes for natural tab focus order
+                var children = _toConsumableArray(el.children);
+                var slots = {};
+                children.forEach(function (child) {
+                  if (child.dataset.subslot === undefined) {
+                    var _slots$child$dataset$;
+                    var subslot = ((_slots$child$dataset$ = slots[child.dataset.slot]) !== null && _slots$child$dataset$ !== void 0 ? _slots$child$dataset$ : 0) - 1;
+                    slots[child.dataset.slot] = child.dataset.subslot = subslot;
+                    child.style.order = 100 * parseInt(child.style.order, 10) + subslot;
+                  }
+                });
+                children.sort(function (a, b) {
+                  return b.style.order - a.style.order;
+                }).forEach(function (node) {
+                  return el.appendChild(node);
+                });
+              }
+            };
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              _loop();
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+          mutationObserver.observe(el, {
+            childList: true
+          });
+        });
+        mutationObserver.observe(el, {
+          childList: true
+        });
         resizeObserver.observe(el);
         el.recomputeSpacers = function () {
           var slots = new Set();
@@ -173,7 +218,7 @@ var PluginsContainer = /*#__PURE__*/function (_React$Component) {
               var child = document.createElement("div");
               child.className = "map-buttons-spacer";
               child.dataset.spacer = 1;
-              child.style.order = i;
+              child.style.order = 100 * i;
               el.appendChild(child);
             }
           }
@@ -210,14 +255,14 @@ var PluginsContainer = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement(BottomToolPortalContext.Provider, {
         value: this.state.bottomToolContainerRef
       }, haveRefs ? this.renderPlugins() : null, haveRefs ? this.props.children : null)))), /*#__PURE__*/React.createElement(WindowManager, null), /*#__PURE__*/React.createElement("div", {
-        className: "map-container",
-        ref: this.setMapContainerRef,
-        style: mapContainerStyle
-      }, /*#__PURE__*/React.createElement(ProcessNotifications, null)), /*#__PURE__*/React.createElement("div", {
         className: "map-buttons-container",
         ref: this.setButtonContainerRef,
         style: mapContainerStyle
       }), /*#__PURE__*/React.createElement("div", {
+        className: "map-container",
+        ref: this.setMapContainerRef,
+        style: mapContainerStyle
+      }, /*#__PURE__*/React.createElement(ProcessNotifications, null)), /*#__PURE__*/React.createElement("div", {
         className: "app-infos-container",
         ref: this.setAppInfosContainerRef,
         style: mapContainerStyle

package/components/ResizeableWindow.js

@@ -46,11 +46,6 @@ var ResizeableWindow = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "state", {
       geometry: null
     });
-    _defineProperty(_this, "renderRole", function (role) {
-      return React.Children.toArray(_this.props.children).find(function (child) {
-        return child.props.role === role;
-      });
-    });
     _defineProperty(_this, "onClose", function (ev) {
       if (_this.state.externalWindow) {
         _this.state.externalWindow.removeEventListener('beforeunload', _this.props.onClose);
@@ -241,7 +236,10 @@ var ResizeableWindow = /*#__PURE__*/function (_React$Component) {
         onResizeStop: _this.onResizeStop,
         ref: _this.initRnd
       }, /*#__PURE__*/React.createElement("div", {
-        className: "resizeable-window-contents"
+        className: "resizeable-window-contents",
+        onFocus: function onFocus() {
+          return _this.props.raiseWindow(_this.id);
+        }
       }, _this.renderTitleBar(), /*#__PURE__*/React.createElement("div", {
         className: bodyclasses,
         onMouseDown: function onMouseDown() {
@@ -256,7 +254,7 @@ var ResizeableWindow = /*#__PURE__*/function (_React$Component) {
         className: "resizeable-window-portal-container"
       }, /*#__PURE__*/React.createElement(portals.OutPortal, {
         node: _this.portalNode
-      })) : _this.renderRole("body"))));
+      })) : _this.props.children)));
     });
     _defineProperty(_this, "setInitialSize", function (container) {
       if (!container) {
@@ -302,7 +300,7 @@ var ResizeableWindow = /*#__PURE__*/function (_React$Component) {
         className: "resizeable-window-portal-container"
       }, /*#__PURE__*/React.createElement(portals.OutPortal, {
         node: _this.portalNode
-      })) : _this.renderRole("body"))), _this.state.externalWindow.document.body);
+      })) : _this.props.children)), _this.state.externalWindow.document.body);
     });
     _defineProperty(_this, "initRnd", function (el) {
       if (el) {
@@ -456,6 +454,17 @@ var ResizeableWindow = /*#__PURE__*/function (_React$Component) {
     _this.dragShield = null;
     _this.id = uuidv4();
     _this.portalNode = props.usePortal ? portals.createHtmlPortalNode() : null;
+    if (_this.portalNode) {
+      _this.portalNode.element.addEventListener('click', function () {
+        return _this.props.raiseWindow(_this.id);
+      });
+      _this.portalNode.element.addEventListener('focus', function () {
+        return _this.props.raiseWindow(_this.id);
+      });
+      _this.portalNode.element.addEventListener('focusin', function () {
+        return _this.props.raiseWindow(_this.id);
+      });
+    }
     return _this;
   }
   _inherits(ResizeableWindow, _React$Component);
@@ -513,7 +522,7 @@ var ResizeableWindow = /*#__PURE__*/function (_React$Component) {
       return [this.portalNode ? /*#__PURE__*/React.createElement(portals.InPortal, {
         key: "InPortal",
         node: this.portalNode
-      }, this.renderRole("body")) : null, this.state.externalWindow ? this.renderExternalWindow() : this.renderInternalWindowContainer()];
+      }, this.props.children) : null, this.state.externalWindow ? this.renderExternalWindow() : this.renderInternalWindowContainer()];
     }
   }]);
 }(React.Component);

package/components/SearchBox.js

@@ -67,6 +67,7 @@ import ButtonBar from './widgets/ButtonBar';
 import ComboBox from './widgets/ComboBox';
 import InputContainer from './widgets/InputContainer';
 import NumberInput from './widgets/NumberInput';
+import PopupMenu from './widgets/PopupMenu';
 import Spinner from './widgets/Spinner';
 import './style/SearchBox.css';
 var SearchBox = /*#__PURE__*/function (_React$Component) {
@@ -149,7 +150,6 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
         }, LocaleUtils.tr("search.none")), _this.state.searchFilterRegions.map(function (group, gidx) {
           return [/*#__PURE__*/React.createElement("div", {
             "data-group-header": gidx,
-            disabled: true,
             key: "group" + gidx
           }, group.name)].concat(_toConsumableArray(group.items.map(function (item, idx) {
             return /*#__PURE__*/React.createElement("div", {
@@ -243,23 +243,30 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
       if (!_this.state.resultsVisible) {
         return false;
       }
-      var children = [_this.renderRecentResults(), _this.renderFilters(), _this.renderResults()];
+      var children = [_this.renderRecentResults(), _this.renderFilters(), _this.renderResults()].flat(Infinity);
       children = children.filter(function (child) {
         return !isEmpty(child);
       });
       if (isEmpty(children)) {
         if (isEmpty(_this.state.pendingSearches) && _this.state.searchResults.query_text) {
           children = /*#__PURE__*/React.createElement("div", {
-            className: "searchbox-noresults"
+            className: "searchbox-noresults",
+            disabled: true,
+            key: "noresults"
           }, LocaleUtils.tr("search.noresults"));
         } else {
           return null;
         }
       }
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(PopupMenu, {
+        anchor: _this.searchBox,
         className: "searchbox-results",
-        onMouseDown: _this.setPreventBlur,
-        ref: MiscUtils.setupKillTouchEvents
+        onClose: function onClose() {
+          return _this.setState({
+            resultsVisible: false
+          });
+        },
+        setMaxWidth: true
       }, children);
     });
     _defineProperty(_this, "renderRecentResults", function () {
@@ -269,69 +276,63 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
       if (isEmpty(recentSearches) || recentSearches.length === 1 && recentSearches[0].toLowerCase() === _this.state.searchText.toLowerCase()) {
         return null;
       }
-      return /*#__PURE__*/React.createElement("div", {
-        key: "recent"
-      }, /*#__PURE__*/React.createElement("div", {
+      return [/*#__PURE__*/React.createElement("div", {
         className: "searchbox-results-section-title",
-        onClick: function onClick() {
-          return _this.toggleSection("recent");
-        },
-        onMouseDown: MiscUtils.killEvent
+        key: "recent",
+        onClick: function onClick(ev) {
+          return _this.toggleSection(ev, "recent");
+        }
       }, /*#__PURE__*/React.createElement(Icon, {
         icon: _this.isCollapsed("recent") ? "expand" : "collapse"
-      }), LocaleUtils.tr("search.recent")), !_this.isCollapsed("recent") ? /*#__PURE__*/React.createElement("div", {
-        className: "searchbox-results-section-body"
-      }, recentSearches.map(function (entry, idx) {
+      }), LocaleUtils.tr("search.recent")), !_this.isCollapsed("recent") ? recentSearches.map(function (entry, idx) {
         return /*#__PURE__*/React.createElement("div", {
           className: "searchbox-result",
-          key: "r" + idx,
+          key: "recent:" + idx,
           onClick: function onClick() {
             return _this.searchTextChanged(entry);
-          },
-          onMouseDown: MiscUtils.killEvent
+          }
         }, entry);
-      })) : null);
+      }) : null];
     });
     _defineProperty(_this, "renderFilters", function () {
-      return Object.entries(_this.state.searchResults).map(function (_ref3) {
+      var filters = Object.entries(_this.state.searchResults).reduce(function (res, _ref3) {
         var _ref4 = _slicedToArray(_ref3, 2),
           provider = _ref4[0],
           results = _ref4[1];
         if (isEmpty(results.result_counts) || results.result_counts.length < 2) {
-          return null;
+          return res;
         }
-        var collapsed = _this.isCollapsed('filter', false);
         var values = results.result_counts.map(function (entry) {
-          return entry.filterword + ": " + _this.state.searchResults.query_text;
+          return [entry.filterword + ": " + _this.state.searchResults.query_text, provider];
         });
         values.sort(function (a, b) {
-          return a.localeCompare(b);
+          return a[0].localeCompare(b[0]);
         });
+        return [].concat(_toConsumableArray(res), _toConsumableArray(values));
+      }, []);
+      if (isEmpty(filters)) {
+        return null;
+      }
+      var collapsed = _this.isCollapsed('filter', false);
+      return [/*#__PURE__*/React.createElement("div", {
+        className: "searchbox-results-section-title",
+        key: "filter",
+        onClick: function onClick(ev) {
+          return _this.toggleSection(ev, "filter");
+        }
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: collapsed ? "expand" : "collapse"
+      }), LocaleUtils.tr("search.filter")), !collapsed ? filters.map(function (valProv, idx) {
         return /*#__PURE__*/React.createElement("div", {
-          key: "filter"
-        }, /*#__PURE__*/React.createElement("div", {
-          className: "searchbox-results-section-title",
+          className: "searchbox-result",
+          key: "filter:" + idx,
           onClick: function onClick() {
-            return _this.toggleSection("filter");
-          },
-          onMouseDown: MiscUtils.killEvent
-        }, /*#__PURE__*/React.createElement(Icon, {
-          icon: collapsed ? "expand" : "collapse"
-        }), LocaleUtils.tr("search.filter")), !collapsed ? /*#__PURE__*/React.createElement("div", {
-          className: "searchbox-results-section-body"
-        }, values.map(function (value, idx) {
-          return /*#__PURE__*/React.createElement("div", {
-            className: "searchbox-result",
-            key: "f" + idx,
-            onClick: function onClick() {
-              return _this.searchTextChanged(value, true, provider);
-            },
-            onMouseDown: MiscUtils.killEvent
-          }, /*#__PURE__*/React.createElement("span", {
-            className: "searchbox-result-label"
-          }, value));
-        })) : null);
-      }).filter(Boolean);
+            return _this.searchTextChanged(valProv[0], true, valProv[1]);
+          }
+        }, /*#__PURE__*/React.createElement("span", {
+          className: "searchbox-result-label"
+        }, valProv[0]));
+      }) : null];
     });
     _defineProperty(_this, "renderResults", function () {
       var resultRenderers = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, SearchResultType.PLACE, _this.renderPlaceResult), SearchResultType.THEMELAYER, _this.renderLayerResult), SearchResultType.EXTERNALLAYER, _this.renderLayerResult), SearchResultType.THEME, _this.renderThemeResult), SearchResultType.TASK, _this.renderTaskResult);
@@ -361,23 +362,21 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
           return {
             priority: priority * 1000000 + (group.priority || 0),
             title: (_group$title = group.title) !== null && _group$title !== void 0 ? _group$title : LocaleUtils.tr(group.titlemsgid),
-            tree: /*#__PURE__*/React.createElement("div", {
-              key: sectionId
-            }, /*#__PURE__*/React.createElement("div", {
+            tree: [/*#__PURE__*/React.createElement("div", {
               className: "searchbox-results-section-title",
-              onClick: function onClick() {
-                return _this.toggleSection(sectionId);
-              },
-              onMouseDown: MiscUtils.killEvent
+              key: sectionId,
+              onClick: function onClick(ev) {
+                return _this.toggleSection(ev, sectionId);
+              }
             }, /*#__PURE__*/React.createElement(Icon, {
               icon: _this.isCollapsed(sectionId) ? "expand" : "collapse"
-            }), /*#__PURE__*/React.createElement("span", null, (_group$title2 = group.title) !== null && _group$title2 !== void 0 ? _group$title2 : LocaleUtils.tr(group.titlemsgid))), !_this.isCollapsed(sectionId) ? /*#__PURE__*/React.createElement("div", {
-              className: "searchbox-results-section-body"
-            }, group.items.map(function (entry) {
+            }), /*#__PURE__*/React.createElement("span", null, (_group$title2 = group.title) !== null && _group$title2 !== void 0 ? _group$title2 : LocaleUtils.tr(group.titlemsgid))), !_this.isCollapsed(sectionId) ? [group.items.map(function (entry) {
               return renderer(provider, group, entry);
             }), moreLabel ? /*#__PURE__*/React.createElement("div", {
-              className: "searchbox-more-results"
-            }, moreLabel) : null) : null)
+              className: "searchbox-more-results",
+              disabled: true,
+              key: sectionId + ":more"
+            }, moreLabel) : null] : null].flat()
           };
         }));
       }, []).filter(Boolean);
@@ -399,10 +398,8 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
         className: "searchbox-result",
         key: key,
         onClick: function onClick() {
-          _this.selectPlaceResult(provider, group, result);
-          _this.blur();
-        },
-        onMouseDown: MiscUtils.killEvent
+          return _this.selectPlaceResult(provider, group, result);
+        }
       }, result.thumbnail ? /*#__PURE__*/React.createElement("img", {
         className: "searchbox-result-thumbnail",
         onError: function onError(ev) {
@@ -419,19 +416,20 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
         icon: "info-sign",
         onClick: function onClick(ev) {
           var _result$label2;
-          MiscUtils.killEvent(ev);
-          _this.openUrl(result.externalLink, result.target, (_result$label2 = result.label) !== null && _result$label2 !== void 0 ? _result$label2 : result.text);
+          return _this.openUrl(ev, result.externalLink, result.target, (_result$label2 = result.label) !== null && _result$label2 !== void 0 ? _result$label2 : result.text);
         }
       }) : null);
     });
     _defineProperty(_this, "renderLayerResult", function (provider, group, result) {
       var _result$label3, _result$layer;
       var parent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+      var level = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
       var key = provider + ":" + group.id + ":" + result.id;
       var addThemes = ConfigUtils.getConfigProp("allowAddingOtherThemes", _this.props.theme);
       var icon = null;
       if (result.sublayers) {
-        var toggleLayerGroup = function toggleLayerGroup() {
+        var toggleLayerGroup = function toggleLayerGroup(ev) {
+          MiscUtils.killEvent(ev);
           _this.setState(function (state) {
             return {
               expandedLayerGroup: state.expandedLayerGroup === key ? null : key
@@ -441,8 +439,7 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
         icon = /*#__PURE__*/React.createElement(Icon, {
           icon: _this.state.expandedLayerGroup === key ? "minus" : "plus",
           onClick: function onClick(ev) {
-            MiscUtils.killEvent(ev);
-            toggleLayerGroup();
+            return toggleLayerGroup(ev);
           }
         });
       } else if (result.thumbnail) {
@@ -455,15 +452,15 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
         });
       }
       var selectResult = result.theme ? _this.selectThemeResult : _this.selectLayerResult;
-      return /*#__PURE__*/React.createElement("div", {
-        key: key
-      }, /*#__PURE__*/React.createElement("div", {
+      return [/*#__PURE__*/React.createElement("div", {
         className: "searchbox-result",
+        key: key,
         onClick: function onClick() {
-          selectResult(provider, group, result);
-          _this.blur();
+          return selectResult(provider, group, result);
         },
-        onMouseDown: MiscUtils.killEvent
+        style: {
+          borderLeft: "".concat(level, "em solid transparent")
+        }
       }, icon, result.theme ? /*#__PURE__*/React.createElement(Icon, {
         className: "searchbox-result-openicon",
         icon: "open"
@@ -475,35 +472,34 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
         title: (_result$label3 = result.label) !== null && _result$label3 !== void 0 ? _result$label3 : result.text
       }), result.theme && addThemes ? /*#__PURE__*/React.createElement(Icon, {
         icon: "plus",
-        onClick: function onClick(ev) {
-          MiscUtils.killEvent(ev);
-          _this.selectLayerResult(provider, group, result);
-          _this.blur();
+        onClick: function onClick() {
+          return _this.selectLayerResult(provider, group, result);
         },
         title: LocaleUtils.tr("themeswitcher.addtotheme")
       }) : null, result.sublayers ? /*#__PURE__*/React.createElement(Icon, {
         icon: "group",
-        onClick: function onClick(ev) {
-          MiscUtils.killEvent(ev);
-          _this.selectLayerResult(provider, group, result, true);
+        onClick: function onClick() {
+          return _this.selectLayerResult(provider, group, result, true);
         },
         title: LocaleUtils.tr("importlayer.asgroup")
       }) : null, result.info ? /*#__PURE__*/React.createElement(Icon, {
         icon: "info-sign",
         onClick: function onClick(ev) {
-          MiscUtils.killEvent(ev);
-          _this.toggleLayerInfo(provider, group, result, key, parent);
+          return _this.toggleLayerInfo(ev, provider, group, result, key, parent);
         }
       }) : null), _this.state.activeLayerInfo === key ? /*#__PURE__*/React.createElement("div", {
         className: "searchbox-result-abstract",
         dangerouslySetInnerHTML: {
           __html: MiscUtils.addLinkAnchors(DOMPurify.sanitize(((_result$layer = result.layer) === null || _result$layer === void 0 ? void 0 : _result$layer["abstract"]) || "")) || LocaleUtils.tr("search.nodescription")
+        },
+        disabled: true,
+        key: key + ":abstract",
+        style: {
+          borderLeft: "".concat(level, "em solid transparent")
         }
-      }) : null, _this.state.expandedLayerGroup === key ? /*#__PURE__*/React.createElement("div", {
-        className: "searchbox-result-group"
-      }, result.sublayers.map(function (sublayer) {
-        return _this.renderLayerResult(provider, group, sublayer, result.id);
-      })) : null);
+      }) : null, _this.state.expandedLayerGroup === key ? result.sublayers.map(function (sublayer) {
+        return _this.renderLayerResult(provider, group, sublayer, result.id, level + 1);
+      }) : null].flat();
     });
     _defineProperty(_this, "renderThemeResult", function (provider, group, result) {
       var _result$label4;
@@ -512,10 +508,8 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
         className: "searchbox-result",
         key: provider + ":" + group.id + ":" + result.id,
         onClick: function onClick() {
-          _this.selectThemeResult(provider, group, result);
-          _this.blur();
-        },
-        onMouseDown: MiscUtils.killEvent
+          return _this.selectThemeResult(provider, group, result);
+        }
       }, result.thumbnail ? /*#__PURE__*/React.createElement("img", {
         className: "searchbox-result-thumbnail",
         onError: function onError(ev) {
@@ -534,9 +528,7 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
       }), result.theme && addThemes ? /*#__PURE__*/React.createElement(Icon, {
         icon: "plus",
         onClick: function onClick(ev) {
-          MiscUtils.killEvent(ev);
-          _this.addThemeLayers(result.layer);
-          _this.blur();
+          return _this.addThemeLayers(result.layer);
         },
         title: LocaleUtils.tr("themeswitcher.addtotheme")
       }) : null);
@@ -546,10 +538,8 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
         className: "searchbox-result",
         key: provider + ":" + group.id + ":" + result.id,
         onClick: function onClick() {
-          _this.selectTaskResult(provider, group, result);
-          _this.blur();
-        },
-        onMouseDown: MiscUtils.killEvent
+          return _this.selectTaskResult(provider, group, result);
+        }
       }, result.task.icon ? /*#__PURE__*/React.createElement(Icon, {
         icon: result.task.icon
       }) : null, /*#__PURE__*/React.createElement("span", {
@@ -566,6 +556,7 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
             query_text: resultText
           }, provider, {
             results: [_objectSpread(_objectSpread({}, group), {}, {
+              resultCount: 1,
               items: [result]
             })],
             tot_result_count: 1
@@ -722,7 +713,8 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
         ev.target.style.display = 'none';
       }
     });
-    _defineProperty(_this, "toggleLayerInfo", function (provider, group, result, key, parent) {
+    _defineProperty(_this, "toggleLayerInfo", function (ev, provider, group, result, key, parent) {
+      MiscUtils.killEvent(ev);
       var setResultLayerAndActiveInfo = function setResultLayerAndActiveInfo(layer) {
         // Embed returned layer into result item, so that layer info is read from item.layer.abstract
         _this.setState(function (state) {
@@ -779,14 +771,8 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
         }
       });
     });
-    _defineProperty(_this, "setPreventBlur", function () {
-      _this.preventBlur = true;
-      setTimeout(function () {
-        _this.preventBlur = false;
-        return false;
-      }, 100);
-    });
-    _defineProperty(_this, "toggleSection", function (key) {
+    _defineProperty(_this, "toggleSection", function (ev, key) {
+      MiscUtils.killEvent(ev);
       return _this.setState(function (state) {
         var _newCollapsedSections;
         var newCollapsedSections = _objectSpread({}, state.collapsedSections);
@@ -833,10 +819,7 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
       }, 250);
     });
     _defineProperty(_this, "onFocus", function () {
-      _this.setState({
-        resultsVisible: true
-      });
-      if (_this.searchBox) {
+      if (_this.searchBox && !_this.state.resultsVisible) {
         _this.searchBox.select();
       }
       if (isEmpty(_this.state.searchResults) && _this.props.theme) {
@@ -846,15 +829,11 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
         _this.toggleFilterOptions(false);
       }
     });
-    _defineProperty(_this, "onBlur", function () {
-      if (_this.preventBlur && _this.searchBox) {
-        _this.searchBox.focus();
-      } else {
+    _defineProperty(_this, "onKeyDown", function (ev) {
+      if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
+        ev.preventDefault();
         _this.setState({
-          resultsVisible: false,
-          collapsedSections: {},
-          expandedLayerGroup: null,
-          activeLayerInfo: null
+          resultsVisible: true
         });
       }
     });
@@ -955,6 +934,7 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
               }
             }
             return {
+              resultsVisible: true,
               searchResults: searchResults,
               pendingSearches: newPendingSearches
             };
@@ -1130,7 +1110,8 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
       var y = 0.5 * (bbox[1] + bbox[3]);
       _this.props.zoomToPoint([x, y], zoom, _this.props.map.projection);
     });
-    _defineProperty(_this, "openUrl", function (url, target, title) {
+    _defineProperty(_this, "openUrl", function (ev, url, target, title) {
+      MiscUtils.killEvent(ev);
       if (target === "iframe") {
         target = ":iframedialog:externallinkiframe";
       }
@@ -1140,7 +1121,6 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
     });
     _this.searchBox = null;
     _this.searchTimeout = null;
-    _this.preventBlur = false;
     return _this;
   }
   _inherits(SearchBox, _React$Component);
@@ -1182,6 +1162,14 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
       if (!this.state.filterOptionsVisible && prevState.filterOptionsVisible) {
         this.searchTextChanged(this.state.searchText);
       }
+      // Reset collapsed sections etc
+      if (!this.state.resultsVisible && prevState.resultsVisible) {
+        this.setState({
+          collapsedSections: {},
+          expandedLayerGroup: null,
+          activeLayerInfo: null
+        });
+      }
     }
   }, {
     key: "render",
@@ -1202,11 +1190,16 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
         icon: "search",
         role: "prefix"
       }), /*#__PURE__*/React.createElement("input", {
-        onBlur: this.onBlur,
         onChange: function onChange(ev) {
           return _this3.searchTextChanged(ev.target.value);
         },
+        onClick: function onClick() {
+          return _this3.setState({
+            resultsVisible: true
+          });
+        },
         onFocus: this.onFocus,
+        onKeyDown: this.onKeyDown,
         placeholder: placeholder,
         ref: function ref(el) {
           _this3.searchBox = el;

package/components/ServiceInfoWindow.js

@@ -85,8 +85,7 @@ var ServiceInfoWindow = /*#__PURE__*/function (_React$Component) {
         onClose: this.onClose,
         title: LocaleUtils.tr("serviceinfo.title")
       }, /*#__PURE__*/React.createElement("div", {
-        className: "service-info-window-body",
-        role: "body"
+        className: "service-info-window-body"
       }, /*#__PURE__*/React.createElement("h4", {
         className: "service-info-window-title"
       }, this.props.service.title), /*#__PURE__*/React.createElement("div", {