Clear and concise description of the problem

Currently useFileDialog accepts HTMLInputElements for custom input elements.
However this unwraps the ref which when using it as a template ref will be undefined until after mounting.
This means useFileDialog is used in the setup code then the input will always be undefined and a new input created using the document.createElement fallback.

  let input: HTMLInputElement | undefined
  if (document) {
    input = unrefElement(options.input) || document.createElement('input') // 👈 this will unref the element which will be `undefined`
    input.type = 'file'

    input.onchange = (event: Event) => {
      const result = event.target as HTMLInputElement
      files.value = result.files
      changeTrigger(files.value)
    }

    input.oncancel = () => {
      cancelTrigger()
    }
  }

Suggested solution

Allow the custom input to be MaybeElementRef<HTMLInputElement | undefined> and watch for changes instead

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.