shepherd icon indicating copy to clipboard operation
shepherd copied to clipboard

Fix: FloatingUI arrow() padding

Open lilyMrt opened this issue 2 years ago • 5 comments

Related to https://github.com/shipshapecode/shepherd/issues/2302

Arrow function passed through a step's middleware will have a null element, in which case the padding will not be applied. Sum up all such occurrences and pass the final padding to the arrow function with the newly added arrow element.

It allows arrow() passed from step middleware to actually be applied. Perhaps it could be cut down and done through a function passed to merge(), but I'm not familiar with that library.

Can write some tests for it, though I think this more of a bug fix for behavior that should already be working than new functionality. If not, I think the docs should be updated to specify which floatingUI options/middleware functions are accepted/work.

lilyMrt avatar Apr 04 '23 00:04 lilyMrt

@lilyMrt I appreciate you attempting to tackle this issue! I noticed something when debugging this. It seems if I resize my window, which triggers FloatingUI's autoUpdate, the arrow fixes itself and moves to the right place. I think it's a timing issue, where we need to make sure the tooltip is rendered before we call autoUpdate.

RobbieTheWagner avatar Apr 04 '23 01:04 RobbieTheWagner

@RobbieTheWagner Would it be possible to include some example steps using floatingUIOptions in the welcome.js demo site? It's particularly hard to get started with these new options and identify bugs when the source itself does not include any working examples using any of the floating UI functions. But I think you are correct, autoUpdate is being called too soon, and a few settings are not applied to the step until the page is resized.

lilyMrt avatar Apr 11 '23 04:04 lilyMrt

@RobbieTheWagner Same issue is happening to me right now. Any ideas how to force autoUpdate on demand?

The worst thing is, that sometimes arrow is placed correctly. But most of the times it is wrong. Packages: [email protected], [email protected]

Video with the arrow issue. shepherd-arrow-bug.webm

mrceperka avatar Dec 12 '23 13:12 mrceperka

@mrceperka I've noticed that myself recently as well. React package will get whatever bugs are in this main one, for sure. I'll take a look some early this week to see if I can incorporate this fix.

chuckcarpenter avatar Jan 21 '24 21:01 chuckcarpenter

Thanks for the reply @chuckcarpenter. In the end I had to use completely different package so this is no longer bugging me 😅

mrceperka avatar Jan 21 '24 21:01 mrceperka