stimulus-popover
stimulus-popover copied to clipboard
Popover still visible when using back button of browser
Dear team,
I want to express my gratitude for the outstanding components you provide. They have consistently proven to be immensely helpful in my projects. However, I have recently encountered a bug with one of your components. Whenever I use a button with a popover that links to a new page and then navigate back using the browser's back button, the popover remains active and visible. It only functions correctly if I stay on the new page.
I came across a similar issue reported on Stack Overflow regarding Bootstrap and JQuery, which can be found here.
To resolve this problem, I managed to find a solution by extending your plugin. In the provided link, they addressed the issue by utilizing the click event. I would like to suggest considering the following solution for an update to your stimulus-component, as it deactivates all popovers during page reload. The click event solves the problem if you click something but imagine your courser is on a element with a popover and you accidentally hit the back button on your mouse and then using your forward button to come back where you started. The same error will occur again as you didn't click any button/element.
The con is, if you have a lot of elements as for example in a table, then all elements will be invoked on page load which.
What are your thoughts on this? Do you believe it is worth implementing in order to enhance the functionality of your component?
Solution with a clean page load:
// app/javascript/controllers/custom_popover_controller.js
export default class extends Popover {
connect() {
super.connect()
if (this.hasCardTarget) {
this.cardTarget.remove()
}
}
}
Solution with a click event:
Just update your example with a click event which runs the hide function:
<div data-action="mouseenter->custom-popover#show mouseleave->custom-popover#hide click->custom-popover#hide">
<%= content %>
</div>
Thank you for your attention, and I look forward to hearing your response.
regards
Hey thanks a lot!
I like the first solution, could you open a PR with that? 👍