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