From 60b590e04eb8a518c5ca2d8d04285318a12a4b57 Mon Sep 17 00:00:00 2001
From: alten-dturus <davide.turus@alten.it>
Date: Tue, 23 Dec 2025 10:01:54 +0100
Subject: [PATCH 01/20] Update ActiveFiltersChips with hasSubmitButton prop

---
 src/features/filters/components/ActiveFiltersChips.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/features/filters/components/ActiveFiltersChips.tsx b/src/features/filters/components/ActiveFiltersChips.tsx
index 5d0bd25..9d5a8b3 100644
--- a/src/features/filters/components/ActiveFiltersChips.tsx
+++ b/src/features/filters/components/ActiveFiltersChips.tsx
@@ -1,12 +1,13 @@
 import React from 'react'
 import { Button, Chip, Divider, Stack } from '@mui/material'
-import type { ActiveFilters, FiltersHandler } from '../filters.types'
+import type { ActiveFilters, FilterHandler } from '../filters.types'
 import { getLocalizedValue } from '../../../utils/common.utils'
 
 type ActiveFilterChips = {
   activeFilters: ActiveFilters
-  onRemoveActiveFilter: FiltersHandler
+  onRemoveActiveFilter: FilterHandler
   onResetActiveFilters: VoidFunction
+  hasSubmitButton?: boolean
   rightContent?: React.ReactNode
 }
 
@@ -14,6 +15,7 @@ export const ActiveFilterChips: React.FC<ActiveFilterChips> = ({
   activeFilters,
   onRemoveActiveFilter,
   onResetActiveFilters,
+  hasSubmitButton,
   rightContent,
 }) => {
   if (activeFilters.length <= 0 && !rightContent) return null
@@ -36,12 +38,12 @@ export const ActiveFilterChips: React.FC<ActiveFilterChips> = ({
         <Stack direction="row" flexWrap="wrap" gap={1} alignItems="center" sx={{ width: '100%' }}>
           {activeFilters.map(({ value, label, type, filterKey }) => (
             <Chip
-              key={value}
+              key={filterKey + value}
               label={label}
               onDelete={onRemoveActiveFilter.bind(null, type, filterKey, value)}
             />
           ))}
-          {activeFilters.length > 1 && (
+          {!hasSubmitButton && activeFilters.length > 1 && (
             <Stack justifyContent="center">
               <Button
                 sx={{ ml: 2 }}

From 1b1609a984e0926f5d9bfece20b124f90999ea1b Mon Sep 17 00:00:00 2001
From: alten-dturus <davide.turus@alten.it>
Date: Tue, 23 Dec 2025 16:41:53 +0100
Subject: [PATCH 02/20] Update filters.type

---
 src/features/filters/filters.types.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/features/filters/filters.types.ts b/src/features/filters/filters.types.ts
index b13e0be..8b087a1 100644
--- a/src/features/filters/filters.types.ts
+++ b/src/features/filters/filters.types.ts
@@ -12,9 +12,10 @@ export type FiltersParams = Record<string, string | string[] | boolean>
 export type FiltersHandlers = {
   fields: FilterFields
   activeFilters: ActiveFilters
-  onChangeActiveFilter: FiltersHandler
-  onRemoveActiveFilter: FiltersHandler
+  onChangeActiveFilter: FilterHandler
+  onRemoveActiveFilter: FilterHandler
   onResetActiveFilters: VoidFunction
+  onSetActiveFilters: FiltersHandler
 }
 
 type FilterFieldCommon<TName extends string = string> = {
@@ -82,16 +83,19 @@ export type FilterField<TName extends string = string> =
 export type FilterFieldCommonProps = {
   field: FilterField
   value: FilterFieldValue
-  onChangeActiveFilter: FiltersHandler
+  onChangeActiveFilter: FilterHandler
   onFieldsValuesChange: (name: string, value: FilterFieldValue) => void
+  hasSubmitButton?: boolean
 }
 
 export type FilterFields<TName extends string = string> = FilterField<TName>[]
 
 export type FilterOption = { label: string; value: string }
 
-export type FiltersHandler = (
+export type FilterHandler = (
   type: FilterFieldType,
   filterKey: string,
   value: FilterFieldValue
 ) => void
+
+export type FiltersHandler = (fields: FilterFields, fieldsValues: FilterFieldsValues) => void

From 3be362a1e6dcee84496d391cd5c35474b13d8d60 Mon Sep 17 00:00:00 2001
From: alten-dturus <davide.turus@alten.it>
Date: Tue, 23 Dec 2025 16:42:37 +0100
Subject: [PATCH 03/20] Update filter.utils

---
 src/features/filters/filters.utils.ts | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/features/filters/filters.utils.ts b/src/features/filters/filters.utils.ts
index 855c930..8307b40 100644
--- a/src/features/filters/filters.utils.ts
+++ b/src/features/filters/filters.utils.ts
@@ -8,13 +8,17 @@ import type {
 } from './filters.types'
 
 /** Map passed fields options to the field state default value */
-export function getFiltersFieldsDefaultValue(fields: FilterFields): FilterFieldsValues {
+export function getFiltersFieldsDefaultValue(
+  fields: FilterFields,
+  hasSubmitButton?: boolean
+): FilterFieldsValues {
   return fields.reduce((prev, field) => {
     if (field.type === 'autocomplete-multiple') {
       return { ...prev, [field.name]: [] }
     }
     if (field.type === 'autocomplete-single') {
-      // autocomplete single has no need to be in the fields state
+      if (hasSubmitButton) return { ...prev, [field.name]: null }
+      // autocomplete single has no need to be in the fields state when no submit button
       return prev
     }
     if (field.type === 'datepicker') {
@@ -32,7 +36,9 @@ export function getFiltersFieldsDefaultValue(fields: FilterFields): FilterFields
  */
 export const getFiltersFieldsInitialValues = (
   searchParams: URLSearchParams,
-  filtersFields: FilterFields
+  filtersFields: FilterFields,
+  hasSubmitButton?: boolean
+  // TODO inserire il parametro hasSubmitButton e nel caso ci sia popolare i valori iniziali dai search params e poi ricontrollare tutto
 ) => {
   const fieldsValues: FilterFieldsValues = {}
   filtersFields.forEach((field) => {
@@ -46,7 +52,15 @@ export const getFiltersFieldsInitialValues = (
         fieldsValues[field.name] = []
         break
       case 'autocomplete-single':
-        // autocomplete single has no need to be in the fields state
+        // autocomplete single has no need to be in the fields state when no submit button
+        if (hasSubmitButton) {
+          const singleFilterParamValue = searchParams.get(field.name)
+          if (singleFilterParamValue) {
+            fieldsValues[field.name] = decodeSingleFilterFieldValue(singleFilterParamValue)
+            return
+          }
+          fieldsValues[field.name] = null
+        }
         break
       case 'freetext':
       case 'numeric':

From ea0d711e340f30cbf844c7128e9e6f2235b996e6 Mon Sep 17 00:00:00 2001
From: alten-dturus <davide.turus@alten.it>
Date: Tue, 23 Dec 2025 16:43:38 +0100
Subject: [PATCH 04/20] Added onSetActiveFilters function to useFilters

---
 src/features/filters/hooks/useFilters.ts | 69 ++++++++++++++++++++++--
 1 file changed, 66 insertions(+), 3 deletions(-)

diff --git a/src/features/filters/hooks/useFilters.ts b/src/features/filters/hooks/useFilters.ts
index 5bdee0f..f34eb68 100644
--- a/src/features/filters/hooks/useFilters.ts
+++ b/src/features/filters/hooks/useFilters.ts
@@ -2,9 +2,10 @@ import React from 'react'
 import type {
   FilterFields,
   FilterOption,
-  FiltersHandler,
+  FilterHandler,
   FiltersHandlers,
   FiltersParams,
+  FiltersHandler,
 } from '../filters.types'
 import { useSearchParams } from 'react-router-dom'
 import {
@@ -67,7 +68,7 @@ export function useFilters<TFiltersParams extends FiltersParams>(
 ): FiltersHandlers & { filtersParams: TFiltersParams } {
   const [searchParams, setSearchParams] = useSearchParams()
 
-  const onChangeActiveFilter = React.useCallback<FiltersHandler>(
+  const onChangeActiveFilter = React.useCallback<FilterHandler>(
     (type, filterKey, value) => {
       setSearchParams((searchParams) => {
         let shouldBeRemoved = false
@@ -111,7 +112,68 @@ export function useFilters<TFiltersParams extends FiltersParams>(
     [setSearchParams]
   )
 
-  const onRemoveActiveFilter = React.useCallback<FiltersHandler>(
+  const onSetActiveFilters = React.useCallback<FiltersHandler>(
+    (fields, fieldsValues) => {
+      // fields.forEach((field) => {
+      //   onChangeActiveFilter(field.type, field.name, fieldsValues[field.name])
+      // })
+      setSearchParams((searchParams) => {
+        console.log('Setting active filters...', searchParams.toString())
+        console.log('Fields values:', fieldsValues)
+        fields.forEach((field) => {
+          const value = fieldsValues[field.name]
+          const type = field.type
+          const filterKey = field.name
+          console.log('data', filterKey, type, value)
+          let shouldBeRemoved = false
+          if ((type === 'datepicker' || type === 'autocomplete-single') && value === null) {
+            shouldBeRemoved = true
+          }
+          if (
+            ['freetext', 'autocomplete-multiple', 'numeric'].includes(type) &&
+            (value as string | Array<FilterOption>).length === 0
+          ) {
+            shouldBeRemoved = true
+          }
+          if (shouldBeRemoved) {
+            searchParams.delete(filterKey)
+          }
+
+          if (!shouldBeRemoved) {
+            console.log('Setting param:', shouldBeRemoved, filterKey, value)
+            switch (type) {
+              case 'numeric':
+              case 'freetext':
+                searchParams.set(filterKey, String(value))
+                break
+              case 'autocomplete-multiple':
+                const urlParamMultipleFilterValue = encodeMultipleFilterFieldValue(
+                  value as Array<FilterOption>
+                )
+                searchParams.set(filterKey, urlParamMultipleFilterValue)
+                break
+              case 'autocomplete-single':
+                const urlParamSingleFilterValue = encodeSingleFilterFieldValue(
+                  value as FilterOption
+                )
+                searchParams.set(filterKey, urlParamSingleFilterValue)
+                break
+              case 'datepicker':
+                searchParams.set(filterKey, (value as Date).toISOString())
+                break
+            }
+            searchParams.delete('offset')
+            console.log('Updated search params:', searchParams.toString())
+          }
+        })
+        console.log('Final search params after setting active filters:', searchParams.toString())
+        return searchParams
+      })
+    },
+    [setSearchParams]
+  )
+
+  const onRemoveActiveFilter = React.useCallback<FilterHandler>(
     (type, filterKey, value) => {
       setSearchParams((searchParams) => {
         switch (type) {
@@ -167,5 +229,6 @@ export function useFilters<TFiltersParams extends FiltersParams>(
     onResetActiveFilters,
     onChangeActiveFilter,
     onRemoveActiveFilter,
+    onSetActiveFilters,
   }
 }

From bcb466e562c07bd0bb483136922c40d23ea5801a Mon Sep 17 00:00:00 2001
From: alten-dturus <davide.turus@alten.it>
Date: Tue, 23 Dec 2025 16:44:39 +0100
Subject: [PATCH 05/20] Update Filters adding hasSubmitButton prop

---
 src/features/filters/components/Filters.tsx | 23 ++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/features/filters/components/Filters.tsx b/src/features/filters/components/Filters.tsx
index 795076d..e347beb 100644
--- a/src/features/filters/components/Filters.tsx
+++ b/src/features/filters/components/Filters.tsx
@@ -4,7 +4,7 @@ import { ActiveFilterChips } from './ActiveFiltersChips'
 import { FiltersFields } from './FiltersFields'
 import type {
   FilterOption,
-  FiltersHandler,
+  FilterHandler,
   FiltersHandlers,
   FilterFieldValue,
   FilterFieldsValues,
@@ -12,7 +12,10 @@ import type {
 import { getFiltersFieldsInitialValues, getFiltersFieldsDefaultValue } from '../filters.utils'
 import { useSearchParams } from 'react-router-dom'
 
-export type FiltersProps = FiltersHandlers & { rightContent?: React.ReactNode }
+export type FiltersProps = FiltersHandlers & {
+  hasSubmitButton?: boolean
+  rightContent?: React.ReactNode
+}
 
 /**
  * Takes the filters handlers returned from the useFilters hook and renders the filters fields and the active filters chips.
@@ -22,19 +25,21 @@ export const Filters: React.FC<FiltersProps> = ({
   onChangeActiveFilter,
   onRemoveActiveFilter,
   onResetActiveFilters,
+  onSetActiveFilters,
   fields,
+  hasSubmitButton,
   rightContent,
 }) => {
   const [searchParams] = useSearchParams()
   const [fieldsValues, setFieldsValues] = React.useState<FilterFieldsValues>(() =>
-    getFiltersFieldsInitialValues(searchParams, fields)
+    getFiltersFieldsInitialValues(searchParams, fields, hasSubmitButton)
   )
 
   const handleFieldsValuesChange = React.useCallback((name: string, value: FilterFieldValue) => {
     setFieldsValues((prev) => ({ ...prev, [name]: value }))
   }, [])
 
-  const handleRemoveActiveFilter: FiltersHandler = (type, filterKey, value) => {
+  const handleRemoveActiveFilter: FilterHandler = (type, filterKey, value) => {
     if (type === 'autocomplete-multiple') {
       const fieldValue = fieldsValues[filterKey] as Array<FilterOption>
       handleFieldsValuesChange(
@@ -46,10 +51,14 @@ export const Filters: React.FC<FiltersProps> = ({
   }
 
   const handleResetActiveFilters = () => {
-    setFieldsValues(getFiltersFieldsDefaultValue(fields))
+    setFieldsValues(getFiltersFieldsDefaultValue(fields, hasSubmitButton))
     onResetActiveFilters()
   }
 
+  const onSubmit = () => {
+    onSetActiveFilters(fields, fieldsValues)
+  }
+
   return (
     <Stack direction="column" spacing={2} justifyContent="space-between" sx={{ mb: 4 }}>
       <FiltersFields
@@ -57,11 +66,15 @@ export const Filters: React.FC<FiltersProps> = ({
         fieldsValues={fieldsValues}
         onFieldsValuesChange={handleFieldsValuesChange}
         onChangeActiveFilter={onChangeActiveFilter}
+        onResetActiveFilters={handleResetActiveFilters}
+        onSubmit={onSubmit}
+        hasSubmitButton={hasSubmitButton}
       />
       <ActiveFilterChips
         activeFilters={activeFilters}
         onRemoveActiveFilter={handleRemoveActiveFilter}
         onResetActiveFilters={handleResetActiveFilters}
+        hasSubmitButton={hasSubmitButton}
         rightContent={rightContent}
       />
     </Stack>

From 7188f4a798b5852d601fc8247f3dfc32994f819b Mon Sep 17 00:00:00 2001
From: alten-dturus <davide.turus@alten.it>
Date: Tue, 23 Dec 2025 16:46:29 +0100
Subject: [PATCH 06/20] Update FiltersFields adding hasSubmitButton prop and
 submit and reset buttons

---
 .../filters/components/FiltersFields.tsx      | 39 +++++++++++++++++--
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/features/filters/components/FiltersFields.tsx b/src/features/filters/components/FiltersFields.tsx
index 80a232a..0730c42 100644
--- a/src/features/filters/components/FiltersFields.tsx
+++ b/src/features/filters/components/FiltersFields.tsx
@@ -1,22 +1,26 @@
 import React from 'react'
-import { Grid } from '@mui/material'
+import { Button, Grid } from '@mui/material'
 import type {
   FilterFieldValue,
   FilterFieldsValues,
   FilterFields,
-  FiltersHandler,
+  FilterHandler,
 } from '../filters.types'
 import { AutocompleteMultipleFilterField } from './AutocompleteMultipleFilterField'
 import { AutocompleteSingleFilterField } from './AutocompleteSingleFilterField'
 import { DatepickerFilterField } from './DatepickerFilterField'
 import { NumericFilterField } from './NumericFilterField'
 import { FreetextFilterField } from './FreetextFilterField'
+import { getLocalizedValue } from '@/utils/common.utils'
 
 type FiltersFieldsProps = {
   fields: FilterFields
-  onChangeActiveFilter: FiltersHandler
+  onChangeActiveFilter: FilterHandler
   fieldsValues: FilterFieldsValues
   onFieldsValuesChange: (name: string, value: FilterFieldValue) => void
+  onResetActiveFilters: VoidFunction
+  onSubmit: VoidFunction
+  hasSubmitButton?: boolean
 }
 
 export const FiltersFields: React.FC<FiltersFieldsProps> = ({
@@ -24,7 +28,19 @@ export const FiltersFields: React.FC<FiltersFieldsProps> = ({
   fieldsValues,
   onFieldsValuesChange,
   onChangeActiveFilter,
+  onResetActiveFilters,
+  onSubmit,
+  hasSubmitButton,
 }) => {
+  const cancelFiltersLabel = getLocalizedValue({
+    it: 'Annulla filtri',
+    en: 'Cancel filters',
+  })
+
+  const submitFiltersLabel = getLocalizedValue({
+    it: 'Filtra',
+    en: 'Filter',
+  })
   return (
     <Grid container spacing={2}>
       {fields.map((field) => {
@@ -33,6 +49,7 @@ export const FiltersFields: React.FC<FiltersFieldsProps> = ({
           value: fieldsValues[field.name],
           onChangeActiveFilter,
           onFieldsValuesChange,
+          hasSubmitButton,
         }
         return (
           <Grid item xs={3} key={field.name}>
@@ -48,6 +65,22 @@ export const FiltersFields: React.FC<FiltersFieldsProps> = ({
           </Grid>
         )
       })}
+      {hasSubmitButton && (
+        <Grid item xs={3} alignContent="center">
+          <Button size="small" type="button" variant="outlined" onClick={onSubmit}>
+            {submitFiltersLabel}
+          </Button>
+          <Button
+            sx={{ ml: 2 }}
+            size="small"
+            type="button"
+            variant="naked"
+            onClick={onResetActiveFilters}
+          >
+            {cancelFiltersLabel}
+          </Button>
+        </Grid>
+      )}
     </Grid>
   )
 }

From 3715ef15ef72bedd5240f1206a2ffd4474193ef8 Mon Sep 17 00:00:00 2001
From: alten-dturus <davide.turus@alten.it>
Date: Thu, 8 Jan 2026 18:12:31 +0100
Subject: [PATCH 07/20] Update DatePickerFilterField, FreetextFilterField and
 NumericFilterField adding hasSubmitButton prop

---
 .../components/DatepickerFilterField.tsx      | 22 ++++++++++++-------
 .../components/FreetextFilterField.tsx        |  5 +++--
 .../filters/components/NumericFilterField.tsx |  5 +++--
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/features/filters/components/DatepickerFilterField.tsx b/src/features/filters/components/DatepickerFilterField.tsx
index 3f45ad2..6428564 100644
--- a/src/features/filters/components/DatepickerFilterField.tsx
+++ b/src/features/filters/components/DatepickerFilterField.tsx
@@ -15,6 +15,7 @@ export const DatepickerFilterField: React.FC<FilterFieldCommonProps> = ({
   value,
   onChangeActiveFilter,
   onFieldsValuesChange,
+  hasSubmitButton,
 }) => {
   const field = _field as DatepickerFilterFieldOptions
   const filterKey = field.name
@@ -54,18 +55,23 @@ export const DatepickerFilterField: React.FC<FilterFieldCommonProps> = ({
           inputAdornment: (inputAdornmentProps) => (
             <>
               <InputAdornment {...inputAdornmentProps} />
-              <IconButton
-                onClick={enableDatepickerFilter}
-                disabled={!value}
-                sx={{ mr: -1.5, ml: 1 }}
-              >
-                <SearchIcon aria-label={searchIconAriaLabel} />
-              </IconButton>
+              {!hasSubmitButton && (
+                <IconButton
+                  onClick={enableDatepickerFilter}
+                  disabled={!value}
+                  sx={{ mr: -1.5, ml: 1 }}
+                >
+                  <SearchIcon aria-label={searchIconAriaLabel} />
+                </IconButton>
+              )}
             </>
           ),
         }}
         slotProps={{
-          textField: { size: 'small', onKeyDown: handleDatepickerKeyDown },
+          textField: {
+            size: 'small',
+            onKeyDown: hasSubmitButton ? undefined : handleDatepickerKeyDown,
+          },
         }}
       />
     </LocalizationProvider>
diff --git a/src/features/filters/components/FreetextFilterField.tsx b/src/features/filters/components/FreetextFilterField.tsx
index dfb57ec..5a8789a 100644
--- a/src/features/filters/components/FreetextFilterField.tsx
+++ b/src/features/filters/components/FreetextFilterField.tsx
@@ -9,6 +9,7 @@ export const FreetextFilterField: React.FC<FilterFieldCommonProps> = ({
   value,
   onChangeActiveFilter,
   onFieldsValuesChange,
+  hasSubmitButton,
 }) => {
   const searchIconAriaLabel = getLocalizedValue({ it: 'Filtra', en: 'Filter' })
   const filterKey = field.name
@@ -40,9 +41,9 @@ export const FreetextFilterField: React.FC<FilterFieldCommonProps> = ({
       name={field.name}
       value={value}
       onChange={handleFieldValueChange}
-      onKeyDown={handleKeyDown}
+      onKeyDown={hasSubmitButton ? undefined : handleKeyDown}
       InputProps={{
-        endAdornment: (
+        endAdornment: hasSubmitButton ? undefined : (
           <IconButton disabled={!value} sx={{ mx: -1.5 }} onClick={handleEnableFreetextFilter}>
             <SearchIcon aria-label={searchIconAriaLabel} />
           </IconButton>
diff --git a/src/features/filters/components/NumericFilterField.tsx b/src/features/filters/components/NumericFilterField.tsx
index 1b7dc14..a54a186 100644
--- a/src/features/filters/components/NumericFilterField.tsx
+++ b/src/features/filters/components/NumericFilterField.tsx
@@ -9,6 +9,7 @@ export const NumericFilterField: React.FC<FilterFieldCommonProps> = ({
   value,
   onChangeActiveFilter,
   onFieldsValuesChange,
+  hasSubmitButton,
 }) => {
   const field = _field as NumericFilterFieldOptions
   const searchIconAriaLabel = getLocalizedValue({ it: 'Filtra', en: 'Filter' })
@@ -61,7 +62,7 @@ export const NumericFilterField: React.FC<FilterFieldCommonProps> = ({
       name={field.name}
       value={value}
       onChange={handleTextFieldChange}
-      onKeyDown={handleKeyDown}
+      onKeyDown={hasSubmitButton ? undefined : handleKeyDown}
       onBlur={handleBlur}
       InputProps={{
         inputProps: {
@@ -69,7 +70,7 @@ export const NumericFilterField: React.FC<FilterFieldCommonProps> = ({
           max: field.max,
           style: { paddingRight: 20 },
         },
-        endAdornment: (
+        endAdornment: hasSubmitButton ? undefined : (
           <IconButton disabled={!value} sx={{ mx: -1.5 }} onClick={handleEnableNumericFilter}>
             <SearchIcon aria-label={searchIconAriaLabel} />
           </IconButton>

From d74934448ccc403ca256a894a8997a326ea3fc72 Mon Sep 17 00:00:00 2001
From: alten-dturus <davide.turus@alten.it>
Date: Thu, 8 Jan 2026 18:13:39 +0100
Subject: [PATCH 08/20] Update AutocompleteMultipleFilterField and
 AutocompleteSingleFilterField adding hasSubmitButton prop

---
 .../components/AutocompleteMultipleFilterField.tsx  | 13 ++++++++-----
 .../components/AutocompleteSingleFilterField.tsx    |  8 ++++++--
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/features/filters/components/AutocompleteMultipleFilterField.tsx b/src/features/filters/components/AutocompleteMultipleFilterField.tsx
index 2eb79ad..a847706 100644
--- a/src/features/filters/components/AutocompleteMultipleFilterField.tsx
+++ b/src/features/filters/components/AutocompleteMultipleFilterField.tsx
@@ -13,6 +13,7 @@ export const AutocompleteMultipleFilterField: React.FC<FilterFieldCommonProps> =
   value,
   onChangeActiveFilter,
   onFieldsValuesChange,
+  hasSubmitButton,
 }) => {
   const field = _field as AutocompleteFilterFieldOptions
   const filterKey = field.name
@@ -21,11 +22,13 @@ export const AutocompleteMultipleFilterField: React.FC<FilterFieldCommonProps> =
 
   const handleAutocompleteMultipleChange = (data: FilterFieldsValues['string']) => {
     onFieldsValuesChange(filterKey, data)
-    clearTimeout(debounceRef.current)
-    debounceRef.current = setTimeout(
-      () => onChangeActiveFilter('autocomplete-multiple', filterKey, data),
-      300
-    )
+    if (!hasSubmitButton) {
+      clearTimeout(debounceRef.current)
+      debounceRef.current = setTimeout(
+        () => onChangeActiveFilter('autocomplete-multiple', filterKey, data),
+        300
+      )
+    }
   }
 
   return (
diff --git a/src/features/filters/components/AutocompleteSingleFilterField.tsx b/src/features/filters/components/AutocompleteSingleFilterField.tsx
index ade42d4..2f7ee92 100644
--- a/src/features/filters/components/AutocompleteSingleFilterField.tsx
+++ b/src/features/filters/components/AutocompleteSingleFilterField.tsx
@@ -9,20 +9,24 @@ import { AutocompleteBaseFilterField } from './AutocompleteBaseFilterField'
 
 export const AutocompleteSingleFilterField: React.FC<FilterFieldCommonProps> = ({
   field: _field,
+  value,
   onChangeActiveFilter,
+  onFieldsValuesChange,
+  hasSubmitButton,
 }) => {
   const field = _field as AutocompleteFilterFieldOptions
   const filterKey = field.name
 
   const handleAutocompleteSingleChange = (data: FilterFieldsValues['string']) => {
-    onChangeActiveFilter('autocomplete-single', filterKey, data)
+    onFieldsValuesChange(filterKey, data)
+    if (!hasSubmitButton) onChangeActiveFilter('autocomplete-single', filterKey, data)
   }
 
   return (
     <AutocompleteBaseFilterField<false>
       label={field.label}
       blurOnSelect
-      value={null as unknown as FilterOption}
+      value={value as FilterOption}
       options={field.options}
       onInputChange={field?.onTextInputChange}
       onChange={(_, data) => {

From 7573fdf137d9fe0ddd077cfdc8d9bcdac2cf7ced Mon Sep 17 00:00:00 2001
From: alten-dturus <davide.turus@alten.it>
Date: Thu, 8 Jan 2026 18:15:07 +0100
Subject: [PATCH 09/20] Add new width prop to fields and the disable button
 check to FilterFields

---
 .../filters/components/FiltersFields.tsx      | 21 +++++++++++++++++--
 src/features/filters/filters.types.ts         |  4 ++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/features/filters/components/FiltersFields.tsx b/src/features/filters/components/FiltersFields.tsx
index 0730c42..8f82051 100644
--- a/src/features/filters/components/FiltersFields.tsx
+++ b/src/features/filters/components/FiltersFields.tsx
@@ -13,6 +13,11 @@ import { NumericFilterField } from './NumericFilterField'
 import { FreetextFilterField } from './FreetextFilterField'
 import { getLocalizedValue } from '@/utils/common.utils'
 
+/**
+ * The default width of the filter field in a 12-column grid system.
+ */
+const filterFieldDefaultWidth = 3
+
 type FiltersFieldsProps = {
   fields: FilterFields
   onChangeActiveFilter: FilterHandler
@@ -41,6 +46,11 @@ export const FiltersFields: React.FC<FiltersFieldsProps> = ({
     it: 'Filtra',
     en: 'Filter',
   })
+
+  const buttonDisabled = Object.entries(fieldsValues).every(
+    ([_, value]) => value === null || value === '' || (Array.isArray(value) && value.length === 0)
+  )
+
   return (
     <Grid container spacing={2}>
       {fields.map((field) => {
@@ -52,7 +62,7 @@ export const FiltersFields: React.FC<FiltersFieldsProps> = ({
           hasSubmitButton,
         }
         return (
-          <Grid item xs={3} key={field.name}>
+          <Grid item xs={field.width ?? filterFieldDefaultWidth} key={field.name}>
             {field.type === 'freetext' && <FreetextFilterField {...fieldProps} />}
             {field.type === 'numeric' && <NumericFilterField {...fieldProps} />}
             {field.type === 'autocomplete-multiple' && (
@@ -67,7 +77,13 @@ export const FiltersFields: React.FC<FiltersFieldsProps> = ({
       })}
       {hasSubmitButton && (
         <Grid item xs={3} alignContent="center">
-          <Button size="small" type="button" variant="outlined" onClick={onSubmit}>
+          <Button
+            size="small"
+            type="button"
+            variant="outlined"
+            onClick={onSubmit}
+            disabled={buttonDisabled}
+          >
             {submitFiltersLabel}
           </Button>
           <Button
@@ -76,6 +92,7 @@ export const FiltersFields: React.FC<FiltersFieldsProps> = ({
             type="button"
             variant="naked"
             onClick={onResetActiveFilters}
+            disabled={buttonDisabled}
           >
             {cancelFiltersLabel}
           </Button>
diff --git a/src/features/filters/filters.types.ts b/src/features/filters/filters.types.ts
index 8b087a1..1f34f84 100644
--- a/src/features/filters/filters.types.ts
+++ b/src/features/filters/filters.types.ts
@@ -28,6 +28,10 @@ type FilterFieldCommon<TName extends string = string> = {
    * The label of the filter field.
    */
   label: string
+  /**
+   * The width of the filter field in a 12-column grid system.
+   */
+  width?: number
 }
 
 export type FreetextFilterFieldOptions<TName extends string = string> = FilterFieldCommon<TName> & {

From 937676cf7a03fa6502d5862307ff0074ab762e22 Mon Sep 17 00:00:00 2001
From: alten-dturus <davide.turus@alten.it>
Date: Mon, 12 Jan 2026 10:02:12 +0100
Subject: [PATCH 10/20] Add state update on handleRemoveActiveFilter action

---
 src/features/filters/components/Filters.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/features/filters/components/Filters.tsx b/src/features/filters/components/Filters.tsx
index e347beb..2554255 100644
--- a/src/features/filters/components/Filters.tsx
+++ b/src/features/filters/components/Filters.tsx
@@ -46,6 +46,9 @@ export const Filters: React.FC<FiltersProps> = ({
         filterKey,
         fieldValue.filter(({ value: v }) => v !== value)
       )
+    } else {
+      const defaultValues = getFiltersFieldsDefaultValue(fields, hasSubmitButton)
+      handleFieldsValuesChange(filterKey, defaultValues[filterKey])
     }
     onRemoveActiveFilter(type, filterKey, value)
   }

From f8d084e1e4a2ead85d22131da187b4c893b91db4 Mon Sep 17 00:00:00 2001
From: alten-dturus <davide.turus@alten.it>
Date: Mon, 12 Jan 2026 10:02:56 +0100
Subject: [PATCH 11/20] fix test

---
 src/features/filters/__tests__/Filters.test.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/features/filters/__tests__/Filters.test.tsx b/src/features/filters/__tests__/Filters.test.tsx
index 4c9157d..fd9763e 100644
--- a/src/features/filters/__tests__/Filters.test.tsx
+++ b/src/features/filters/__tests__/Filters.test.tsx
@@ -58,6 +58,7 @@ describe('Filters component', () => {
           <Filters
             fields={fieldMocks}
             activeFilters={[]}
+            onSetActiveFilters={vi.fn()}
             onChangeActiveFilter={vi.fn()}
             onRemoveActiveFilter={vi.fn()}
             onResetActiveFilters={vi.fn()}
@@ -75,6 +76,7 @@ describe('Filters component', () => {
           <Filters
             fields={fieldMocks}
             activeFilters={[activeFiltersMocks[0]]}
+            onSetActiveFilters={vi.fn()}
             onChangeActiveFilter={vi.fn()}
             onRemoveActiveFilter={vi.fn()}
             onResetActiveFilters={vi.fn()}
@@ -92,6 +94,7 @@ describe('Filters component', () => {
           <Filters
             fields={fieldMocks}
             activeFilters={activeFiltersMocks}
+            onSetActiveFilters={vi.fn()}
             onChangeActiveFilter={vi.fn()}
             onRemoveActiveFilter={vi.fn()}
             onResetActiveFilters={vi.fn()}
@@ -109,6 +112,7 @@ describe('Filters component', () => {
           <Filters
             fields={fieldMocks}
             activeFilters={[activeFiltersMocks[0]]}
+            onSetActiveFilters={vi.fn()}
             onChangeActiveFilter={vi.fn()}
             onRemoveActiveFilter={vi.fn()}
             onResetActiveFilters={vi.fn()}
@@ -127,6 +131,7 @@ describe('Filters component', () => {
           <Filters
             fields={fieldMocks}
             activeFilters={activeFiltersMocks}
+            onSetActiveFilters={vi.fn()}
             onChangeActiveFilter={vi.fn()}
             onRemoveActiveFilter={vi.fn()}
             onResetActiveFilters={vi.fn()}
@@ -145,6 +150,7 @@ describe('Filters component', () => {
       <Filters
         fields={fieldMocks}
         activeFilters={[]}
+        onSetActiveFilters={vi.fn()}
         onChangeActiveFilter={onChangeActiveFilterFn}
         onRemoveActiveFilter={vi.fn()}
         onResetActiveFilters={vi.fn()}
@@ -167,6 +173,7 @@ describe('Filters component', () => {
       <Filters
         fields={fieldMocks}
         activeFilters={[]}
+        onSetActiveFilters={vi.fn()}
         onChangeActiveFilter={onChangeActiveFilterFn}
         onRemoveActiveFilter={vi.fn()}
         onResetActiveFilters={vi.fn()}
@@ -200,6 +207,7 @@ describe('Filters component', () => {
       <Filters
         fields={fieldMocks}
         activeFilters={activeFiltersMocks}
+        onSetActiveFilters={vi.fn()}
         onChangeActiveFilter={vi.fn()}
         onRemoveActiveFilter={onRemoveActiveFilterFn}
         onResetActiveFilters={vi.fn()}
@@ -223,6 +231,7 @@ describe('Filters component', () => {
       <Filters
         fields={fieldMocks}
         activeFilters={activeFiltersMocks}
+        onSetActiveFilters={vi.fn()}
         onChangeActiveFilter={vi.fn()}
         onRemoveActiveFilter={vi.fn()}
         onResetActiveFilters={onResetActiveFilters}

From 37e77c3de7790d00e0d50def61c5ba65ea5d6651 Mon Sep 17 00:00:00 2001
From: alten-dturus <davide.turus@alten.it>
Date: Mon, 12 Jan 2026 15:41:29 +0100
Subject: [PATCH 12/20] Update AutocompleteBaseFilterField adding
 hasSubmitButton prop and label management

---
 .../AutocompleteBaseFilterField.tsx           | 41 ++++++++++++++++++-
 .../AutocompleteMultipleFilterField.tsx       |  1 +
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/features/filters/components/AutocompleteBaseFilterField.tsx b/src/features/filters/components/AutocompleteBaseFilterField.tsx
index dfb6ce2..a90ee71 100644
--- a/src/features/filters/components/AutocompleteBaseFilterField.tsx
+++ b/src/features/filters/components/AutocompleteBaseFilterField.tsx
@@ -14,7 +14,7 @@ type AutocompleteBaseFilterFieldProps<Multiple extends boolean> = Omit<
   | 'size'
   | 'renderInput'
   | 'onInputChange'
-> & { label: string; onInputChange?: (value: string) => void }
+> & { label: string; onInputChange?: (value: string) => void; hasSubmitButton?: boolean }
 
 export const AutocompleteBaseFilterField = <Multiple extends boolean>(
   props: AutocompleteBaseFilterFieldProps<Multiple>
@@ -24,6 +24,36 @@ export const AutocompleteBaseFilterField = <Multiple extends boolean>(
     en: 'No results',
   })
 
+  function getSelectedElementsLabelText(): { label: string; ariaLabel: string } {
+    let label = props.label
+    let ariaLabel = props.label
+
+    if (props.hasSubmitButton && Array.isArray(props.value) && props.value.length >= 1) {
+      const selectedElements = props.value
+
+      label = getLocalizedValue({
+        it: `${props.label} (${selectedElements.length})`,
+        en: `${props.label} (${selectedElements.length})`,
+      })
+
+      if (props.value.length === 1) {
+        ariaLabel = getLocalizedValue({
+          it: `${props.label} (${selectedElements.length} elemento selezionato)`,
+          en: `${props.label} (${selectedElements.length} element selected)`,
+        })
+      }
+
+      if (props.value.length > 1) {
+        ariaLabel = getLocalizedValue({
+          it: `${props.label} (${selectedElements.length} elementi selezionati)`,
+          en: `${props.label} (${selectedElements.length} elements selected)`,
+        })
+      }
+    }
+
+    return { label, ariaLabel }
+  }
+
   return (
     <Autocomplete<FilterOption, Multiple, true, false>
       {...props}
@@ -46,7 +76,14 @@ export const AutocompleteBaseFilterField = <Multiple extends boolean>(
         props.onChange?.(event, data, reason)
       }}
       renderInput={(params) => {
-        return <TextField variant="outlined" {...params} label={props.label} />
+        return (
+          <TextField
+            variant="outlined"
+            {...params}
+            label={getSelectedElementsLabelText().label}
+            aria-label={getSelectedElementsLabelText().ariaLabel}
+          />
+        )
       }}
     />
   )
diff --git a/src/features/filters/components/AutocompleteMultipleFilterField.tsx b/src/features/filters/components/AutocompleteMultipleFilterField.tsx
index a847706..1d48599 100644
--- a/src/features/filters/components/AutocompleteMultipleFilterField.tsx
+++ b/src/features/filters/components/AutocompleteMultipleFilterField.tsx
@@ -53,6 +53,7 @@ export const AutocompleteMultipleFilterField: React.FC<FilterFieldCommonProps> =
           </li>
         )
       }}
+      hasSubmitButton={hasSubmitButton}
     />
   )
 }

From 756dc623ef447c36668781c94b2415f4f49e8d62 Mon Sep 17 00:00:00 2001
From: alten-dturus <davide.turus@alten.it>
Date: Mon, 12 Jan 2026 17:36:02 +0100
Subject: [PATCH 13/20] Update AutocompleteBaseFilterField aria-label

---
 .../filters/components/AutocompleteBaseFilterField.tsx        | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/features/filters/components/AutocompleteBaseFilterField.tsx b/src/features/filters/components/AutocompleteBaseFilterField.tsx
index a90ee71..8bd7049 100644
--- a/src/features/filters/components/AutocompleteBaseFilterField.tsx
+++ b/src/features/filters/components/AutocompleteBaseFilterField.tsx
@@ -81,7 +81,9 @@ export const AutocompleteBaseFilterField = <Multiple extends boolean>(
             variant="outlined"
             {...params}
             label={getSelectedElementsLabelText().label}
-            aria-label={getSelectedElementsLabelText().ariaLabel}
+            aria-label={
+              props.hasSubmitButton ? getSelectedElementsLabelText().ariaLabel : undefined
+            }
           />
         )
       }}

From 9b37b58477b86ff9756c83c059c4accd846c4e7c Mon Sep 17 00:00:00 2001
From: borgesis95 <salvatore.borgesi@pagopa.it>
Date: Tue, 24 Mar 2026 12:10:27 +0100
Subject: [PATCH 14/20] refactor: added breakpoint, refactor method

---
 .../__snapshots__/Table.test.tsx.snap         |  52 ++--
 .../__snapshots__/Filters.test.tsx.snap       | 274 +++++++++---------
 .../filters/components/ActiveFiltersChips.tsx |  51 ++--
 .../AutocompleteBaseFilterField.tsx           |  40 ++-
 src/features/filters/components/Filters.tsx   |   6 +-
 .../filters/components/FiltersFields.tsx      |   4 +-
 src/features/filters/filters.utils.ts         |   1 -
 src/features/filters/hooks/useFilters.ts      | 144 ++++-----
 .../filters/stories/FiltersExample.tsx        |  16 +-
 .../pagination/__tests__/Pagination.test.tsx  |   6 +-
 10 files changed, 287 insertions(+), 307 deletions(-)

diff --git a/src/components/__tests__/__snapshots__/Table.test.tsx.snap b/src/components/__tests__/__snapshots__/Table.test.tsx.snap
index 439ef2f..819d9d2 100644
--- a/src/components/__tests__/__snapshots__/Table.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Table.test.tsx.snap
@@ -80,7 +80,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
               >
                 <div
-                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
+                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
                 >
                   <span
                     class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -93,7 +93,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                   tabindex="0"
                   type="button"
                 >
@@ -138,7 +138,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
               >
                 <div
-                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
+                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
                 >
                   <span
                     class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -151,7 +151,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                   tabindex="0"
                   type="button"
                 >
@@ -196,7 +196,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
               >
                 <div
-                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
+                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
                 >
                   <span
                     class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -209,7 +209,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                   tabindex="0"
                   type="button"
                 >
@@ -228,7 +228,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
                 colspan="4"
               >
                 <div
-                  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-standardInfo MuiAlert-standard css-1fuz9qr-MuiPaper-root-MuiAlert-root"
+                  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-hu7tqv-MuiPaper-root-MuiAlert-root"
                   role="alert"
                 >
                   <div
@@ -335,7 +335,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
             >
               <div
-                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
+                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
               >
                 <span
                   class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -348,7 +348,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                 tabindex="0"
                 type="button"
               >
@@ -393,7 +393,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
             >
               <div
-                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
+                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
               >
                 <span
                   class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -406,7 +406,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                 tabindex="0"
                 type="button"
               >
@@ -451,7 +451,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
             >
               <div
-                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
+                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
               >
                 <span
                   class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -464,7 +464,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                 tabindex="0"
                 type="button"
               >
@@ -483,7 +483,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
               colspan="4"
             >
               <div
-                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-standardInfo MuiAlert-standard css-1fuz9qr-MuiPaper-root-MuiAlert-root"
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-hu7tqv-MuiPaper-root-MuiAlert-root"
                 role="alert"
               >
                 <div
@@ -647,7 +647,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
               >
                 <div
-                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
+                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
                 >
                   <span
                     class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -660,7 +660,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                   tabindex="0"
                   type="button"
                 >
@@ -705,7 +705,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
               >
                 <div
-                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
+                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
                 >
                   <span
                     class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -718,7 +718,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                   tabindex="0"
                   type="button"
                 >
@@ -763,7 +763,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
               >
                 <div
-                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
+                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
                 >
                   <span
                     class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -776,7 +776,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                   tabindex="0"
                   type="button"
                 >
@@ -868,7 +868,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
             >
               <div
-                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
+                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
               >
                 <span
                   class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -881,7 +881,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                 tabindex="0"
                 type="button"
               >
@@ -926,7 +926,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
             >
               <div
-                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
+                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
               >
                 <span
                   class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -939,7 +939,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                 tabindex="0"
                 type="button"
               >
@@ -984,7 +984,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
             >
               <div
-                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
+                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
               >
                 <span
                   class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -997,7 +997,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                 tabindex="0"
                 type="button"
               >
diff --git a/src/features/filters/__tests__/__snapshots__/Filters.test.tsx.snap b/src/features/filters/__tests__/__snapshots__/Filters.test.tsx.snap
index 294ef8a..90e54dc 100644
--- a/src/features/filters/__tests__/__snapshots__/Filters.test.tsx.snap
+++ b/src/features/filters/__tests__/__snapshots__/Filters.test.tsx.snap
@@ -2,13 +2,13 @@
 
 exports[`Filters component > matches the snapshot with more than one active filters 1`] = `
 <div
-  className="MuiStack-root css-1obrysa-MuiStack-root"
+  className="MuiStack-root css-knfboc-MuiStack-root"
 >
   <div
     className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-mhc70k-MuiGrid-root"
   >
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         className="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
@@ -75,10 +75,10 @@ exports[`Filters component > matches the snapshot with more than one active filt
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-yjsfm1"
+              className="css-njhac4-MuiNotchedOutlined-root"
             >
               <span>
                 Single Filter Field
@@ -89,7 +89,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
       </div>
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         className="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
@@ -161,10 +161,10 @@ exports[`Filters component > matches the snapshot with more than one active filt
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-yjsfm1"
+              className="css-njhac4-MuiNotchedOutlined-root"
             >
               <span>
                 Numeric Field
@@ -175,11 +175,11 @@ exports[`Filters component > matches the snapshot with more than one active filt
       </div>
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-jw1jwv-MuiAutocomplete-root"
         label="Multiple Filter Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -223,7 +223,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -261,10 +261,10 @@ exports[`Filters component > matches the snapshot with more than one active filt
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-yjsfm1"
+                className="css-njhac4-MuiNotchedOutlined-root"
               >
                 <span>
                   Multiple Filter Field
@@ -276,11 +276,11 @@ exports[`Filters component > matches the snapshot with more than one active filt
       </div>
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1y8r37a-MuiAutocomplete-root"
         label="Autocomplete Single Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -324,7 +324,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -362,10 +362,10 @@ exports[`Filters component > matches the snapshot with more than one active filt
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-yjsfm1"
+                className="css-njhac4-MuiNotchedOutlined-root"
               >
                 <span>
                   Autocomplete Single Field
@@ -387,7 +387,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
       className="MuiStack-root css-1xvxq01-MuiStack-root"
     >
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-1mywu95-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-s4nqld-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -422,7 +422,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
         </svg>
       </div>
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-1mywu95-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-s4nqld-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -457,7 +457,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
         </svg>
       </div>
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-1mywu95-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-s4nqld-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -491,31 +491,27 @@ exports[`Filters component > matches the snapshot with more than one active filt
           />
         </svg>
       </div>
-      <div
-        className="MuiStack-root css-omazcq-MuiStack-root"
+      <button
+        className="MuiButtonBase-root MuiButton-root MuiButton-naked MuiButton-nakedPrimary MuiButton-sizeSmall MuiButton-nakedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-naked MuiButton-nakedPrimary MuiButton-sizeSmall MuiButton-nakedSizeSmall MuiButton-colorPrimary css-wrzsdx-MuiButtonBase-root-MuiButton-root"
+        disabled={false}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onContextMenu={[Function]}
+        onDragLeave={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        tabIndex={0}
+        type="button"
       >
-        <button
-          className="MuiButtonBase-root MuiButton-root MuiButton-naked MuiButton-nakedPrimary MuiButton-sizeSmall MuiButton-nakedSizeSmall MuiButton-root MuiButton-naked MuiButton-nakedPrimary MuiButton-sizeSmall MuiButton-nakedSizeSmall css-wrzsdx-MuiButtonBase-root-MuiButton-root"
-          disabled={false}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onContextMenu={[Function]}
-          onDragLeave={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          onMouseDown={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchMove={[Function]}
-          onTouchStart={[Function]}
-          tabIndex={0}
-          type="button"
-        >
-          Annulla filtri
-        </button>
-      </div>
+        Annulla filtri
+      </button>
     </div>
   </div>
 </div>
@@ -523,13 +519,13 @@ exports[`Filters component > matches the snapshot with more than one active filt
 
 exports[`Filters component > matches the snapshot with more than one active filters and right content 1`] = `
 <div
-  className="MuiStack-root css-1obrysa-MuiStack-root"
+  className="MuiStack-root css-knfboc-MuiStack-root"
 >
   <div
     className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-mhc70k-MuiGrid-root"
   >
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         className="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
@@ -596,10 +592,10 @@ exports[`Filters component > matches the snapshot with more than one active filt
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-yjsfm1"
+              className="css-njhac4-MuiNotchedOutlined-root"
             >
               <span>
                 Single Filter Field
@@ -610,7 +606,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
       </div>
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         className="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
@@ -682,10 +678,10 @@ exports[`Filters component > matches the snapshot with more than one active filt
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-yjsfm1"
+              className="css-njhac4-MuiNotchedOutlined-root"
             >
               <span>
                 Numeric Field
@@ -696,11 +692,11 @@ exports[`Filters component > matches the snapshot with more than one active filt
       </div>
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-jw1jwv-MuiAutocomplete-root"
         label="Multiple Filter Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -744,7 +740,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -782,10 +778,10 @@ exports[`Filters component > matches the snapshot with more than one active filt
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-yjsfm1"
+                className="css-njhac4-MuiNotchedOutlined-root"
               >
                 <span>
                   Multiple Filter Field
@@ -797,11 +793,11 @@ exports[`Filters component > matches the snapshot with more than one active filt
       </div>
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1y8r37a-MuiAutocomplete-root"
         label="Autocomplete Single Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -845,7 +841,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -883,10 +879,10 @@ exports[`Filters component > matches the snapshot with more than one active filt
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-yjsfm1"
+                className="css-njhac4-MuiNotchedOutlined-root"
               >
                 <span>
                   Autocomplete Single Field
@@ -908,7 +904,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
       className="MuiStack-root css-1xvxq01-MuiStack-root"
     >
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-1mywu95-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-s4nqld-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -943,7 +939,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
         </svg>
       </div>
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-1mywu95-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-s4nqld-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -978,7 +974,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
         </svg>
       </div>
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-1mywu95-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-s4nqld-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -1012,31 +1008,27 @@ exports[`Filters component > matches the snapshot with more than one active filt
           />
         </svg>
       </div>
-      <div
-        className="MuiStack-root css-omazcq-MuiStack-root"
+      <button
+        className="MuiButtonBase-root MuiButton-root MuiButton-naked MuiButton-nakedPrimary MuiButton-sizeSmall MuiButton-nakedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-naked MuiButton-nakedPrimary MuiButton-sizeSmall MuiButton-nakedSizeSmall MuiButton-colorPrimary css-wrzsdx-MuiButtonBase-root-MuiButton-root"
+        disabled={false}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onContextMenu={[Function]}
+        onDragLeave={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        tabIndex={0}
+        type="button"
       >
-        <button
-          className="MuiButtonBase-root MuiButton-root MuiButton-naked MuiButton-nakedPrimary MuiButton-sizeSmall MuiButton-nakedSizeSmall MuiButton-root MuiButton-naked MuiButton-nakedPrimary MuiButton-sizeSmall MuiButton-nakedSizeSmall css-wrzsdx-MuiButtonBase-root-MuiButton-root"
-          disabled={false}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onContextMenu={[Function]}
-          onDragLeave={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          onMouseDown={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchMove={[Function]}
-          onTouchStart={[Function]}
-          tabIndex={0}
-          type="button"
-        >
-          Annulla filtri
-        </button>
-      </div>
+        Annulla filtri
+      </button>
     </div>
     <div>
       Right Content
@@ -1047,13 +1039,13 @@ exports[`Filters component > matches the snapshot with more than one active filt
 
 exports[`Filters component > matches the snapshot with one active filter 1`] = `
 <div
-  className="MuiStack-root css-1obrysa-MuiStack-root"
+  className="MuiStack-root css-knfboc-MuiStack-root"
 >
   <div
     className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-mhc70k-MuiGrid-root"
   >
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         className="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
@@ -1120,10 +1112,10 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-yjsfm1"
+              className="css-njhac4-MuiNotchedOutlined-root"
             >
               <span>
                 Single Filter Field
@@ -1134,7 +1126,7 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
       </div>
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         className="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
@@ -1206,10 +1198,10 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-yjsfm1"
+              className="css-njhac4-MuiNotchedOutlined-root"
             >
               <span>
                 Numeric Field
@@ -1220,11 +1212,11 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
       </div>
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-jw1jwv-MuiAutocomplete-root"
         label="Multiple Filter Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -1268,7 +1260,7 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -1309,10 +1301,10 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-yjsfm1"
+                className="css-njhac4-MuiNotchedOutlined-root"
               >
                 <span>
                   Multiple Filter Field
@@ -1324,11 +1316,11 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
       </div>
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1y8r37a-MuiAutocomplete-root"
         label="Autocomplete Single Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -1372,7 +1364,7 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -1413,10 +1405,10 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-yjsfm1"
+                className="css-njhac4-MuiNotchedOutlined-root"
               >
                 <span>
                   Autocomplete Single Field
@@ -1438,7 +1430,7 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
       className="MuiStack-root css-1xvxq01-MuiStack-root"
     >
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-1mywu95-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-s4nqld-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -1479,13 +1471,13 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
 
 exports[`Filters component > matches the snapshot with one active filter and a right content 1`] = `
 <div
-  className="MuiStack-root css-1obrysa-MuiStack-root"
+  className="MuiStack-root css-knfboc-MuiStack-root"
 >
   <div
     className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-mhc70k-MuiGrid-root"
   >
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         className="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
@@ -1552,10 +1544,10 @@ exports[`Filters component > matches the snapshot with one active filter and a r
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-yjsfm1"
+              className="css-njhac4-MuiNotchedOutlined-root"
             >
               <span>
                 Single Filter Field
@@ -1566,7 +1558,7 @@ exports[`Filters component > matches the snapshot with one active filter and a r
       </div>
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         className="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
@@ -1638,10 +1630,10 @@ exports[`Filters component > matches the snapshot with one active filter and a r
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-yjsfm1"
+              className="css-njhac4-MuiNotchedOutlined-root"
             >
               <span>
                 Numeric Field
@@ -1652,11 +1644,11 @@ exports[`Filters component > matches the snapshot with one active filter and a r
       </div>
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-jw1jwv-MuiAutocomplete-root"
         label="Multiple Filter Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -1700,7 +1692,7 @@ exports[`Filters component > matches the snapshot with one active filter and a r
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -1741,10 +1733,10 @@ exports[`Filters component > matches the snapshot with one active filter and a r
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-yjsfm1"
+                className="css-njhac4-MuiNotchedOutlined-root"
               >
                 <span>
                   Multiple Filter Field
@@ -1756,11 +1748,11 @@ exports[`Filters component > matches the snapshot with one active filter and a r
       </div>
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1y8r37a-MuiAutocomplete-root"
         label="Autocomplete Single Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -1804,7 +1796,7 @@ exports[`Filters component > matches the snapshot with one active filter and a r
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -1845,10 +1837,10 @@ exports[`Filters component > matches the snapshot with one active filter and a r
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-yjsfm1"
+                className="css-njhac4-MuiNotchedOutlined-root"
               >
                 <span>
                   Autocomplete Single Field
@@ -1870,7 +1862,7 @@ exports[`Filters component > matches the snapshot with one active filter and a r
       className="MuiStack-root css-1xvxq01-MuiStack-root"
     >
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-1mywu95-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-s4nqld-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -1914,13 +1906,13 @@ exports[`Filters component > matches the snapshot with one active filter and a r
 
 exports[`Filters component > matches the snapshot without active filters 1`] = `
 <div
-  className="MuiStack-root css-1obrysa-MuiStack-root"
+  className="MuiStack-root css-knfboc-MuiStack-root"
 >
   <div
     className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-mhc70k-MuiGrid-root"
   >
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         className="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
@@ -1987,10 +1979,10 @@ exports[`Filters component > matches the snapshot without active filters 1`] = `
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-yjsfm1"
+              className="css-njhac4-MuiNotchedOutlined-root"
             >
               <span>
                 Single Filter Field
@@ -2001,7 +1993,7 @@ exports[`Filters component > matches the snapshot without active filters 1`] = `
       </div>
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         className="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
@@ -2073,10 +2065,10 @@ exports[`Filters component > matches the snapshot without active filters 1`] = `
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-yjsfm1"
+              className="css-njhac4-MuiNotchedOutlined-root"
             >
               <span>
                 Numeric Field
@@ -2087,11 +2079,11 @@ exports[`Filters component > matches the snapshot without active filters 1`] = `
       </div>
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-jw1jwv-MuiAutocomplete-root"
         label="Multiple Filter Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -2135,7 +2127,7 @@ exports[`Filters component > matches the snapshot without active filters 1`] = `
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -2173,10 +2165,10 @@ exports[`Filters component > matches the snapshot without active filters 1`] = `
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-yjsfm1"
+                className="css-njhac4-MuiNotchedOutlined-root"
               >
                 <span>
                   Multiple Filter Field
@@ -2188,11 +2180,11 @@ exports[`Filters component > matches the snapshot without active filters 1`] = `
       </div>
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-3 css-1equabv-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-3 css-1ozs4dl-MuiGrid-root"
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1y8r37a-MuiAutocomplete-root"
         label="Autocomplete Single Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -2236,7 +2228,7 @@ exports[`Filters component > matches the snapshot without active filters 1`] = `
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -2274,10 +2266,10 @@ exports[`Filters component > matches the snapshot without active filters 1`] = `
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-yjsfm1"
+                className="css-njhac4-MuiNotchedOutlined-root"
               >
                 <span>
                   Autocomplete Single Field
diff --git a/src/features/filters/components/ActiveFiltersChips.tsx b/src/features/filters/components/ActiveFiltersChips.tsx
index 9d5a8b3..bc347a3 100644
--- a/src/features/filters/components/ActiveFiltersChips.tsx
+++ b/src/features/filters/components/ActiveFiltersChips.tsx
@@ -3,7 +3,7 @@ import { Button, Chip, Divider, Stack } from '@mui/material'
 import type { ActiveFilters, FilterHandler } from '../filters.types'
 import { getLocalizedValue } from '../../../utils/common.utils'
 
-type ActiveFilterChips = {
+type ActiveFilterChipsProps = {
   activeFilters: ActiveFilters
   onRemoveActiveFilter: FilterHandler
   onResetActiveFilters: VoidFunction
@@ -11,19 +11,29 @@ type ActiveFilterChips = {
   rightContent?: React.ReactNode
 }
 
-export const ActiveFilterChips: React.FC<ActiveFilterChips> = ({
+const chipFocusStyles = {
+  '&.Mui-focusVisible': {
+    boxShadow: '0px 0px 8px 2px rgba(25, 118, 210, 0.3)',
+    transform: 'scale(1.05)',
+    transition: 'transform 0.2s ease-in-out',
+  },
+}
+
+const cancelFiltersLabel = getLocalizedValue({
+  it: 'Annulla filtri',
+  en: 'Cancel filters',
+})
+
+export const ActiveFilterChips: React.FC<ActiveFilterChipsProps> = ({
   activeFilters,
   onRemoveActiveFilter,
   onResetActiveFilters,
   hasSubmitButton,
   rightContent,
 }) => {
-  if (activeFilters.length <= 0 && !rightContent) return null
+  if (activeFilters.length === 0 && !rightContent) return null
 
-  const cancelFiltersLabel = getLocalizedValue({
-    it: 'Annulla filtri',
-    en: 'Cancel filters',
-  })
+  const showResetButton = !hasSubmitButton && activeFilters.length > 1
 
   return (
     <>
@@ -38,23 +48,22 @@ export const ActiveFilterChips: React.FC<ActiveFilterChips> = ({
         <Stack direction="row" flexWrap="wrap" gap={1} alignItems="center" sx={{ width: '100%' }}>
           {activeFilters.map(({ value, label, type, filterKey }) => (
             <Chip
-              key={filterKey + value}
+              key={`${filterKey}-${value}`}
               label={label}
-              onDelete={onRemoveActiveFilter.bind(null, type, filterKey, value)}
+              sx={chipFocusStyles}
+              onDelete={() => onRemoveActiveFilter(type, filterKey, value)}
             />
           ))}
-          {!hasSubmitButton && activeFilters.length > 1 && (
-            <Stack justifyContent="center">
-              <Button
-                sx={{ ml: 2 }}
-                size="small"
-                type="button"
-                variant="naked"
-                onClick={onResetActiveFilters}
-              >
-                {cancelFiltersLabel}
-              </Button>
-            </Stack>
+          {showResetButton && (
+            <Button
+              sx={{ ml: 2 }}
+              size="small"
+              type="button"
+              variant="naked"
+              onClick={onResetActiveFilters}
+            >
+              {cancelFiltersLabel}
+            </Button>
           )}
         </Stack>
         {rightContent}
diff --git a/src/features/filters/components/AutocompleteBaseFilterField.tsx b/src/features/filters/components/AutocompleteBaseFilterField.tsx
index 8bd7049..d1a56e3 100644
--- a/src/features/filters/components/AutocompleteBaseFilterField.tsx
+++ b/src/features/filters/components/AutocompleteBaseFilterField.tsx
@@ -25,31 +25,27 @@ export const AutocompleteBaseFilterField = <Multiple extends boolean>(
   })
 
   function getSelectedElementsLabelText(): { label: string; ariaLabel: string } {
-    let label = props.label
-    let ariaLabel = props.label
-
-    if (props.hasSubmitButton && Array.isArray(props.value) && props.value.length >= 1) {
-      const selectedElements = props.value
+    // If the filter has no submit button, or if it has a submit button but the value is empty, the label is just the field label
+    //  otherwise it shows the number of selected elements
+    if (!props.hasSubmitButton || !Array.isArray(props.value) || props.value.length === 0) {
+      return { label: props.label, ariaLabel: props.label }
+    }
 
-      label = getLocalizedValue({
-        it: `${props.label} (${selectedElements.length})`,
-        en: `${props.label} (${selectedElements.length})`,
-      })
+    const elementNumber = props.value.length
 
-      if (props.value.length === 1) {
-        ariaLabel = getLocalizedValue({
-          it: `${props.label} (${selectedElements.length} elemento selezionato)`,
-          en: `${props.label} (${selectedElements.length} element selected)`,
-        })
-      }
+    const label = getLocalizedValue({
+      it: `${props.label} (${elementNumber})`,
+      en: `${props.label} (${elementNumber})`,
+    })
 
-      if (props.value.length > 1) {
-        ariaLabel = getLocalizedValue({
-          it: `${props.label} (${selectedElements.length} elementi selezionati)`,
-          en: `${props.label} (${selectedElements.length} elements selected)`,
-        })
-      }
-    }
+    const ariaLabel = getLocalizedValue({
+      it: `${props.label} (${elementNumber} ${
+        elementNumber === 1 ? 'elemento selezionato' : 'elementi selezionati'
+      })`,
+      en: `${props.label} (${elementNumber} ${
+        elementNumber === 1 ? 'element' : 'elements'
+      } selected)`,
+    })
 
     return { label, ariaLabel }
   }
diff --git a/src/features/filters/components/Filters.tsx b/src/features/filters/components/Filters.tsx
index 2554255..5bf4b55 100644
--- a/src/features/filters/components/Filters.tsx
+++ b/src/features/filters/components/Filters.tsx
@@ -58,19 +58,19 @@ export const Filters: React.FC<FiltersProps> = ({
     onResetActiveFilters()
   }
 
-  const onSubmit = () => {
+  const handleSubmit = () => {
     onSetActiveFilters(fields, fieldsValues)
   }
 
   return (
-    <Stack direction="column" spacing={2} justifyContent="space-between" sx={{ mb: 4 }}>
+    <Stack direction="column" sx={{ justifyContent: 'space-between', py: 4 }}>
       <FiltersFields
         fields={fields}
         fieldsValues={fieldsValues}
         onFieldsValuesChange={handleFieldsValuesChange}
         onChangeActiveFilter={onChangeActiveFilter}
         onResetActiveFilters={handleResetActiveFilters}
-        onSubmit={onSubmit}
+        onSubmit={handleSubmit}
         hasSubmitButton={hasSubmitButton}
       />
       <ActiveFilterChips
diff --git a/src/features/filters/components/FiltersFields.tsx b/src/features/filters/components/FiltersFields.tsx
index 8f82051..99f4711 100644
--- a/src/features/filters/components/FiltersFields.tsx
+++ b/src/features/filters/components/FiltersFields.tsx
@@ -62,7 +62,7 @@ export const FiltersFields: React.FC<FiltersFieldsProps> = ({
           hasSubmitButton,
         }
         return (
-          <Grid item xs={field.width ?? filterFieldDefaultWidth} key={field.name}>
+          <Grid item xs={12} lg={field.width ?? filterFieldDefaultWidth} key={field.name}>
             {field.type === 'freetext' && <FreetextFilterField {...fieldProps} />}
             {field.type === 'numeric' && <NumericFilterField {...fieldProps} />}
             {field.type === 'autocomplete-multiple' && (
@@ -76,7 +76,7 @@ export const FiltersFields: React.FC<FiltersFieldsProps> = ({
         )
       })}
       {hasSubmitButton && (
-        <Grid item xs={3} alignContent="center">
+        <Grid item xs={12} lg={3} alignContent="center">
           <Button
             size="small"
             type="button"
diff --git a/src/features/filters/filters.utils.ts b/src/features/filters/filters.utils.ts
index 8307b40..6946ae8 100644
--- a/src/features/filters/filters.utils.ts
+++ b/src/features/filters/filters.utils.ts
@@ -38,7 +38,6 @@ export const getFiltersFieldsInitialValues = (
   searchParams: URLSearchParams,
   filtersFields: FilterFields,
   hasSubmitButton?: boolean
-  // TODO inserire il parametro hasSubmitButton e nel caso ci sia popolare i valori iniziali dai search params e poi ricontrollare tutto
 ) => {
   const fieldsValues: FilterFieldsValues = {}
   filtersFields.forEach((field) => {
diff --git a/src/features/filters/hooks/useFilters.ts b/src/features/filters/hooks/useFilters.ts
index f34eb68..3d0aab9 100644
--- a/src/features/filters/hooks/useFilters.ts
+++ b/src/features/filters/hooks/useFilters.ts
@@ -6,6 +6,7 @@ import type {
   FiltersHandlers,
   FiltersParams,
   FiltersHandler,
+  FilterFieldType,
 } from '../filters.types'
 import { useSearchParams } from 'react-router-dom'
 import {
@@ -15,6 +16,50 @@ import {
   encodeSingleFilterFieldValue,
 } from '../filters.utils'
 
+type FilterValue = Parameters<FilterHandler>[2]
+
+function shouldRemoveFilter(type: FilterFieldType, value: FilterValue): boolean {
+  if ((type === 'datepicker' || type === 'autocomplete-single') && value === null) {
+    return true
+  }
+  if (
+    ['freetext', 'autocomplete-multiple', 'numeric'].includes(type) &&
+    (value as string | FilterOption[]).length === 0
+  ) {
+    return true
+  }
+  return false
+}
+
+function setFilterParam(
+  searchParams: URLSearchParams,
+  type: FilterFieldType,
+  filterKey: string,
+  value: FilterValue
+): void {
+  switch (type) {
+    case 'numeric':
+    case 'freetext': {
+      searchParams.set(filterKey, String(value))
+      break
+    }
+    case 'autocomplete-multiple': {
+      const encoded = encodeMultipleFilterFieldValue(value as FilterOption[])
+      searchParams.set(filterKey, encoded)
+      break
+    }
+    case 'autocomplete-single': {
+      const encoded = encodeSingleFilterFieldValue(value as FilterOption)
+      searchParams.set(filterKey, encoded)
+      break
+    }
+    case 'datepicker': {
+      searchParams.set(filterKey, (value as Date).toISOString())
+      break
+    }
+  }
+}
+
 /**
  * @description
  * This hook is used to manage the filters state keeping it in sync with the url params.
@@ -71,41 +116,12 @@ export function useFilters<TFiltersParams extends FiltersParams>(
   const onChangeActiveFilter = React.useCallback<FilterHandler>(
     (type, filterKey, value) => {
       setSearchParams((searchParams) => {
-        let shouldBeRemoved = false
-        if (type === 'datepicker' && value === null) {
-          shouldBeRemoved = true
-        }
-        if (
-          ['freetext', 'autocomplete-multiple', 'numeric'].includes(type) &&
-          (value as string | Array<FilterOption>).length === 0
-        ) {
-          shouldBeRemoved = true
-        }
-        if (shouldBeRemoved) {
+        if (shouldRemoveFilter(type, value)) {
           searchParams.delete(filterKey)
-          return searchParams
+        } else {
+          setFilterParam(searchParams, type, filterKey, value)
+          searchParams.delete('offset')
         }
-
-        switch (type) {
-          case 'numeric':
-          case 'freetext':
-            searchParams.set(filterKey, String(value))
-            break
-          case 'autocomplete-multiple':
-            const urlParamMultipleFilterValue = encodeMultipleFilterFieldValue(
-              value as Array<FilterOption>
-            )
-            searchParams.set(filterKey, urlParamMultipleFilterValue)
-            break
-          case 'autocomplete-single':
-            const urlParamSingleFilterValue = encodeSingleFilterFieldValue(value as FilterOption)
-            searchParams.set(filterKey, urlParamSingleFilterValue)
-            break
-          case 'datepicker':
-            searchParams.set(filterKey, (value as Date).toISOString())
-            break
-        }
-        searchParams.delete('offset')
         return searchParams
       })
     },
@@ -114,59 +130,25 @@ export function useFilters<TFiltersParams extends FiltersParams>(
 
   const onSetActiveFilters = React.useCallback<FiltersHandler>(
     (fields, fieldsValues) => {
-      // fields.forEach((field) => {
-      //   onChangeActiveFilter(field.type, field.name, fieldsValues[field.name])
-      // })
       setSearchParams((searchParams) => {
-        console.log('Setting active filters...', searchParams.toString())
-        console.log('Fields values:', fieldsValues)
+        let hasChanges = false
+
         fields.forEach((field) => {
-          const value = fieldsValues[field.name]
-          const type = field.type
-          const filterKey = field.name
-          console.log('data', filterKey, type, value)
-          let shouldBeRemoved = false
-          if ((type === 'datepicker' || type === 'autocomplete-single') && value === null) {
-            shouldBeRemoved = true
-          }
-          if (
-            ['freetext', 'autocomplete-multiple', 'numeric'].includes(type) &&
-            (value as string | Array<FilterOption>).length === 0
-          ) {
-            shouldBeRemoved = true
-          }
-          if (shouldBeRemoved) {
-            searchParams.delete(filterKey)
-          }
+          const { type, name: filterKey } = field
+          const value = fieldsValues[filterKey]
 
-          if (!shouldBeRemoved) {
-            console.log('Setting param:', shouldBeRemoved, filterKey, value)
-            switch (type) {
-              case 'numeric':
-              case 'freetext':
-                searchParams.set(filterKey, String(value))
-                break
-              case 'autocomplete-multiple':
-                const urlParamMultipleFilterValue = encodeMultipleFilterFieldValue(
-                  value as Array<FilterOption>
-                )
-                searchParams.set(filterKey, urlParamMultipleFilterValue)
-                break
-              case 'autocomplete-single':
-                const urlParamSingleFilterValue = encodeSingleFilterFieldValue(
-                  value as FilterOption
-                )
-                searchParams.set(filterKey, urlParamSingleFilterValue)
-                break
-              case 'datepicker':
-                searchParams.set(filterKey, (value as Date).toISOString())
-                break
-            }
-            searchParams.delete('offset')
-            console.log('Updated search params:', searchParams.toString())
+          if (shouldRemoveFilter(type, value)) {
+            searchParams.delete(filterKey)
+          } else {
+            setFilterParam(searchParams, type, filterKey, value)
+            hasChanges = true
           }
         })
-        console.log('Final search params after setting active filters:', searchParams.toString())
+
+        if (hasChanges) {
+          searchParams.delete('offset')
+        }
+
         return searchParams
       })
     },
diff --git a/src/features/filters/stories/FiltersExample.tsx b/src/features/filters/stories/FiltersExample.tsx
index 869819d..ce25416 100644
--- a/src/features/filters/stories/FiltersExample.tsx
+++ b/src/features/filters/stories/FiltersExample.tsx
@@ -20,18 +20,18 @@ const _FiltersExample: React.FC = () => {
   const location = useLocation()
 
   const { filtersParams, ...handlers } = useFilters<EServiceListQueryFilters>([
-    { name: 'q', type: 'freetext', label: 'Find by name' },
+    { name: 'q', type: 'freetext', label: 'Nome' },
     {
       name: 'version',
       type: 'numeric',
-      label: 'Find by version number',
+      label: 'Cerca per versione',
       min: 10,
       max: 20,
     },
     {
       name: 'consumerId',
       type: 'autocomplete-multiple',
-      label: 'Find by consumer',
+      label: 'Cerca per consumatore',
       options: [
         { value: 'option-1', label: 'PagoPA S.p.A.' },
         { value: 'option-2', label: 'Agenzia delle Entrate' },
@@ -41,17 +41,17 @@ const _FiltersExample: React.FC = () => {
     {
       name: 'state',
       type: 'autocomplete-single',
-      label: 'Find by State',
+      label: 'Stato',
       options: [
-        { value: 'option-1', label: 'PagoPA S.p.A.' },
-        { value: 'option-2', label: 'Agenzia delle Entrate' },
+        { value: 'pagoPA', label: 'PagoPA S.p.A.' },
+        { value: 'agenziaEntrate', label: 'Agenzia delle Entrate' },
       ],
       onTextInputChange: setAutocompleteStateTextInput,
     },
     {
       name: 'createdAt',
       type: 'datepicker',
-      label: 'Find by creation date',
+      label: 'Data di creazione',
       minDate: new Date(),
       // Today plus 1 year
       maxDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
@@ -70,7 +70,7 @@ const _FiltersExample: React.FC = () => {
 
   return (
     <>
-      <Filters {...handlers} />
+      <Filters {...handlers} hasSubmitButton />
       <Container sx={{ bgcolor: debug ? 'white' : 'initial', mt: 4, py: 4 }}>
         <Button variant="naked" onClick={() => setDebug(!debug)}>
           {debug ? 'Hide' : 'Show'} debug values
diff --git a/src/features/pagination/__tests__/Pagination.test.tsx b/src/features/pagination/__tests__/Pagination.test.tsx
index f09256e..e86042a 100644
--- a/src/features/pagination/__tests__/Pagination.test.tsx
+++ b/src/features/pagination/__tests__/Pagination.test.tsx
@@ -49,10 +49,12 @@ describe('Pagination component', () => {
       expect(screen).toBeDefined()
     })
 
-    it('Should be available [10,24,36] as rows per page as default options', async () => {
+    it.only('Should be available [10,24,36] as rows per page as default options', async () => {
       const screen = render(<PaginationExample withRowsPerPage />)
       const selectElement = screen.getByTestId('rows-per-page-select')
-      const selectButton = within(selectElement).getByRole('button')
+      const selectButton = within(selectElement).getByRole('combobox')
+
+      screen.debug(selectButton)
 
       expect(selectElement).toBeDefined()
       await userEvent.click(selectButton)

From b17e2354908f14d209d0f1336fdf2e4a85f4d7ed Mon Sep 17 00:00:00 2001
From: borgesis95 <salvatore.borgesi@pagopa.it>
Date: Wed, 25 Mar 2026 10:31:37 +0100
Subject: [PATCH 15/20] test: fix test

---
 .../filters/__tests__/__snapshots__/Filters.test.tsx.snap | 8 ++++----
 src/features/filters/components/ActiveFiltersChips.tsx    | 2 +-
 src/features/filters/components/FiltersFields.tsx         | 2 +-
 src/features/pagination/__tests__/Pagination.test.tsx     | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/features/filters/__tests__/__snapshots__/Filters.test.tsx.snap b/src/features/filters/__tests__/__snapshots__/Filters.test.tsx.snap
index 90e54dc..a769a62 100644
--- a/src/features/filters/__tests__/__snapshots__/Filters.test.tsx.snap
+++ b/src/features/filters/__tests__/__snapshots__/Filters.test.tsx.snap
@@ -378,7 +378,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
     </div>
   </div>
   <hr
-    className="MuiDivider-root MuiDivider-fullWidth css-1b008ma-MuiDivider-root"
+    className="MuiDivider-root MuiDivider-fullWidth css-ctpjxq-MuiDivider-root"
   />
   <div
     className="MuiStack-root css-1jv2z0n-MuiStack-root"
@@ -895,7 +895,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
     </div>
   </div>
   <hr
-    className="MuiDivider-root MuiDivider-fullWidth css-1b008ma-MuiDivider-root"
+    className="MuiDivider-root MuiDivider-fullWidth css-ctpjxq-MuiDivider-root"
   />
   <div
     className="MuiStack-root css-1a41st4-MuiStack-root"
@@ -1421,7 +1421,7 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
     </div>
   </div>
   <hr
-    className="MuiDivider-root MuiDivider-fullWidth css-1b008ma-MuiDivider-root"
+    className="MuiDivider-root MuiDivider-fullWidth css-ctpjxq-MuiDivider-root"
   />
   <div
     className="MuiStack-root css-1jv2z0n-MuiStack-root"
@@ -1853,7 +1853,7 @@ exports[`Filters component > matches the snapshot with one active filter and a r
     </div>
   </div>
   <hr
-    className="MuiDivider-root MuiDivider-fullWidth css-1b008ma-MuiDivider-root"
+    className="MuiDivider-root MuiDivider-fullWidth css-ctpjxq-MuiDivider-root"
   />
   <div
     className="MuiStack-root css-1a41st4-MuiStack-root"
diff --git a/src/features/filters/components/ActiveFiltersChips.tsx b/src/features/filters/components/ActiveFiltersChips.tsx
index bc347a3..0a71cbb 100644
--- a/src/features/filters/components/ActiveFiltersChips.tsx
+++ b/src/features/filters/components/ActiveFiltersChips.tsx
@@ -37,7 +37,7 @@ export const ActiveFilterChips: React.FC<ActiveFilterChipsProps> = ({
 
   return (
     <>
-      <Divider sx={{ my: 1 }} />
+      <Divider sx={{ my: 2 }} />
 
       <Stack
         spacing={rightContent ? 2 : 0}
diff --git a/src/features/filters/components/FiltersFields.tsx b/src/features/filters/components/FiltersFields.tsx
index 99f4711..4e7e555 100644
--- a/src/features/filters/components/FiltersFields.tsx
+++ b/src/features/filters/components/FiltersFields.tsx
@@ -76,7 +76,7 @@ export const FiltersFields: React.FC<FiltersFieldsProps> = ({
         )
       })}
       {hasSubmitButton && (
-        <Grid item xs={12} lg={3} alignContent="center">
+        <Grid item xs={12} lg={2} alignContent="center">
           <Button
             size="small"
             type="button"
diff --git a/src/features/pagination/__tests__/Pagination.test.tsx b/src/features/pagination/__tests__/Pagination.test.tsx
index e86042a..e58b77a 100644
--- a/src/features/pagination/__tests__/Pagination.test.tsx
+++ b/src/features/pagination/__tests__/Pagination.test.tsx
@@ -49,7 +49,7 @@ describe('Pagination component', () => {
       expect(screen).toBeDefined()
     })
 
-    it.only('Should be available [10,24,36] as rows per page as default options', async () => {
+    it('Should be available [10,24,36] as rows per page as default options', async () => {
       const screen = render(<PaginationExample withRowsPerPage />)
       const selectElement = screen.getByTestId('rows-per-page-select')
       const selectButton = within(selectElement).getByRole('combobox')

From 033e56cfe9f11a15d9ca35668120f841121b1983 Mon Sep 17 00:00:00 2001
From: borgesis95 <salvatore.borgesi@pagopa.it>
Date: Thu, 26 Mar 2026 09:43:28 +0100
Subject: [PATCH 16/20] test: fix test

---
 .../__snapshots__/Table.test.tsx.snap         |  52 +++----
 .../__snapshots__/Filters.test.tsx.snap       | 140 +++++++++---------
 .../pagination/__tests__/Pagination.test.tsx  |  11 +-
 3 files changed, 101 insertions(+), 102 deletions(-)

diff --git a/src/components/__tests__/__snapshots__/Table.test.tsx.snap b/src/components/__tests__/__snapshots__/Table.test.tsx.snap
index 819d9d2..439ef2f 100644
--- a/src/components/__tests__/__snapshots__/Table.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Table.test.tsx.snap
@@ -80,7 +80,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
               >
                 <div
-                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
+                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
                 >
                   <span
                     class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -93,7 +93,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                   tabindex="0"
                   type="button"
                 >
@@ -138,7 +138,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
               >
                 <div
-                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
+                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
                 >
                   <span
                     class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -151,7 +151,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                   tabindex="0"
                   type="button"
                 >
@@ -196,7 +196,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
               >
                 <div
-                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
+                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
                 >
                   <span
                     class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -209,7 +209,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                   tabindex="0"
                   type="button"
                 >
@@ -228,7 +228,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
                 colspan="4"
               >
                 <div
-                  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-hu7tqv-MuiPaper-root-MuiAlert-root"
+                  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-standardInfo MuiAlert-standard css-1fuz9qr-MuiPaper-root-MuiAlert-root"
                   role="alert"
                 >
                   <div
@@ -335,7 +335,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
             >
               <div
-                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
+                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
               >
                 <span
                   class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -348,7 +348,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                 tabindex="0"
                 type="button"
               >
@@ -393,7 +393,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
             >
               <div
-                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
+                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
               >
                 <span
                   class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -406,7 +406,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                 tabindex="0"
                 type="button"
               >
@@ -451,7 +451,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
             >
               <div
-                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
+                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
               >
                 <span
                   class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -464,7 +464,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                 tabindex="0"
                 type="button"
               >
@@ -483,7 +483,7 @@ exports[`Checks that Table snapshots didn't change > renders Table empty state 1
               colspan="4"
             >
               <div
-                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-hu7tqv-MuiPaper-root-MuiAlert-root"
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-standardInfo MuiAlert-standard css-1fuz9qr-MuiPaper-root-MuiAlert-root"
                 role="alert"
               >
                 <div
@@ -647,7 +647,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
               >
                 <div
-                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
+                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
                 >
                   <span
                     class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -660,7 +660,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                   tabindex="0"
                   type="button"
                 >
@@ -705,7 +705,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
               >
                 <div
-                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
+                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
                 >
                   <span
                     class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -718,7 +718,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                   tabindex="0"
                   type="button"
                 >
@@ -763,7 +763,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
               >
                 <div
-                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
+                  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
                 >
                   <span
                     class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -776,7 +776,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                   tabindex="0"
                   type="button"
                 >
@@ -868,7 +868,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
             >
               <div
-                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
+                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
               >
                 <span
                   class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -881,7 +881,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                 tabindex="0"
                 type="button"
               >
@@ -926,7 +926,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
             >
               <div
-                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
+                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
               >
                 <span
                   class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -939,7 +939,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                 tabindex="0"
                 type="button"
               >
@@ -984,7 +984,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1rpd3i8-MuiTableCell-root"
             >
               <div
-                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
+                class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1e8dhvr-MuiChip-root"
               >
                 <span
                   class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -997,7 +997,7 @@ exports[`Checks that Table snapshots didn't change > renders a Table with 2 head
               class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-2u9kxv-MuiTableCell-root"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                 tabindex="0"
                 type="button"
               >
diff --git a/src/features/filters/__tests__/__snapshots__/Filters.test.tsx.snap b/src/features/filters/__tests__/__snapshots__/Filters.test.tsx.snap
index a769a62..4f07f2f 100644
--- a/src/features/filters/__tests__/__snapshots__/Filters.test.tsx.snap
+++ b/src/features/filters/__tests__/__snapshots__/Filters.test.tsx.snap
@@ -75,10 +75,10 @@ exports[`Filters component > matches the snapshot with more than one active filt
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-njhac4-MuiNotchedOutlined-root"
+              className="css-yjsfm1"
             >
               <span>
                 Single Filter Field
@@ -161,10 +161,10 @@ exports[`Filters component > matches the snapshot with more than one active filt
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-njhac4-MuiNotchedOutlined-root"
+              className="css-yjsfm1"
             >
               <span>
                 Numeric Field
@@ -179,7 +179,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-jw1jwv-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
         label="Multiple Filter Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -223,7 +223,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -261,10 +261,10 @@ exports[`Filters component > matches the snapshot with more than one active filt
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-njhac4-MuiNotchedOutlined-root"
+                className="css-yjsfm1"
               >
                 <span>
                   Multiple Filter Field
@@ -280,7 +280,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1y8r37a-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
         label="Autocomplete Single Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -324,7 +324,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -362,10 +362,10 @@ exports[`Filters component > matches the snapshot with more than one active filt
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-njhac4-MuiNotchedOutlined-root"
+                className="css-yjsfm1"
               >
                 <span>
                   Autocomplete Single Field
@@ -387,7 +387,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
       className="MuiStack-root css-1xvxq01-MuiStack-root"
     >
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-s4nqld-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-10a9dc7-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -422,7 +422,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
         </svg>
       </div>
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-s4nqld-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-10a9dc7-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -457,7 +457,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
         </svg>
       </div>
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-s4nqld-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-10a9dc7-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -492,7 +492,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
         </svg>
       </div>
       <button
-        className="MuiButtonBase-root MuiButton-root MuiButton-naked MuiButton-nakedPrimary MuiButton-sizeSmall MuiButton-nakedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-naked MuiButton-nakedPrimary MuiButton-sizeSmall MuiButton-nakedSizeSmall MuiButton-colorPrimary css-wrzsdx-MuiButtonBase-root-MuiButton-root"
+        className="MuiButtonBase-root MuiButton-root MuiButton-naked MuiButton-nakedPrimary MuiButton-sizeSmall MuiButton-nakedSizeSmall MuiButton-root MuiButton-naked MuiButton-nakedPrimary MuiButton-sizeSmall MuiButton-nakedSizeSmall css-wrzsdx-MuiButtonBase-root-MuiButton-root"
         disabled={false}
         onBlur={[Function]}
         onClick={[Function]}
@@ -592,10 +592,10 @@ exports[`Filters component > matches the snapshot with more than one active filt
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-njhac4-MuiNotchedOutlined-root"
+              className="css-yjsfm1"
             >
               <span>
                 Single Filter Field
@@ -678,10 +678,10 @@ exports[`Filters component > matches the snapshot with more than one active filt
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-njhac4-MuiNotchedOutlined-root"
+              className="css-yjsfm1"
             >
               <span>
                 Numeric Field
@@ -696,7 +696,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-jw1jwv-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
         label="Multiple Filter Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -740,7 +740,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -778,10 +778,10 @@ exports[`Filters component > matches the snapshot with more than one active filt
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-njhac4-MuiNotchedOutlined-root"
+                className="css-yjsfm1"
               >
                 <span>
                   Multiple Filter Field
@@ -797,7 +797,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1y8r37a-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
         label="Autocomplete Single Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -841,7 +841,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -879,10 +879,10 @@ exports[`Filters component > matches the snapshot with more than one active filt
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-njhac4-MuiNotchedOutlined-root"
+                className="css-yjsfm1"
               >
                 <span>
                   Autocomplete Single Field
@@ -904,7 +904,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
       className="MuiStack-root css-1xvxq01-MuiStack-root"
     >
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-s4nqld-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-10a9dc7-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -939,7 +939,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
         </svg>
       </div>
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-s4nqld-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-10a9dc7-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -974,7 +974,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
         </svg>
       </div>
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-s4nqld-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-10a9dc7-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -1009,7 +1009,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
         </svg>
       </div>
       <button
-        className="MuiButtonBase-root MuiButton-root MuiButton-naked MuiButton-nakedPrimary MuiButton-sizeSmall MuiButton-nakedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-naked MuiButton-nakedPrimary MuiButton-sizeSmall MuiButton-nakedSizeSmall MuiButton-colorPrimary css-wrzsdx-MuiButtonBase-root-MuiButton-root"
+        className="MuiButtonBase-root MuiButton-root MuiButton-naked MuiButton-nakedPrimary MuiButton-sizeSmall MuiButton-nakedSizeSmall MuiButton-root MuiButton-naked MuiButton-nakedPrimary MuiButton-sizeSmall MuiButton-nakedSizeSmall css-wrzsdx-MuiButtonBase-root-MuiButton-root"
         disabled={false}
         onBlur={[Function]}
         onClick={[Function]}
@@ -1112,10 +1112,10 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-njhac4-MuiNotchedOutlined-root"
+              className="css-yjsfm1"
             >
               <span>
                 Single Filter Field
@@ -1198,10 +1198,10 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-njhac4-MuiNotchedOutlined-root"
+              className="css-yjsfm1"
             >
               <span>
                 Numeric Field
@@ -1216,7 +1216,7 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-jw1jwv-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
         label="Multiple Filter Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -1260,7 +1260,7 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -1301,10 +1301,10 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-njhac4-MuiNotchedOutlined-root"
+                className="css-yjsfm1"
               >
                 <span>
                   Multiple Filter Field
@@ -1320,7 +1320,7 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1y8r37a-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
         label="Autocomplete Single Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -1364,7 +1364,7 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -1405,10 +1405,10 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-njhac4-MuiNotchedOutlined-root"
+                className="css-yjsfm1"
               >
                 <span>
                   Autocomplete Single Field
@@ -1430,7 +1430,7 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
       className="MuiStack-root css-1xvxq01-MuiStack-root"
     >
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-s4nqld-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-10a9dc7-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -1544,10 +1544,10 @@ exports[`Filters component > matches the snapshot with one active filter and a r
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-njhac4-MuiNotchedOutlined-root"
+              className="css-yjsfm1"
             >
               <span>
                 Single Filter Field
@@ -1630,10 +1630,10 @@ exports[`Filters component > matches the snapshot with one active filter and a r
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-njhac4-MuiNotchedOutlined-root"
+              className="css-yjsfm1"
             >
               <span>
                 Numeric Field
@@ -1648,7 +1648,7 @@ exports[`Filters component > matches the snapshot with one active filter and a r
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-jw1jwv-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
         label="Multiple Filter Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -1692,7 +1692,7 @@ exports[`Filters component > matches the snapshot with one active filter and a r
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -1733,10 +1733,10 @@ exports[`Filters component > matches the snapshot with one active filter and a r
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-njhac4-MuiNotchedOutlined-root"
+                className="css-yjsfm1"
               >
                 <span>
                   Multiple Filter Field
@@ -1752,7 +1752,7 @@ exports[`Filters component > matches the snapshot with one active filter and a r
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1y8r37a-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
         label="Autocomplete Single Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -1796,7 +1796,7 @@ exports[`Filters component > matches the snapshot with one active filter and a r
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -1837,10 +1837,10 @@ exports[`Filters component > matches the snapshot with one active filter and a r
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-njhac4-MuiNotchedOutlined-root"
+                className="css-yjsfm1"
               >
                 <span>
                   Autocomplete Single Field
@@ -1862,7 +1862,7 @@ exports[`Filters component > matches the snapshot with one active filter and a r
       className="MuiStack-root css-1xvxq01-MuiStack-root"
     >
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-s4nqld-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-10a9dc7-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -1979,10 +1979,10 @@ exports[`Filters component > matches the snapshot without active filters 1`] = `
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-njhac4-MuiNotchedOutlined-root"
+              className="css-yjsfm1"
             >
               <span>
                 Single Filter Field
@@ -2065,10 +2065,10 @@ exports[`Filters component > matches the snapshot without active filters 1`] = `
           </button>
           <fieldset
             aria-hidden={true}
-            className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+            className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="css-njhac4-MuiNotchedOutlined-root"
+              className="css-yjsfm1"
             >
               <span>
                 Numeric Field
@@ -2083,7 +2083,7 @@ exports[`Filters component > matches the snapshot without active filters 1`] = `
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-jw1jwv-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
         label="Multiple Filter Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -2127,7 +2127,7 @@ exports[`Filters component > matches the snapshot without active filters 1`] = `
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -2165,10 +2165,10 @@ exports[`Filters component > matches the snapshot without active filters 1`] = `
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-njhac4-MuiNotchedOutlined-root"
+                className="css-yjsfm1"
               >
                 <span>
                   Multiple Filter Field
@@ -2184,7 +2184,7 @@ exports[`Filters component > matches the snapshot without active filters 1`] = `
     >
       <div
         aria-owns={null}
-        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1y8r37a-MuiAutocomplete-root"
+        className="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1xnbq41-MuiAutocomplete-root"
         label="Autocomplete Single Field"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -2228,7 +2228,7 @@ exports[`Filters component > matches the snapshot without active filters 1`] = `
               value=""
             />
             <div
-              className="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+              className="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
             >
               <button
                 aria-label="Open"
@@ -2266,10 +2266,10 @@ exports[`Filters component > matches the snapshot without active filters 1`] = `
             </div>
             <fieldset
               aria-hidden={true}
-              className="MuiOutlinedInput-notchedOutline css-r01yff-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
+              className="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="css-njhac4-MuiNotchedOutlined-root"
+                className="css-yjsfm1"
               >
                 <span>
                   Autocomplete Single Field
diff --git a/src/features/pagination/__tests__/Pagination.test.tsx b/src/features/pagination/__tests__/Pagination.test.tsx
index e58b77a..54a736e 100644
--- a/src/features/pagination/__tests__/Pagination.test.tsx
+++ b/src/features/pagination/__tests__/Pagination.test.tsx
@@ -49,17 +49,16 @@ describe('Pagination component', () => {
       expect(screen).toBeDefined()
     })
 
-    it('Should be available [10,24,36] as rows per page as default options', async () => {
+    it.only('Should be available [10,24,36] as rows per page as default options', async () => {
       const screen = render(<PaginationExample withRowsPerPage />)
-      const selectElement = screen.getByTestId('rows-per-page-select')
-      const selectButton = within(selectElement).getByRole('combobox')
-
-      screen.debug(selectButton)
 
-      expect(selectElement).toBeDefined()
+      const selectElement = screen.getByTestId('rows-per-page-select')
+      const selectButton = within(selectElement).getByRole('button')
       await userEvent.click(selectButton)
 
       await waitFor(() => {
+        // screen.debug()
+
         const getOptions = screen.getAllByRole('option')
         expect(getOptions).toHaveLength(3)
 

From 43bff3360211f887786c18af3fd347b64595c417 Mon Sep 17 00:00:00 2001
From: borgesis95 <salvatore.borgesi@pagopa.it>
Date: Thu, 26 Mar 2026 11:32:10 +0100
Subject: [PATCH 17/20] test: removed only

---
 src/features/pagination/__tests__/Pagination.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/pagination/__tests__/Pagination.test.tsx b/src/features/pagination/__tests__/Pagination.test.tsx
index 54a736e..52dd97a 100644
--- a/src/features/pagination/__tests__/Pagination.test.tsx
+++ b/src/features/pagination/__tests__/Pagination.test.tsx
@@ -49,7 +49,7 @@ describe('Pagination component', () => {
       expect(screen).toBeDefined()
     })
 
-    it.only('Should be available [10,24,36] as rows per page as default options', async () => {
+    it('Should be available [10,24,36] as rows per page as default options', async () => {
       const screen = render(<PaginationExample withRowsPerPage />)
 
       const selectElement = screen.getByTestId('rows-per-page-select')

From b6d248c9794a7fa1e0682e7e2a98f22481e41541 Mon Sep 17 00:00:00 2001
From: borgesis95 <salvatore.borgesi@pagopa.it>
Date: Thu, 26 Mar 2026 17:40:30 +0100
Subject: [PATCH 18/20] refactor: copilot error fixing

---
 .../__snapshots__/Filters.test.tsx.snap       | 16 +++++-----
 .../filters/__tests__/filter.utils.test.ts    |  1 +
 .../filters/components/ActiveFiltersChips.tsx |  6 ++--
 src/features/filters/components/Filters.tsx   |  4 +--
 src/features/filters/filters.utils.ts         | 29 +++++++++----------
 src/features/filters/hooks/useFilters.ts      |  8 +----
 .../pagination/__tests__/Pagination.test.tsx  |  2 --
 7 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/src/features/filters/__tests__/__snapshots__/Filters.test.tsx.snap b/src/features/filters/__tests__/__snapshots__/Filters.test.tsx.snap
index 4f07f2f..9e67153 100644
--- a/src/features/filters/__tests__/__snapshots__/Filters.test.tsx.snap
+++ b/src/features/filters/__tests__/__snapshots__/Filters.test.tsx.snap
@@ -387,7 +387,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
       className="MuiStack-root css-1xvxq01-MuiStack-root"
     >
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-10a9dc7-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-6yf97z-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -422,7 +422,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
         </svg>
       </div>
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-10a9dc7-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-6yf97z-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -457,7 +457,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
         </svg>
       </div>
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-10a9dc7-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-6yf97z-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -904,7 +904,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
       className="MuiStack-root css-1xvxq01-MuiStack-root"
     >
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-10a9dc7-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-6yf97z-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -939,7 +939,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
         </svg>
       </div>
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-10a9dc7-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-6yf97z-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -974,7 +974,7 @@ exports[`Filters component > matches the snapshot with more than one active filt
         </svg>
       </div>
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-10a9dc7-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-6yf97z-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -1430,7 +1430,7 @@ exports[`Filters component > matches the snapshot with one active filter 1`] = `
       className="MuiStack-root css-1xvxq01-MuiStack-root"
     >
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-10a9dc7-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-6yf97z-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
@@ -1862,7 +1862,7 @@ exports[`Filters component > matches the snapshot with one active filter and a r
       className="MuiStack-root css-1xvxq01-MuiStack-root"
     >
       <div
-        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-10a9dc7-MuiButtonBase-root-MuiChip-root"
+        className="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-filledDefault css-6yf97z-MuiButtonBase-root-MuiChip-root"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onDragLeave={[Function]}
diff --git a/src/features/filters/__tests__/filter.utils.test.ts b/src/features/filters/__tests__/filter.utils.test.ts
index 2ca393f..f51e0a9 100644
--- a/src/features/filters/__tests__/filter.utils.test.ts
+++ b/src/features/filters/__tests__/filter.utils.test.ts
@@ -45,6 +45,7 @@ describe('getFiltersFieldsDefaultValue testing', () => {
     const result = getFiltersFieldsDefaultValue(fieldMocks)
 
     expect(result).toEqual({
+      'autocomplete-single-field': null,
       'datepicker-field': null,
       'single-field': '',
       'multiple-field': [],
diff --git a/src/features/filters/components/ActiveFiltersChips.tsx b/src/features/filters/components/ActiveFiltersChips.tsx
index 0a71cbb..8cf2e2c 100644
--- a/src/features/filters/components/ActiveFiltersChips.tsx
+++ b/src/features/filters/components/ActiveFiltersChips.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { Button, Chip, Divider, Stack } from '@mui/material'
 import type { ActiveFilters, FilterHandler } from '../filters.types'
 import { getLocalizedValue } from '../../../utils/common.utils'
+import { blue } from '@mui/material/colors'
 
 type ActiveFilterChipsProps = {
   activeFilters: ActiveFilters
@@ -13,9 +14,8 @@ type ActiveFilterChipsProps = {
 
 const chipFocusStyles = {
   '&.Mui-focusVisible': {
-    boxShadow: '0px 0px 8px 2px rgba(25, 118, 210, 0.3)',
-    transform: 'scale(1.05)',
-    transition: 'transform 0.2s ease-in-out',
+    outline: `2px solid ${blue[400]}`,
+    outlineOffset: '1px',
   },
 }
 
diff --git a/src/features/filters/components/Filters.tsx b/src/features/filters/components/Filters.tsx
index 5bf4b55..5ad4cf4 100644
--- a/src/features/filters/components/Filters.tsx
+++ b/src/features/filters/components/Filters.tsx
@@ -47,14 +47,14 @@ export const Filters: React.FC<FiltersProps> = ({
         fieldValue.filter(({ value: v }) => v !== value)
       )
     } else {
-      const defaultValues = getFiltersFieldsDefaultValue(fields, hasSubmitButton)
+      const defaultValues = getFiltersFieldsDefaultValue(fields)
       handleFieldsValuesChange(filterKey, defaultValues[filterKey])
     }
     onRemoveActiveFilter(type, filterKey, value)
   }
 
   const handleResetActiveFilters = () => {
-    setFieldsValues(getFiltersFieldsDefaultValue(fields, hasSubmitButton))
+    setFieldsValues(getFiltersFieldsDefaultValue(fields))
     onResetActiveFilters()
   }
 
diff --git a/src/features/filters/filters.utils.ts b/src/features/filters/filters.utils.ts
index 6946ae8..e18b5dc 100644
--- a/src/features/filters/filters.utils.ts
+++ b/src/features/filters/filters.utils.ts
@@ -8,23 +8,20 @@ import type {
 } from './filters.types'
 
 /** Map passed fields options to the field state default value */
-export function getFiltersFieldsDefaultValue(
-  fields: FilterFields,
-  hasSubmitButton?: boolean
-): FilterFieldsValues {
-  return fields.reduce((prev, field) => {
-    if (field.type === 'autocomplete-multiple') {
-      return { ...prev, [field.name]: [] }
-    }
-    if (field.type === 'autocomplete-single') {
-      if (hasSubmitButton) return { ...prev, [field.name]: null }
-      // autocomplete single has no need to be in the fields state when no submit button
-      return prev
-    }
-    if (field.type === 'datepicker') {
-      return { ...prev, [field.name]: null }
+export function getFiltersFieldsDefaultValue(fields: FilterFields): FilterFieldsValues {
+  return fields.reduce<FilterFieldsValues>((acc, field) => {
+    switch (field.type) {
+      case 'autocomplete-multiple':
+        acc[field.name] = []
+        break
+      case 'autocomplete-single':
+      case 'datepicker':
+        acc[field.name] = null
+        break
+      default:
+        acc[field.name] = ''
     }
-    return { ...prev, [field.name]: '' }
+    return acc
   }, {})
 }
 
diff --git a/src/features/filters/hooks/useFilters.ts b/src/features/filters/hooks/useFilters.ts
index 3d0aab9..e24eeb1 100644
--- a/src/features/filters/hooks/useFilters.ts
+++ b/src/features/filters/hooks/useFilters.ts
@@ -131,8 +131,6 @@ export function useFilters<TFiltersParams extends FiltersParams>(
   const onSetActiveFilters = React.useCallback<FiltersHandler>(
     (fields, fieldsValues) => {
       setSearchParams((searchParams) => {
-        let hasChanges = false
-
         fields.forEach((field) => {
           const { type, name: filterKey } = field
           const value = fieldsValues[filterKey]
@@ -141,14 +139,10 @@ export function useFilters<TFiltersParams extends FiltersParams>(
             searchParams.delete(filterKey)
           } else {
             setFilterParam(searchParams, type, filterKey, value)
-            hasChanges = true
           }
         })
 
-        if (hasChanges) {
-          searchParams.delete('offset')
-        }
-
+        searchParams.delete('offset')
         return searchParams
       })
     },
diff --git a/src/features/pagination/__tests__/Pagination.test.tsx b/src/features/pagination/__tests__/Pagination.test.tsx
index 52dd97a..2fe3fac 100644
--- a/src/features/pagination/__tests__/Pagination.test.tsx
+++ b/src/features/pagination/__tests__/Pagination.test.tsx
@@ -57,8 +57,6 @@ describe('Pagination component', () => {
       await userEvent.click(selectButton)
 
       await waitFor(() => {
-        // screen.debug()
-
         const getOptions = screen.getAllByRole('option')
         expect(getOptions).toHaveLength(3)
 

From e937e8d78b5347c09384cb6516e9459e114e46e4 Mon Sep 17 00:00:00 2001
From: Alepazz <alessio.pazzani@gmail.com>
Date: Tue, 31 Mar 2026 12:08:23 +0200
Subject: [PATCH 19/20] test: add hasSubmitButton flow test coverage (PIN-7358)

---
 .../filters/__tests__/Filters.test.tsx        | 148 ++++++++++++++++++
 1 file changed, 148 insertions(+)

diff --git a/src/features/filters/__tests__/Filters.test.tsx b/src/features/filters/__tests__/Filters.test.tsx
index fd9763e..9792cac 100644
--- a/src/features/filters/__tests__/Filters.test.tsx
+++ b/src/features/filters/__tests__/Filters.test.tsx
@@ -243,3 +243,151 @@ describe('Filters component', () => {
     expect(onResetActiveFilters).toBeCalled()
   })
 })
+
+describe('Filters component with hasSubmitButton', () => {
+  it('should render "Filtra" and "Annulla filtri" buttons', () => {
+    const screen = renderWithRouter(
+      <Filters
+        fields={fieldMocks}
+        activeFilters={[]}
+        onSetActiveFilters={vi.fn()}
+        onChangeActiveFilter={vi.fn()}
+        onRemoveActiveFilter={vi.fn()}
+        onResetActiveFilters={vi.fn()}
+        hasSubmitButton
+      />
+    )
+
+    expect(screen.getByRole('button', { name: 'Filtra' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Annulla filtri' })).toBeInTheDocument()
+  })
+
+  it('should not render submit buttons when hasSubmitButton is not set', () => {
+    const screen = renderWithRouter(
+      <Filters
+        fields={fieldMocks}
+        activeFilters={[]}
+        onSetActiveFilters={vi.fn()}
+        onChangeActiveFilter={vi.fn()}
+        onRemoveActiveFilter={vi.fn()}
+        onResetActiveFilters={vi.fn()}
+      />
+    )
+
+    expect(screen.queryByRole('button', { name: 'Filtra' })).not.toBeInTheDocument()
+  })
+
+  it('should not apply filters immediately when typing in a freetext field', async () => {
+    const user = userEvent.setup()
+    const onChangeActiveFilterFn = vi.fn()
+
+    const screen = renderWithRouter(
+      <Filters
+        fields={fieldMocks}
+        activeFilters={[]}
+        onSetActiveFilters={vi.fn()}
+        onChangeActiveFilter={onChangeActiveFilterFn}
+        onRemoveActiveFilter={vi.fn()}
+        onResetActiveFilters={vi.fn()}
+        hasSubmitButton
+      />
+    )
+
+    const singleFilterField = screen.getByLabelText('Single Filter Field') as HTMLInputElement
+    await user.type(singleFilterField, 'test-value')
+    expect(singleFilterField.value).toBe('test-value')
+    expect(onChangeActiveFilterFn).not.toHaveBeenCalled()
+  })
+
+  it('should not apply filters on Enter key in a freetext field', async () => {
+    const user = userEvent.setup()
+    const onChangeActiveFilterFn = vi.fn()
+
+    const screen = renderWithRouter(
+      <Filters
+        fields={fieldMocks}
+        activeFilters={[]}
+        onSetActiveFilters={vi.fn()}
+        onChangeActiveFilter={onChangeActiveFilterFn}
+        onRemoveActiveFilter={vi.fn()}
+        onResetActiveFilters={vi.fn()}
+        hasSubmitButton
+      />
+    )
+
+    const singleFilterField = screen.getByLabelText('Single Filter Field') as HTMLInputElement
+    await user.type(singleFilterField, 'test-value{enter}')
+    expect(onChangeActiveFilterFn).not.toHaveBeenCalled()
+  })
+
+  it('should not render search icon in freetext fields', () => {
+    const screen = renderWithRouter(
+      <Filters
+        fields={fieldMocks}
+        activeFilters={[]}
+        onSetActiveFilters={vi.fn()}
+        onChangeActiveFilter={vi.fn()}
+        onRemoveActiveFilter={vi.fn()}
+        onResetActiveFilters={vi.fn()}
+        hasSubmitButton
+      />
+    )
+
+    expect(screen.queryByLabelText('Filtra')).not.toBeInTheDocument()
+  })
+
+  it('should call onSetActiveFilters with all field values when clicking "Filtra"', async () => {
+    const user = userEvent.setup()
+    const onSetActiveFiltersFn = vi.fn()
+
+    const screen = renderWithRouter(
+      <Filters
+        fields={fieldMocks}
+        activeFilters={[]}
+        onSetActiveFilters={onSetActiveFiltersFn}
+        onChangeActiveFilter={vi.fn()}
+        onRemoveActiveFilter={vi.fn()}
+        onResetActiveFilters={vi.fn()}
+        hasSubmitButton
+      />
+    )
+
+    const singleFilterField = screen.getByLabelText('Single Filter Field') as HTMLInputElement
+    await user.type(singleFilterField, 'test-value')
+
+    const submitButton = screen.getByRole('button', { name: 'Filtra' })
+    await user.click(submitButton)
+
+    expect(onSetActiveFiltersFn).toHaveBeenCalledWith(
+      fieldMocks,
+      expect.objectContaining({ 'single-field': 'test-value' })
+    )
+  })
+
+  it('should reset fields and call onResetActiveFilters when clicking "Annulla filtri"', async () => {
+    const user = userEvent.setup()
+    const onResetActiveFiltersFn = vi.fn()
+
+    const screen = renderWithRouter(
+      <Filters
+        fields={fieldMocks}
+        activeFilters={[]}
+        onSetActiveFilters={vi.fn()}
+        onChangeActiveFilter={vi.fn()}
+        onRemoveActiveFilter={vi.fn()}
+        onResetActiveFilters={onResetActiveFiltersFn}
+        hasSubmitButton
+      />
+    )
+
+    const singleFilterField = screen.getByLabelText('Single Filter Field') as HTMLInputElement
+    await user.type(singleFilterField, 'something')
+    expect(singleFilterField.value).toBe('something')
+
+    const cancelButton = screen.getByRole('button', { name: 'Annulla filtri' })
+    await user.click(cancelButton)
+
+    expect(onResetActiveFiltersFn).toHaveBeenCalled()
+    expect(singleFilterField.value).toBe('')
+  })
+})

From 8211698c97a33bf8d8237cba2f556a83a518d561 Mon Sep 17 00:00:00 2001
From: Alepazz <alessio.pazzani@gmail.com>
Date: Wed, 1 Apr 2026 14:31:07 +0200
Subject: [PATCH 20/20] test: add hasSubmitButton integration tests (PIN-9625)

---
 .../__tests__/FiltersIntegration.test.tsx     | 155 ++++++++++++++++++
 1 file changed, 155 insertions(+)
 create mode 100644 src/features/filters/__tests__/FiltersIntegration.test.tsx

diff --git a/src/features/filters/__tests__/FiltersIntegration.test.tsx b/src/features/filters/__tests__/FiltersIntegration.test.tsx
new file mode 100644
index 0000000..a81793f
--- /dev/null
+++ b/src/features/filters/__tests__/FiltersIntegration.test.tsx
@@ -0,0 +1,155 @@
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+import userEvent from '@testing-library/user-event'
+import { render, screen, waitFor } from '@testing-library/react'
+import { MemoryRouter, Route, Routes, useSearchParams } from 'react-router-dom'
+import { Filters } from '../components/Filters'
+import { useFilters } from '../hooks/useFilters'
+import type { FilterFields, FiltersParams } from '../filters.types'
+
+const fieldMocks: FilterFields = [
+  { name: 'q', type: 'freetext', label: 'Name' },
+  {
+    name: 'status',
+    type: 'autocomplete-multiple',
+    options: [
+      { label: 'Active', value: 'active' },
+      { label: 'Suspended', value: 'suspended' },
+    ],
+    label: 'Status',
+  },
+]
+
+/**
+ * Integration wrapper that wires useFilters + Filters together,
+ * matching the real usage pattern in the frontend.
+ * Includes a hidden element exposing current URL search params for assertions.
+ */
+const FiltersWrapper: React.FC<{ hasSubmitButton?: boolean }> = ({ hasSubmitButton }) => {
+  const { filtersParams: _filtersParams, ...filtersHandlers } =
+    useFilters<FiltersParams>(fieldMocks)
+  const [searchParams] = useSearchParams()
+  return (
+    <>
+      <Filters {...filtersHandlers} hasSubmitButton={hasSubmitButton} />
+      <div data-testid="search-params">{searchParams.toString()}</div>
+    </>
+  )
+}
+
+function renderFiltersWrapper(hasSubmitButton = true, initialSearch?: string) {
+  const initialEntries = initialSearch ? [`/?${initialSearch}`] : ['/']
+  return render(
+    <MemoryRouter initialEntries={initialEntries}>
+      <Routes>
+        <Route path="*" element={<FiltersWrapper hasSubmitButton={hasSubmitButton} />} />
+      </Routes>
+    </MemoryRouter>
+  )
+}
+
+function getSearchParams(): string {
+  return screen.getByTestId('search-params').textContent ?? ''
+}
+
+describe('Filters integration with hasSubmitButton', () => {
+  it('should have "Filtra" and "Annulla filtri" buttons disabled when no filter value is entered', () => {
+    renderFiltersWrapper()
+
+    expect(screen.getByRole('button', { name: 'Filtra' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Annulla filtri' })).toBeDisabled()
+  })
+
+  it('should enable buttons when a filter value is entered', async () => {
+    const user = userEvent.setup()
+    renderFiltersWrapper()
+
+    await user.type(screen.getByLabelText('Name'), 'test')
+
+    expect(screen.getByRole('button', { name: 'Filtra' })).toBeEnabled()
+    expect(screen.getByRole('button', { name: 'Annulla filtri' })).toBeEnabled()
+  })
+
+  it('should update URL params and show chip after clicking "Filtra"', async () => {
+    const user = userEvent.setup()
+    renderFiltersWrapper()
+
+    await user.type(screen.getByLabelText('Name'), 'test-value')
+    await user.click(screen.getByRole('button', { name: 'Filtra' }))
+
+    await waitFor(() => {
+      expect(getSearchParams()).toContain('q=test-value')
+    })
+
+    expect(screen.getByText('test-value')).toBeInTheDocument()
+  })
+
+  it('should remove chip and URL param when a chip is deleted', async () => {
+    const user = userEvent.setup()
+    renderFiltersWrapper(true, 'q=existing-filter')
+
+    expect(screen.getByText('existing-filter')).toBeInTheDocument()
+    expect(getSearchParams()).toContain('q=existing-filter')
+
+    await user.click(screen.getByTestId('CancelIcon'))
+
+    await waitFor(() => {
+      expect(getSearchParams()).not.toContain('q=')
+    })
+
+    expect(screen.queryByText('existing-filter')).not.toBeInTheDocument()
+  })
+
+  it('should clear URL params when clicking "Annulla filtri" after submitting a filter', async () => {
+    const user = userEvent.setup()
+    renderFiltersWrapper()
+
+    // Type and submit
+    await user.type(screen.getByLabelText('Name'), 'some-filter')
+    await user.click(screen.getByRole('button', { name: 'Filtra' }))
+
+    await waitFor(() => {
+      expect(getSearchParams()).toContain('q=some-filter')
+    })
+    expect(screen.getByText('some-filter')).toBeInTheDocument()
+
+    // Type something new to re-enable the buttons, then cancel
+    await user.type(screen.getByLabelText('Name'), 'x')
+    await user.click(screen.getByRole('button', { name: 'Annulla filtri' }))
+
+    await waitFor(() => {
+      expect(getSearchParams()).not.toContain('q=')
+    })
+
+    expect((screen.getByLabelText('Name') as HTMLInputElement).value).toBe('')
+  })
+
+  it('should delete offset from URL when submitting filters', async () => {
+    const user = userEvent.setup()
+    renderFiltersWrapper(true, 'offset=20')
+
+    expect(getSearchParams()).toContain('offset=20')
+
+    await user.type(screen.getByLabelText('Name'), 'test')
+    await user.click(screen.getByRole('button', { name: 'Filtra' }))
+
+    await waitFor(() => {
+      expect(getSearchParams()).not.toContain('offset=')
+    })
+    expect(getSearchParams()).toContain('q=test')
+  })
+
+  it('should delete offset from URL when removing a filter chip', async () => {
+    const user = userEvent.setup()
+    renderFiltersWrapper(true, 'q=test&offset=20')
+
+    expect(getSearchParams()).toContain('offset=20')
+
+    await user.click(screen.getByTestId('CancelIcon'))
+
+    await waitFor(() => {
+      expect(getSearchParams()).not.toContain('offset=')
+    })
+    expect(getSearchParams()).not.toContain('q=')
+  })
+})