FileButton Reset - Suggestion to Safely Handle inputRef Reset

[jsonchou]

Dependencies check up

• [X] I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.13.2

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Chrome

Describe the bug

When using the following logic in tsx:

  const handleReset = () => {
    setFile(null)
    setImageSrc('')
    if (resetRef?.current) {
      resetRef.current?.()
    }
  }

{imageSrc ? (
  <Group pos={"relative"}>
    <Image src={imageSrc} w={36} h={36} radius={"xs"} />
    <ActionIcon variant="outline" size={'xs'} pos={'absolute'} onClick={handleReset}>
      <IconX size={12} />
    </ActionIcon>
  </Group>
) : (
  <FileButton resetRef={resetRef}>
    {(props) => (
      <ActionIcon {...props} onClick={handleUpload}>
        <IconPhoto size={24} />
      </ActionIcon>
    )}
  </FileButton>
)}

The following error is thrown when resetting the input, and handleReset have no way to skip it:

TypeError: Cannot set properties of null (setting 'value')

https://github.com/mantinedev/mantine/blob/fbcee929e0b11782092f48c1e7af2a1d1c878823/packages/%40mantine/core/src/components/FileButton/FileButton.tsx#L76

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

Modify the logic within the FileButton component to safely reset the input value only when inputRef is not null. The following code modification has been tested locally and resolves the issue:

if (inputRef?.current) {
  inputRef.current.value = "";
}

It looks like a simple and safe snippet of code.

### Self-service

- [X] I would be willing to implement a fix for this issue

[rtivital]

Fixed in 7.13.5