Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Material-ui SpeedDialAction OnClick function is not working properly

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

Tags:

2

Answers


  1. 0

    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:

    <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"}
  >
    <IconButton onClick={() => hiddenAddPhoto.current?.click()}>
      <CameraAltOutlinedIcon />
    </IconButton>
  </SpeedDialAction>
  <SpeedDialAction
    key={"receipt"}
    icon={<TextSnippetOutlinedIcon />}
    tooltipTitle={"add receipt"}
  >
    <IconButton onClick={() => hiddenAddReceipt.current?.click()}>
      <TextSnippetOutlinedIcon />
    </IconButton>
  </SpeedDialAction>
</SpeedDial>

    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.

    Login or Signup to reply.
  2. 0

    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:

    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search