admin管理员组

文章数量:1287504

I have a hidden file input with display: none in a form. Another button triggers a click event on the file input ref, which opens the browser's file selection dialog. Then I have an onChange event that handles the file processing after the user clicks Open/Submit on the browser's dialog.

The issue is that when the browser's dialog closes, a label then pops up under the cursor that says "Attach Media". I don't know where this is coming from. I can click on my screen to stop the label appearing, but when I do this programmatically, it still appears and I don't know why. I have tried dispatching click events to a few different areas of the page after a timeout. I have also tried blurring the input, disabling drag events on the input, and resetting the input's file value, as well as a combination of all of these. I have also tried hiding the input in a few different ways, and assigning a new key to the input element after file selection.

The only way I can stop it appearing is with manual input but I don't understand why. Here's an example of code that I have tried. If I click anywhere on this element after the dialog closes, the label doesn't appear, but this programmatic click event doesn't work for some reason.

setTimeout(() => {
  const modalElement = document.getElementById('upload-modal')
  modalElement.dispatchEvent(new MouseEvent('click', { bubbles: true }))
}, 0)

本文标签：

版权声明：本文标题：javascript - Stop "Attach Media" Popover Label from Appearing when using Hidden File Input in Chrome - Stack O 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741305243a2371328.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。