Virtual element sometimes leaves the wrapper element specified

[robertkibet]

Describe the bug
Working with virtual floating element sometimes produces strange behaviour that it leaves the specified wrapper element.

1. Bug: Sometimes the floating element moves out of the wrapper element
2. Bug: When very close to the edge, especially right border of wrapper element, the floating element also appears outside the wrapper element, instead of flipping and remaining within the borders of the wrapper element.

To Reproduce
Visit this stackblitz to test: https://stackblitz.com/edit/typescript-9f8ame?file=index.html

Expected behavior
Expectation: Floating tooltip should always remain within the wrapper element in yellow background.

Video
https://www.loom.com/share/e04daec7e919442fad589130fee08eab?sid=c627b6d0-1fc6-4253-a94a-4e17cb4e8358

[atomiks]

Thank you for the reproduction link. From what I see these aren't bugs:

Bug 1: Adding pointer-events: none to the floating element will prevent it from blocking pointer events beneath it (so the mouseleave listener can fire at all times).
Bug 2: The floating element by default can appear outside of the yellow container because it doesn't clip it. One solution is to manually specify the boundary for both middleware: shift({ boundary: wrapper }) and flip({ boundary: wrapper })

[robertkibet]

Thanks good Sir @atomiks you are a genius 🙌 🙌 🙌. It works well as expected based on your suggested solution 💪