HeadlessUI hijacking inappropriate clicks

[justinhandley]

So, I have an image upload element on my page. I am trying to use a custom button to trigger the click so I can hide the actual upload form. To do that, I'm selecting the element and then clicking it.

const uploadInput = document.getElementById('ik-upload-input-345') uploadInput && uploadInput.click()

Unfortunately, this actually just opens my headlessUI dropdown menu - I have no idea why that would be the case, but the click shows on a tag in the body - data-headlessui-focus-visible - not on the element it should. If I comment out the dropdown menu, the click works as expected. How can I get around this?