Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

File uploader rendering empty select for omitted upload source, causing error in 3rd party script #751

Open
chipit24 opened this issue Oct 17, 2024 · 0 comments

Comments

@chipit24
Copy link

chipit24 commented Oct 17, 2024

Describe the bug
In our Vue 3 app, we have the File Uploader configured with inline mode and using only local for the source list, e.g. (redacted):

<script setup lang="ts">
import * as UC from "@uploadcare/file-uploader";
import "@uploadcare/file-uploader/web/uc-file-uploader-inline.min.css";
/* ... */
if (!customElements.get("uc-file-uploader-inline")) {
  UC.defineComponents(UC);
}
/* ... */
</script>

<template>
<uc-config
  ctx-name="my-uploader"
  source-list="local"
  multiple
  confirm-upload
  remove-copyright
/>
<uc-file-uploader-inline
  ctx-name="my-uploader"
/>
<uc-upload-ctx-provider
  ctx-name="my-uploader"
/>
</template>

Despite this, I still see the components for various sources being rendered:

Screenshot 2024-10-17 at 9 08 36 AM

This is usually not a problem, but we recently added Reddit Pixel tracking to our app, and it triggers this code on the empty <select></select> rendered by the CameraSource element:

return isInput(el) ? el.value : isSelect(el) ? el.options[el.selectedIndex].text : el.textContent || ""
Screenshot 2024-10-17 at 9 10 59 AM

Which results in an error constantly being logged to the console:

Screenshot 2024-10-17 at 9 12 09 AM

This does feel a bit contrived, but I can see this potentially causing issues with other tooling / reporting (especially related to a11y). Ideally, the folks at Reddit fix their tracking script, but I'm posting here as well in case there's also a nice solution to clean things up here.

To Reproduce
Steps to reproduce the behavior:

See above ☝️

Expected behavior
I expect elements that I omit from the source list to not be rendered, or at least to not render any content (like the empty select for the camera source). I am able to get around this by replacing the element with an empty one, though:

UC.defineComponents({ ...UC, CameraSource: defineCustomElement({}) });

Screenshots
See above ☝️

Desktop (please complete the following information):

  • OS: macOS Sonoma (14.5)
  • Browser Chrome
  • Version 129

Smartphone (please complete the following information):

N/A

Additional context
N/A

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant