Use of ClickAwayListener instead of IconButton for closing

This commit is contained in:
Nicola Benaglia 2025-06-12 20:24:23 +02:00
parent 1d50a96d25
commit 94ad99d7e4

View File

@ -18,6 +18,8 @@ import {
CircularProgress, CircularProgress,
useTheme, useTheme,
Autocomplete, Autocomplete,
IconButton,
ClickAwayListener,
} from '@mui/material'; } from '@mui/material';
import { import {
getAddressInfo, getAddressInfo,
@ -28,7 +30,7 @@ import { getNameInfo } from '../Group/Group';
import AccountCircleIcon from '@mui/icons-material/AccountCircle'; import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import { Spacer } from '../../common/Spacer'; import { Spacer } from '../../common/Spacer';
import { formatTimestamp } from '../../utils/time'; import { formatTimestamp } from '../../utils/time';
import CloseFullscreenIcon from '@mui/icons-material/CloseFullscreen'; import CloseIcon from '@mui/icons-material/Close';
import { import {
executeEvent, executeEvent,
subscribeToEvent, subscribeToEvent,
@ -160,6 +162,7 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
return ( return (
<DrawerUserLookup open={isOpenDrawerLookup} setOpen={setIsOpenDrawerLookup}> <DrawerUserLookup open={isOpenDrawerLookup} setOpen={setIsOpenDrawerLookup}>
<ClickAwayListener onClickAway={onClose}>
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
@ -173,7 +176,6 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
sx={{ sx={{
alignItems: 'center', alignItems: 'center',
display: 'flex', display: 'flex',
flexShrink: 0,
gap: '5px', gap: '5px',
}} }}
> >
@ -197,7 +199,7 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
postProcess: 'capitalizeFirstChar', postProcess: 'capitalizeFirstChar',
})} })}
options={options} options={options}
sx={{ width: 300 }} sx={{ flexGrow: 1 }}
renderInput={(params) => ( renderInput={(params) => (
<TextField <TextField
autoFocus autoFocus
@ -214,21 +216,6 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
/> />
)} )}
/> />
<ButtonBase
sx={{
marginLeft: 'auto',
}}
onClick={() => {
onClose();
}}
>
<CloseFullscreenIcon
sx={{
color: theme.palette.text.primary,
}}
/>
</ButtonBase>
</Box> </Box>
<Box <Box
@ -521,7 +508,9 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell> <TableCell>
{t('core:sender', { postProcess: 'capitalizeFirstChar' })} {t('core:sender', {
postProcess: 'capitalizeFirstChar',
})}
</TableCell> </TableCell>
<TableCell> <TableCell>
{t('core:receiver', { {t('core:receiver', {
@ -529,7 +518,9 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
})} })}
</TableCell> </TableCell>
<TableCell> <TableCell>
{t('core:amount', { postProcess: 'capitalizeFirstChar' })} {t('core:amount', {
postProcess: 'capitalizeFirstChar',
})}
</TableCell> </TableCell>
<TableCell> <TableCell>
{t('core:time.time', { {t('core:time.time', {
@ -622,7 +613,9 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
> >
<ButtonBase <ButtonBase
onClick={() => { onClick={() => {
navigator.clipboard.writeText(payment?.recipient); navigator.clipboard.writeText(
payment?.recipient
);
}} }}
> >
{formatAddress(payment?.recipient)} {formatAddress(payment?.recipient)}
@ -643,6 +636,7 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
)} )}
</Box> </Box>
</Box> </Box>
</ClickAwayListener>
</DrawerUserLookup> </DrawerUserLookup>
); );
}; };