I am using Popper.js to position various popovers on my page. Essentially, I am trying to display all file input fields in a small popover because the normal, ugly, non-customizable HTML file input ruins the layout of the page.
I have gotten it to work reasonably well by:
- Iterating over each
input[type=file]using JQuery and finding the associated button element, - Creating a new Popper instance for each file input using:
const popper = createPopper(buttonElement, fileInputElement, {
// Various options including a modifier that adjusts the offset of the popover
})
- Attaching a 'click' event handler to the button element that toggles the popover's visibility.
However, I noted here, in the Popper.js documentation (specifically, the "Tutorial"), that I should be destroying each Popper instance whenever the popover is hidden and reconstructed whenever a popover is displayed; that way, Popper.js is not constantly updating the position of hidden elements. But since I don't have just one popover, I don't really keep track of the Popper instances and thus, can't just call .destroy() on them.
One possible solution would be if there was a way to access the Popper instance based on the popover element (in this specific case, the input[type=file] element). Is there a way to do this? I've seen this sort of idea around the Internet sometimes; for example, one page seemed to indicate that I could do fileInputElement.popperInstance to access the Popper instance. Unfortunately, this did not work (and neither did fileInputElement._popperInstance).
Any ideas?
