fix : slider popover click event

This commit is contained in:
GuillaumeSD
2025-05-19 02:20:53 +02:00
parent 8a58e2aca8
commit 05b1736aa4
2 changed files with 21 additions and 18 deletions

View File

@@ -1,5 +1,6 @@
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import { import {
ClickAwayListener,
Grid2 as Grid, Grid2 as Grid,
IconButton, IconButton,
Slider as MuiSlider, Slider as MuiSlider,
@@ -9,7 +10,7 @@ import {
Typography, Typography,
TypographyProps, TypographyProps,
} from "@mui/material"; } from "@mui/material";
import { useState } from "react"; import { MouseEvent, useState } from "react";
export interface Props { export interface Props {
value: number; value: number;
@@ -36,7 +37,7 @@ export default function Slider({
}: Props) { }: Props) {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null); const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const handleOpenPopover = (event: React.MouseEvent<HTMLElement>) => { const handleOpenPopover = (event: MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
}; };
@@ -58,18 +59,20 @@ export default function Slider({
{!!infoContent && ( {!!infoContent && (
<> <>
<IconButton <ClickAwayListener onClickAway={handleClosePopover}>
size="medium" <IconButton
aria-owns={anchorEl ? "mouse-over-popover" : undefined} size="medium"
aria-haspopup="true" aria-owns={anchorEl ? "mouse-over-popover" : undefined}
onClick={handleOpenPopover} aria-haspopup="true"
onMouseEnter={handleOpenPopover} onClick={handleOpenPopover}
onMouseLeave={handleClosePopover} onMouseEnter={handleOpenPopover}
sx={{ ml: 1, padding: 0 }} onMouseLeave={handleClosePopover}
aria-label="Help about number of threads" sx={{ ml: 1, padding: 0 }}
> aria-label="Help about number of threads"
<Icon icon="mdi:info-outline" width="1.1rem" /> >
</IconButton> <Icon icon="mdi:info-outline" width="1.1rem" />
</IconButton>
</ClickAwayListener>
<Popover <Popover
id="mouse-over-popover" id="mouse-over-popover"

View File

@@ -222,10 +222,10 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
More threads means faster analysis, but only if your device More threads means faster analysis, but only if your device
can handle them, otherwise it may have the opposite effect. can handle them, otherwise it may have the opposite effect.
The estimated optimal value for your device is{" "} The estimated optimal value for your device is{" "}
{getRecommendedWorkersNb()}.<br /> {getRecommendedWorkersNb()}. Due to privacy restrictions in
Due to privacy restrictions in some browsers, this estimated some browsers, this value might be underestimated. Don't
value might be underestimated. Don't hesitate to try different hesitate to try different values to find the best one for your
values to find the best one for your device. device.
</> </>
} }
/> />