Fix ListFilter and DateTime adornment errors

osstotalsoft · Nov 6, 2023 · d4c406f · d4c406f
1 parent d813a71
commit d4c406f
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 47 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
           )}