shipshapecode / shepherd

Guide your users through a tour of your app
https://shepherdjs.dev
Other
13.04k stars 647 forks source link

Can't use FloutingUI autoPlacement #2583

Closed sirmspencer closed 1 week ago

sirmspencer commented 9 months ago

Shepherd adds flip and shift to default options, then does a deep merge with any other options passed in. Flip and autoPlacement are not compatible so adding autoPlacement to floatingUIOptions.middleware just causes errors.

I tried not passing in a placement so shouldCenter is true, but there are side effects in other parts of the code that block floating UI all together.

You could check for something like :on "auto" to skip adding flip. autoPlacement doesn't need a placement so you can skip options.placement = attachToOptions.on; too.

https://github.com/shepherd-pro/shepherd/blob/master/src/js/utils/floating-ui.js#L169

patrikholcak commented 6 months ago

Same here, version 12.0.1, if I pass on: 'auto' the step is positioned weirdly.

Popper.js Floating UI
Screenshot 2024-05-14 at 12 04 46 Screenshot 2024-05-14 at 12 04 49

Another problem is with passing offset middleware, when clicking between steps, the step jumps to its offset. Not sure if tied to the same problem

https://github.com/shepherd-pro/shepherd/assets/72975/23be6587-3eb0-43e2-9b81-56e849b7b60b

chuckcarpenter commented 4 months ago

@patrikholcak 'auto' isn't an option for position, we just use the as noted by FUI

export type PopperPlacement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'right'
  | 'right-start'
  | 'right-end'
  | 'left'
  | 'left-start'
  | 'left-end';

Sounds like what is asked by @sirmspencer is an option to have 'auto' and then use autoPlacement middleware and omit flip.

patrikholcak commented 4 months ago

Right, so should I open another issue for my problem? I can’t upgrade because of this. 😞

sirmspencer commented 4 months ago

@patrikholcak 'auto' isn't an option for position, we just use the as noted by FUI

export type PopperPlacement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'right'
  | 'right-start'
  | 'right-end'
  | 'left'
  | 'left-start'
  | 'left-end';

Sounds like what is asked by @sirmspencer is an option to have 'auto' and then use autoPlacement middleware and omit flip.

I think so. Its been 6 months so id have to look a little deeper again.

chuckcarpenter commented 4 months ago

@patrikholcak @sirmspencer we'd be happy to also take a PR to prioritize this if you're up for it?

RobbieTheWagner commented 1 month ago

It seems like you both had a good handle on what you wanted and where to insert it into the library, so a PR would be great if you have the time!

RobbieTheWagner commented 1 month ago

@sirmspencer @patrikholcak we changed the ordering of the merging for the floatingUIOptions. Could you please see if things work better for you now?

patrikholcak commented 1 month ago

:wave: I just opened a PR for auto positions support #3009

sirmspencer commented 1 week ago

I'll take a look, thanks!

RobbieTheWagner commented 1 week ago

Closed by https://github.com/shipshapecode/shepherd/pull/3009