From d4c406f8467f28853988d4b4f26d75cd7f432b5d Mon Sep 17 00:00:00 2001
From: Angelo Statescu <astatescu@totalsoft.ro>
Date: Mon, 6 Nov 2023 14:23:31 +0200
Subject: [PATCH] Fix ListFilter and DateTime adornment errors

---
 src/components/inputs/DateTime/DateTime.tsx   | 32 +++++++----
 .../inputs/DateTime/DateTimeEndAdornment.tsx  |  5 +-
 .../ListFilter/FullTextFilterEndAdornment.tsx | 56 ++++++++++++++-----
 .../inputs/ListFilter/ListFilter.tsx          | 32 +++++------
 4 files changed, 78 insertions(+), 47 deletions(-)

diff --git a/src/components/inputs/DateTime/DateTime.tsx b/src/components/inputs/DateTime/DateTime.tsx
index 98a9d78b..bf0b5632 100644
--- a/src/components/inputs/DateTime/DateTime.tsx
+++ b/src/components/inputs/DateTime/DateTime.tsx
@@ -101,21 +101,29 @@ const DateTime: React.FC<DateTimeProps> = ({
           required={required}
           error={error}
           helperText={helperText}
-          InputProps={{
-            endAdornment: (
-              <DateTimeEndAdornment
-                isClearable={internalIsClearable}
-                onClear={handleClear}
-                onOpen={handleOpen}
-                OpenPickerIcon={OpenPickerIcon}
-                disabled={disabled}
-              />
-            )
-          }}
+          endAdornment={
+            <DateTimeEndAdornment
+              isClearable={internalIsClearable}
+              onClear={handleClear}
+              onOpen={handleOpen}
+              OpenPickerIcon={OpenPickerIcon}
+              disabled={disabled}
+            />
+          }
         />
       )
     },
-    [disabled, error, handleClear, handleOpen, helperText, inputProps, required, internalIsClearable, mergedComponents.OpenPickerIcon]
+    [
+      disabled,
+      error,
+      handleClear,
+      handleOpen,
+      helperText,
+      inputProps,
+      required,
+      internalIsClearable,
+      mergedComponents.OpenPickerIcon
+    ]
   )
 
   const localeUsed = useMemo(() => localeMap[format] ?? adapterLocale ?? localeMap.ro, [format, adapterLocale])
diff --git a/src/components/inputs/DateTime/DateTimeEndAdornment.tsx b/src/components/inputs/DateTime/DateTimeEndAdornment.tsx
index 1321c64e..44de8748 100644
--- a/src/components/inputs/DateTime/DateTimeEndAdornment.tsx
+++ b/src/components/inputs/DateTime/DateTimeEndAdornment.tsx
@@ -1,12 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import InputAdornment from '@mui/material/InputAdornment'
 import { ClearSmallIcon, IconButton } from './DateTimeStyles'
 import { DateTimeEndAdornmentProps } from './types'
 
 const DateTimeEndAdornment = ({ isClearable, onClear, onOpen, OpenPickerIcon, disabled }: DateTimeEndAdornmentProps) => {
   return (
-    <InputAdornment position="end">
+    <>
       {isClearable && (
         <IconButton onClick={onClear} disabled={disabled} aria-label="Clear">
           <ClearSmallIcon />
@@ -15,7 +14,7 @@ const DateTimeEndAdornment = ({ isClearable, onClear, onOpen, OpenPickerIcon, di
       <IconButton onClick={onOpen} disabled={disabled} aria-label="Open">
         <OpenPickerIcon />
       </IconButton>
-    </InputAdornment>
+    </>
   )
 }
 
diff --git a/src/components/inputs/ListFilter/FullTextFilterEndAdornment.tsx b/src/components/inputs/ListFilter/FullTextFilterEndAdornment.tsx
index def97d8f..6a48d1c9 100644
--- a/src/components/inputs/ListFilter/FullTextFilterEndAdornment.tsx
+++ b/src/components/inputs/ListFilter/FullTextFilterEndAdornment.tsx
@@ -1,23 +1,53 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import InputAdornment from '@mui/material/InputAdornment'
 import { FullTextFilterEndAdornmentProps } from './types'
 import FilterListIcon from '@mui/icons-material/FilterList'
 import { IconButton } from '../../../components'
 
-const FullTextFilterEndAdornment = ({ localizedStrings, resetTextFilter, expandFilters, expanded, openVisibleFiltersMenu, hasChildren, hasVisibleFilters } : FullTextFilterEndAdornmentProps) => {
+const FullTextFilterEndAdornment = ({
+  localizedStrings,
+  resetTextFilter,
+  expandFilters,
+  expanded,
+  openVisibleFiltersMenu,
+  hasChildren,
+  hasVisibleFilters
+}: FullTextFilterEndAdornmentProps) => {
   return (
-  <InputAdornment position="end">
-    <IconButton size='small' type='cancel' color='transparent' aria-label='Reset Filters' aria-description={localizedStrings.ResetFilters} tooltip={localizedStrings.ResetFilters} onClick={resetTextFilter} />
-    {hasChildren && (
-      <IconButton size='small' type={expanded ? 'expandLess': 'expandMore'} color='transparent' aria-label='Show Filters' aria-description={localizedStrings.ShowFilters} tooltip={localizedStrings.ShowFilters} onClick={expandFilters} />
-    )}
-    {hasChildren && expanded && hasVisibleFilters && (
-      <IconButton size='small' color='transparent' aria-label='Visible Filters' aria-description={localizedStrings.ChooseFilters} tooltip={localizedStrings.ChooseFilters} onClick={openVisibleFiltersMenu}>
-        <FilterListIcon/>
-      </IconButton>
-    )}
-  </InputAdornment>
+    <>
+      <IconButton
+        size="small"
+        type="cancel"
+        color="transparent"
+        aria-label="Reset Filters"
+        aria-description={localizedStrings.ResetFilters}
+        tooltip={localizedStrings.ResetFilters}
+        onClick={resetTextFilter}
+      />
+      {hasChildren && (
+        <IconButton
+          size="small"
+          type={expanded ? 'expandLess' : 'expandMore'}
+          color="transparent"
+          aria-label="Show Filters"
+          aria-description={localizedStrings.ShowFilters}
+          tooltip={localizedStrings.ShowFilters}
+          onClick={expandFilters}
+        />
+      )}
+      {hasChildren && expanded && hasVisibleFilters && (
+        <IconButton
+          size="small"
+          color="transparent"
+          aria-label="Visible Filters"
+          aria-description={localizedStrings.ChooseFilters}
+          tooltip={localizedStrings.ChooseFilters}
+          onClick={openVisibleFiltersMenu}
+        >
+          <FilterListIcon />
+        </IconButton>
+      )}
+    </>
   )
 }
 
diff --git a/src/components/inputs/ListFilter/ListFilter.tsx b/src/components/inputs/ListFilter/ListFilter.tsx
index b98ff7af..5647a526 100644
--- a/src/components/inputs/ListFilter/ListFilter.tsx
+++ b/src/components/inputs/ListFilter/ListFilter.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import PropTypes from 'prop-types'
 import { TextField, Autocomplete, Button, Dialog } from '../../../components'
-import { Toolbar, Collapse, Menu, MenuItem, InputAdornment, Grid } from '@mui/material'
+import { Toolbar, Collapse, Menu, MenuItem, Grid } from '@mui/material'
 import SearchIcon from '@mui/icons-material/Search'
 import { ListFilterProps, UserPreference } from './types'
 import UserPreferencesModalContent from './UserPreferencesModalContent'
@@ -224,24 +224,18 @@ const ListFilter: React.FC<ListFilterProps> = ({
                   maxLength: searchTextMaxLength,
                   placeholder: searchPlaceholder
                 }}
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <SearchIcon />
-                    </InputAdornment>
-                  ),
-                  endAdornment: (
-                    <FullTextFilterEndAdornment
-                      localizedStrings={localizedStrings}
-                      resetTextFilter={resetTextFilter}
-                      expandFilters={expandFilters}
-                      expanded={expanded}
-                      openVisibleFiltersMenu={openVisibleFiltersMenu}
-                      hasChildren={hasChildren}
-                      hasVisibleFilters={hasVisibleFilters}
-                    />
-                  )
-                }}
+                startAdornment={<SearchIcon />}
+                endAdornment={
+                  <FullTextFilterEndAdornment
+                    localizedStrings={localizedStrings}
+                    resetTextFilter={resetTextFilter}
+                    expandFilters={expandFilters}
+                    expanded={expanded}
+                    openVisibleFiltersMenu={openVisibleFiltersMenu}
+                    hasChildren={hasChildren}
+                    hasVisibleFilters={hasVisibleFilters}
+                  />
+                }
               />
             </Grid>
           )}