FileInput - unable to use as controlled component; unable to reset input state externally

[nateq314]

Expected Behavior

• Would expect that I can provide a FileList or similar object as a value prop to control the files externally.
• Would expect that even if not controlled, if I manually reset the input's files object to an empty FileList (using a ref, getElementById, etc.), then the component would reset to its initial state. This is highly problematic for UIs that use a modal or some other means of completing the file manipulation (upload or whatever). The modal will have a "Close" button and it is normal and expected that when the modal closes, the input should reset.

Actual Behavior

State is apparently managed internally, and the only way to reset the input is to click the "X" button. Actually it is possible to set the input's FileList object to empty manually (using the method shown in code below), but doing so leaves FileInput in an inconsistent state, as the text label still shows the name of the previously selected file, and examining internal state shows that the File object itself (referencing the previous file) is still present.

URL, screen shot, or Codepen exhibiting the issue

Steps to Reproduce

(self explanatory, also see code snippet)

Your Environment

• Grommet version: 2.36.1
• Browser Name and version: Brave Version 1.64.116 Chromium: 123.0.6312.105 (Official Build) (arm64)
• Operating System and version (desktop or mobile): MacOS Monterey (12.7)