ConfirmPopup: onShow and onHide not called consistently #7786
Description
Describe the bug
As title states. I have a table that can scroll horizontally. If I open the popup from a button in that table, and scroll horizontally with shift + scroll, the popup closes with the fade out animation, but onHide is not called. My app logic then messes up its state because of that.
I've created a pull request with my proposal for a fix.
I created a computed getter/setter property, and a backing value to hold the "real value" (called _value). This backing value is both returned by the getter and set by the setter, so functionality remains the same.
But crucially, I invoke the appropriate callback in the setter, before the "real value" is set, thus keeping the previous order of operations the same (onShow or onHide called before visible is set and the dialog is in whatever state, rendered or not rendered) (no breaking changes for existing user implementations which might reference the popup html element in some way).
Then I removed all other calls to onShow and onHide, to consolidate this functionality into the setter, and to ensure consistency, so that if the popup element is rendered or not (it's v-if-ed to visible), then the appropriate callback is invoked.
Pull Request Link
Reason for not contributing a PR
- Lack of time
- Unsure how to implement the fix/feature
- Difficulty understanding the codebase
- Other
Other Reason
No response
Reproducer
https://stackblitz.com/edit/primevue-4-vite-issue-template-avwk7o29?file=src%2FApp.vue
Environment
macOS 15.5
Safari 18.5 (20621.2.5.11.8)
Vue version
3.5.16
PrimeVue version
4.3.4
Node version
22.16.0
Browser(s)
Safari 18.5 (20621.2.5.11.8)
Steps to reproduce the behavior
Make a horizontally scrollable element (make it too wide for the page) and put a ConfirmPopup trigger (target) button on the end (or wherever I guess).
Set the onShow and onHide listeners when calling confirm.require.
Open the popup by clicking on the trigger button, then scroll the container horizontally with shift + scroll. Observe how the popup disappears with a fade animation, and onHide is not called.
Expected behavior
onShow and onHide called consistently when the popup is rendered or not.