Repository: shipshapecode/shepherd (language: javascript)

Issue:
Fix: FloatingUI arrow() padding
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.


Discussion / hints:
@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 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.
@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: `react-shepherd@4.2.0`, `shepherd.js@11.2.0`

Video with the arrow issue.
[shepherd-arrow-bug.webm](https://github.com/shipshapecode/shepherd/assets/22822651/1bab6666-c331-459b-a3d3-046f76fd8549)

@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. 
Thanks for the reply @chuckcarpenter. In the end I had to use completely different package so this is no longer bugging me 😅 

Fix patch:
diff --git a/shepherd.js/src/utils/floating-ui.ts b/shepherd.js/src/utils/floating-ui.ts
index dc97f46c0..bd39425ef 100644
--- a/shepherd.js/src/utils/floating-ui.ts
+++ b/shepherd.js/src/utils/floating-ui.ts
@@ -191,7 +191,12 @@ export function getFloatingUIOptions(
     );
 
     if (arrowEl) {
-      options.middleware.push(arrow({ element: arrowEl }));
+      const hasEdgeAlignment =
+        attachToOptions?.on?.includes('-start') ||
+        attachToOptions?.on?.includes('-end');
+      options.middleware.push(
+        arrow({ element: arrowEl, padding: hasEdgeAlignment ? 4 : 0 })
+      );
     }
 
     options.placement = attachToOptions.on;


Test patch: