feat(ui-filedrop): add inputRef prop to make FileDrop focusable

[ToMESSKa]

Closes: INSTUI-4431

ISSUE: Filedrop input cannot be focused, it needs a inputRef prop like Select or TextInput

TEST PLAN:

• test the example below in the documentation preview
• fileDrop should accept inputRef prop
• by clicking on the Focus File Input button, the FileDrop should receive focus
• review the updated documentation and new tests

class Example extends React.Component {
  fileInputElement = null

  focusFileInput = () => {
    if (this.fileInputElement) {
      this.fileInputElement.focus()
    }
  };

  render() {
    return (
      <div>
        <FileDrop
          accept="image/*"
          onDropAccepted={([file]) => console.log(`File accepted ${file.name}`)}
          onDropRejected={([file]) => console.log(`File rejected ${file.name}`)}
          inputRef={(el) => {
            this.fileInputElement = el;
          }}
          renderLabel={
            <View as="div" padding="xx-large large" background="primary">
              <IconModuleLine size="large" />
              <Heading>Drop files here to add them to module</Heading>
              <Text color="brand">
                Drag and drop, or click to browse your computer
              </Text>
            </View>
          }
        />
        <button onClick={this.focusFileInput}>Focus File Input</button>
      </div>
    );
  }
}
render(<Example />)

[github-actions]

PR Preview Action v1.6.0
Preview removed because the pull request was closed.
2025-02-03 12:30 UTC

[matyasf]

nice work!

[joyenjoyer]

nice work Tamas