github-actions · GitHub

The exposed inputRef and dropzoneRef have inconsistent access patterns. inputRef is a getter returning a DOM element directly, while dropzoneRef remains a ref requiring .value access. This breaks backward compatibility and creates an inconsistent API.

View Details

Analysis

FileUpload component has inconsistent ref exposure patterns breaking API consistency

What fails: FileUpload.vue defineExpose exposes inputRef as getter returning DOM element directly, while dropzoneRef remains a ref, creating inconsistent access patterns that break established component API conventions.

How to reproduce:

<script setup>
const fileUpload = ref()
// These access patterns are inconsistent:
fileUpload.value.inputRef.focus()        // Works (direct DOM access)
fileUpload.value.dropzoneRef.value.focus() // Works (ref access)
</script>
<template>
  <UFileUpload ref="fileUpload" />
</template>

Expected behavior: Both refs should be exposed consistently. Example usage in InputKbdExample.vue shows expected pattern: input.value?.inputRef?.focus() which works with Input component but would break with FileUpload's inconsistent exposure.

Result: FileUpload breaks the established pattern used by Input, Textarea, and Select components which all expose refs directly via defineExpose({ inputRef }), while FileUpload uses a getter that bypasses the ref wrapper.

Read the original on github.com ↗