Bug fixes

src/pages/settings/components/WoL/DebouncedWolClient.tsx

@@ -15,7 +15,7 @@ import { FiTrash } from 'react-icons/fi';
 import { cardClasses, textInputClasses } from 'styles';
 import DeleteItemModal from '../Shared/DeleteItemModal';
 
-function DebouncedWolClient({ wolClient }: any) {
+function DebouncedWolClient({ wolClient, setIsOpen }: any) {
 	const { theme, handleDelete } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
@@ -23,6 +23,10 @@ function DebouncedWolClient({ wolClient }: any) {
 	const [client, setClient] = useState<any>(wolClient);
 	const [update, setUpdate] = useState({});
 	const [debounced] = useDebouncedValue(update, 1000);
+	const handleClose = () => {
+		setIsOpen(false);
+		closeModal();
+	};
 
 	useEffect(() => {
 		if (Object.keys(debounced).length) {
@@ -40,7 +44,7 @@ function DebouncedWolClient({ wolClient }: any) {
 		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
 			<DeleteItemModal
 				modalOpened={modalOpened}
-				handleClose={closeModal}
+				handleClose={handleClose}
 				title={'Delete WoL Client'}
 				body={
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -63,7 +67,7 @@ function DebouncedWolClient({ wolClient }: any) {
 								styles={{ label: { color: 'black' } }}
 								onClick={() => {
 									handleDelete(client, 'api/WolClients');
-									closeModal();
+									handleClose();
 								}}
 							>
 								Delete
@@ -71,9 +75,7 @@ function DebouncedWolClient({ wolClient }: any) {
 							<Button
 								color={'grey'}
 								styles={{ label: { color: 'black' } }}
-								onClick={() => {
-									closeModal();
-								}}
+								onClick={handleClose}
 							>
 								Cancel
 							</Button>

src/pages/settings/components/WoL/WolClients.tsx

@@ -35,6 +35,7 @@ const WolClientSettings = () => {
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
+	const [isOpen, setIsOpen] = useState(false);
 
 	const handleClose = () => {
 		setNewWolClient(defaultWolClient);
@@ -134,7 +135,12 @@ const WolClientSettings = () => {
 				<Grid columns={18} w={'75%'}>
 					{wolClients?.map((client: WolClient) => (
 						<GridCol w={'100%'} span={isMobile ? 18 : 6} key={client.id}>
-							<Popover withArrow withOverlay withinPortal={false}>
+							<Popover
+								withArrow
+								withOverlay
+								withinPortal={false}
+								closeOnClickOutside={!isOpen}
+							>
 								<Popover.Target>
 									<Group
 										onClick={(e) => {
@@ -146,7 +152,7 @@ const WolClientSettings = () => {
 									</Group>
 								</Popover.Target>
 								<Popover.Dropdown>
-									<DebouncedWolClient wolClient={client} />
+									<DebouncedWolClient wolClient={client} setIsOpen={setIsOpen} />
 								</Popover.Dropdown>
 							</Popover>
 						</GridCol>