diff --git a/lib/ui/elements/dropdown.mjs b/lib/ui/elements/dropdown.mjs
index 39c5a2551..294feff2a 100644
--- a/lib/ui/elements/dropdown.mjs
+++ b/lib/ui/elements/dropdown.mjs
@@ -31,7 +31,7 @@ export default (params) => {
 
         // Set btn text to reflect selection or show placeholder.
         btn.querySelector('[data-id=header-span]')
-          .textContent = params.selectedTitles.size && Array.from(params.selectedTitles).map(v => decodeURIComponent(v)).join(', ')
+          .textContent = params.selectedTitles.size && Array.from(params.selectedTitles).map(v => decodeURIComponent(encodeURIComponent(v))).join(', ')
           || params.span || params.placeholder
 
         // Execute callback method and pass array of current selection.
diff --git a/lib/ui/layers/filters.mjs b/lib/ui/layers/filters.mjs
index d32de5b12..388496f9f 100644
--- a/lib/ui/layers/filters.mjs
+++ b/lib/ui/layers/filters.mjs
@@ -182,10 +182,13 @@ async function filter_in(layer, filter) {
 
   if (filter.dropdown) {
 
+    // Encode values for dropdown.
+    const encoded = filter[filter.type].map(val => encodeURIComponent(val));
+
     return mapp.ui.elements.dropdown({
       multi: true,
       placeholder: 'Select Multiple',
-      entries: filter[filter.type].map(val => ({
+      entries: encoded.map(val => ({
         title: decodeURIComponent(val),
         option: encodeURIComponent(val),
         selected: chkSet.has(val)