bugfix: dropdown search was ignoring whitespace

frontend/code/components/dropdown.ts

@@ -334,7 +334,7 @@ export class DropdownComponent extends ComponentBase {
         needleLower: string
     ): HTMLElement | null {
         // Special case: Empty needle matches everything, and would cause a hang
-        // in the while loop below
+        // in the `while` loop below
         if (needleLower.length === 0) {
             const container = document.createElement('div');
             container.textContent = haystack;
@@ -433,9 +433,15 @@ export class DropdownComponent extends ComponentBase {
             this._highlightOption(element.firstElementChild as HTMLElement);
         }
 
-        // Resize the element
+        // Display an icon and resize the element
+        //
+        // For some reason the SVG has an explicit opacity set. Because of that,
+        // using CSS isn't possible. Overwrite the opacity here.
         if (element.children.length === 0) {
-            applyIcon(element, 'material/error');
+            applyIcon(element, 'material/error').then(() => {
+                (element.firstElementChild as SVGElement).style.opacity = '0.2';
+            });
+
             this.popupElement.style.height = '7rem';
         } else {
             this.popupElement.style.height = `${element.scrollHeight}px`;

frontend/css/style.scss

@@ -993,7 +993,7 @@ $rio-input-box-small-label-spacing-top: 0.5rem;
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    white-space: nowrap;
+    white-space: pre;
     cursor: pointer;
 }
 
@@ -1008,8 +1008,6 @@ $rio-input-box-small-label-spacing-top: 0.5rem;
     height: 4rem;
 
     margin: 1.5rem auto;
-
-    opacity: 0.2;
 }
 
 .rio-dropdown-option {