diff --git a/public/index.html b/public/index.html
index 41f7e32b..b5d96501 100644
--- a/public/index.html
+++ b/public/index.html
@@ -80,10 +80,10 @@
-
+
-
+
diff --git a/public/packets.js b/public/packets.js
index 80b515c5..baec4321 100644
--- a/public/packets.js
+++ b/public/packets.js
@@ -400,7 +400,7 @@
`;
// Init shared RegionFilter component
- RegionFilter.init(document.getElementById('packetsRegionFilter'));
+ RegionFilter.init(document.getElementById('packetsRegionFilter'), { dropdown: true });
RegionFilter.onChange(function() { loadPackets(); });
const obsSel = document.getElementById('fObserver');
diff --git a/public/region-filter.js b/public/region-filter.js
index b2c7ef98..c072240c 100644
--- a/public/region-filter.js
+++ b/public/region-filter.js
@@ -177,7 +177,7 @@
}
container.style.display = '';
- if (codes.length > 4) {
+ if (codes.length > 4 || container._forceDropdown) {
renderDropdown(container, codes);
} else {
renderPills(container, codes);
@@ -195,8 +195,10 @@
_listeners = _listeners.filter(function (f) { return f !== fn; });
}
- /** Initialize filter in a container, fetch regions, render, return promise */
- async function initFilter(container) {
+ /** Initialize filter in a container, fetch regions, render, return promise.
+ * Options: { dropdown: true } to force dropdown mode regardless of region count */
+ async function initFilter(container, opts) {
+ if (opts && opts.dropdown) container._forceDropdown = true;
await fetchRegions();
render(container);
}