@virusek391: To się wszystko bierze z tego, że próbujesz przypisać podpowiedź, wtedy kiedy jej jeszcze nie ma - i biblioteka Cię przed tym ostrzega.
To co przekazujesz do anchorEl w ogóle nie powinno być stanowe, tylko powinno być zrobione jakoś tak:
import Popover from "@mui/material/Popover";
const podpowiedzimie = <HelpIcon
color="primary"
sx={{ fontSize: 30 }}
style={{ marginLeft: "10px" }}
/>;
return <span style={{ display: "flex", alignItems: "center" }}>
<TextField
requireds="true"
id="outlined-required"
label="Imię"
value={imie}
onChange={Przypisz_Imie}
error={!!tekst_bledu_imie}
helperText={tekst_bledu_imie}
style={{ width: 420 }}
/>
{podpowiedzimie}
<Popover
sx={{pointerEvents: "none"}}
open={otworzpodpowiedzimie}
onClose={UkryjhPodpowiedzImie}
anchorEl={podpowiedzimie}
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
transformOrigin={{
vertical: "top",
horizontal: "left",
}}
disableRestoreFocus
>
<Typography sx={{ p: 1 }}>
Przykład prawidłowej formy imienia: Jan .
</Typography>
</Popover>
</span>;
Kod poglądowy!! Nie kopiuj go, on jest tylko żeby pokazać zamysł przekazywania anchorEl nie poprzez stan!
Jakieś czary w stanowe property w bibliotece to zawsze jest zły pomysł.
@virusek391: Może po prostu wpisz w google "MUI popover on icon" albo "MUI popover on help icon" i zobacz co znajdziesz?
Zrobiłem jeszcze pewien eksperyment który polegał na tym że dałem komentarz wszędzie tam gdzie występowała linijka z anchorEl={....} i ku mojemu zdziwieniu program nadal wywalał błąd związany z anchorEI. Więc szukałem dalej i okazało się że błąd wyświetla się tylko gdy komponent Dialog z paramentem open ma wartość props, natomiast gdy wstawię tam ręcznie wartość true to nie ma błędu. Oczywiście problemem teraz jest to że komponent nie ukrywa się.
<Dialog
open={props.wyswietl}
sx={{
"& .MuiDialog-container": {
"& .MuiPaper-root": {
width: "100%",
maxWidth: "500px", // Set your width here
},
},
}}
style={{zIndex:1}}
PaperProps={{
style: {
backgroundColor: "white",
boxShadow: "none",
},
}}
>
{(() => {
switch (props.tryb_pracy) {
case 1:
return <DialogTitle>DODAWANIE KONTRAHENTA:</DialogTitle>;
case 2:
return <DialogTitle>MODYFIKOWANIE KONTRAHENTA:</DialogTitle>;
default:
return <DialogTitle>DODAWANIE KONTRAHENTA:</DialogTitle>;
}
})()}
<DialogContent>
<Stack spacing={2}>
<span className="odstep_od_gory"> </span>
<span style={{ display: "flex", alignItems: "center" }}>
<TextField
requireds="true"
id="outlined-required"
label="Imię"
// maxWidth="500"
// minWidth="500"
value={imie}
onChange={Przypisz_Imie}
error={!!tekst_bledu_imie}
helperText={tekst_bledu_imie}
style={{ width: 420 }}
// onMouseEnter={handlePopoverOpen}
//onMouseLeave={handlePopoverClose}
/>
</span>
<span style={{ display: "flex", alignItems: "center" }}>
<TextField
requireds="true"
id="outlined-required"
label="Nazwisko"
onChange={Przypisz_Nazwisko}
value={nazwisko}
error={!!tekst_bledu_nazwisko}
helperText={tekst_bledu_nazwisko}
style={{ width: 420 }}
/>
</span>
<span style={{ display: "flex", alignItems: "center" }}>
<TextField
requireds="true"
id="outlined-required"
label="Numer telefonu"
onChange={Przypisz_Numer_Telefonu}
value={numertelefonu}
error={!!tekst_bledu_numer_telefonu}
helperText={tekst_bledu_numer_telefonu}
InputProps={{
startAdornment: (
<InputAdornment position="start">+48</InputAdornment>
),
}}
style={{ width: 420 }}
></TextField>
</span>
<span className="odstep_od_gory"> </span>
</Stack>
<span style={{ paddingRight: 10 }}>
{(() => {
switch (props.tryb_pracy) {
case 1:
return (
<Button
variant="contained"
onClick={przycisk_dodaj_kontrahenta}
>
ZAPISZ
</Button>
);
default:
return (
<Button
variant="contained"
onClick={przycisk_dodaj_kontrahenta}
>
ZAPISZ
</Button>
);
}
})()}
</span>
<Button variant="contained" onClick={(e) => PrzyciskAnuluj()}>
ANULUJ
</Button>
</DialogContent>
</Dialog>
