Within my react application, there is a component that utilizes the code snippet below:
<FormControlLabel
labelPlacement="top"
control={
comp?.manualInput ? (
<TextField
name="price"
type="number"
variant="standard"
value={comp.price}
onChange={handleTextValueChange}
sx={{ width: "150px" }}
/>
) : (
<Box display="flex" alignItems="center">
<TextField
name="price"
type="number"
variant="standard"
value={comp.price}
onChange={handleTextValueChange}
InputProps={{ readOnly: true }}
sx={{ width: "150px" }}
/>
<Tooltip
title={
comp.access &&
comp.access.length > 0 ? (
<Box>
{comp.comp.map((acc, index) => (
<Box key={index} sx={{ mb: 1 }}>
<strong>Type:</strong>
<br />
Id: {acc.id}
<br />
Description: {acc.description}
</Box>
))}
</Box>
) : (
"No Type"
)
}
placement="right"
arrow
>
<InfoIcon
color={
comp.access &&
comp.access.length > 0
? "success"
: "action"
}
fontSize="small"
style={{
cursor: "pointer",
marginTop: "-4rem",
}}
/>
</Tooltip>
</Box>
)
}
label="Price per Part"
/>When I hover over the info icon, the tooltip opens and displays the content of the title inside. However, I am unable to select the content by simply clicking on it. Is MUI affecting the styling? What could be missing here? I previously used a tooltip with a simple string in the title without any JSX, and I was able to select it directly. In this case, I had to include a box with JSX. I tried using
<Box sx = {{ pointerEvents: 'auto' }}>