I put file Input trigger on material-ui SpeedDialAction but its not working
const hiddenAddReceipt = useRef<HTMLInputElement>(null);
const hiddenAddPhoto = useRef<HTMLInputElement>(null);
return (
<>
<SpeedDial
ariaLabel="SpeedDial basic example"
sx={{ position: "absolute", color: "#fb8278", zIndex: 1 }}
className={styles.addIcon}
icon={<NoteAddOutlinedIcon />}
direction={"right"}
open={speedDialOpen}
onClose={() => setSpeedDialOpen(false)}
onOpen={() => setSpeedDialOpen(true)}
>
<SpeedDialAction
key={"photo"}
icon={<CameraAltOutlinedIcon />}
tooltipTitle={"add photo"}
onClick={() => {
if (hiddenAddPhoto.current) {
hiddenAddPhoto.current.click();
}
}}
/>
<SpeedDialAction
key={"receipt"}
icon={<TextSnippetOutlinedIcon />}
tooltipTitle={"add receipt"}
onClick={() => {
if (hiddenAddReceipt.current) {
hiddenAddReceipt.current.click();
}
}}
/>
</SpeedDial>
<Button
variant="contained"
className={styles.addReceipt}
onClick={() => {
if (hiddenAddReceipt.current) {
hiddenAddReceipt.current.click();
}
}}
>
<div className={styles.logo}>
<TextSnippetOutlinedIcon />
</div>
<div className={styles.text}>Add Receipt</div>
</Button>
<input
id="hiddenAddReceiptInput"
type="file"
onChange={() => {
alert("receipt is added");
}}
ref={hiddenAddReceipt}
style={{ display: "none" }}
/>
<Button
variant="contained"
className={styles.addPhoto}
onClick={() => {
if (hiddenAddPhoto.current) {
hiddenAddPhoto.current.click();
}
}}
>
<div className={styles.logo}>
<CameraAltOutlinedIcon />
</div>
<div className={styles.text}>Add Photo</div>
</Button>
<input
id="hiddenAddPhotoInput"
type="file"
onChange={() => {
alert("photo is added");
}}
ref={hiddenAddPhoto}
style={{ display: "none" }}
/>
</>
)
when i click on "Add photo"/ "Add Rceipt" button its triggering the input properly and i tried this same thing for material-ui speedDialAction but its not working
i used alert and console.log() onCLick on speedDialAction to check and its giving proper response but its not opening the input
2
Answers
The issue might be related to the way the SpeedDialAction component is handling the click event. The SpeedDialAction might be consuming the event or not passing it down to the underlying input element.
Instead of relying on the onClick prop of SpeedDialAction to trigger the file input click, you can use the IconButton component inside the SpeedDialAction and manually handle the click event there.
You can use below code:
By wrapping the icons inside IconButton components, you have more control over the click event. This should help trigger the file input click when clicking on the icons within the SpeedDialAction.
You’re correct that the SpeedDialAction component in Material-UI does not accept a children prop. In that case, you can handle the click events inside the onClick prop of each SpeedDialAction.
Here’s a modified of your code: