Merge branch 'dev' of https://github.com/umami-software/umami into dev

src/app/(main)/reports/[reportId]/FieldFilterForm.module.css

@@ -1,9 +1,12 @@
-.selected {
-  font-weight: bold;
-}
-
 .popup {
   display: flex;
+  max-width: 300px;
+  max-height: 400px;
+  overflow-x: hidden;
+}
+
+.popup > div {
+  overflow-y: auto;
 }
 
 .filter {
@@ -17,6 +20,5 @@
 }
 
 .menu {
-  min-width: 360px;
-  max-height: 300px;
+  min-width: 200px;
 }

src/app/(main)/reports/[reportId]/FieldFilterForm.tsx

@@ -27,6 +27,7 @@ export default function FieldFilterForm({
   const { formatValue } = useFormat();
   const { locale } = useLocale();
   const filters = getFilters(type);
+  const [search, setSearch] = useState('');
 
   const formattedValues = useMemo(() => {
     const formatted = {};
@@ -43,6 +44,10 @@ export default function FieldFilterForm({
     return formatted;
   }, [formatValue, locale, name, values]);
 
+  const filteredValues = useMemo(() => {
+    return search ? values.filter(n => n.includes(search)) : values;
+  }, [search, formattedValues]);
+
   const renderFilterValue = value => {
     return filters.find(f => f.value === value)?.label;
   };
@@ -74,14 +79,14 @@ export default function FieldFilterForm({
           )}
           <Dropdown
             className={styles.dropdown}
+            popupProps={{ className: styles.popup }}
             menuProps={{ className: styles.menu }}
-            items={values}
+            items={filteredValues}
             value={value}
             renderValue={renderValue}
             onChange={(key: any) => setValue(key)}
-            style={{
-              minWidth: '250px',
-            }}
+            allowSearch={true}
+            onSearch={setSearch}
           >
             {(value: string) => {
               return <Item key={value}>{formattedValues[value]}</Item>;