flowbite-react
flowbite-react copied to clipboard
themesberg
Allow Floating Strategy to be Configurable for Popover
- [x] I have searched the Issues to see if this bug has already been reported
- [x] I have tested the latest version
Summary
Describe how it should work, and provide examples of the solution, which might include screenshots or code snippets.
Hello and thanks for providing this reference implementation for Flowbite. I have a use case for the Popover that is not currently covered but can easily be added.
I am using a Popover component inside of a parent which is overflow: auto set. This means the popover is cut off. See screen shot.
This is due to @floating-ui/react using position: absolute by default.
The good news is that useFloating has a strategy prop that can be passed to override this if necessary. In scenarios like mine, position: fixed is needed. I did some testing, and it works well. See screen shot.
The popover is still attached to the reference element and scrolls along with it.
Context
What are you trying to accomplish? How is your use case affected by not having this feature?
Popover should be updated to accept a strategy prop of type:
strategy?: 'absolute' | 'fixed';
This is passed to useFloating from the @floating-ui/react library.
Without this feature, popovers are cut off in parents that have overflow other than visible.
I'm happy to create a PR for this if it will help.
@sean-redteam is it supported by standard Flowbite library?
Standard Flowbite library does not not use "floating-ui"
@rluders It could be. It's using Popper which has been migrated to Floating UI. That's what this library uses.
My assumption is the strategy wasn't implemented explicitly with position: absolute. Seems like it's just using the default strategy. It's why I didn't create this issue as a bug. This is more finding a new use case for the popover that requires setting a non-default strategy.
Without this update, it won't be possible to use popovers inside elements with overflow values other than visible. That's a bit limiting.
TBH, I don't know. @sean-redteam did you tried to achieve the same result using the component-theme system? :thinking:
The styles are being added directly by Floating UI. Customizing the theme doesn't have any effect:
It's possible using !fixed which sets position: fixed !important, but that seems wrong. Floating UI already exposes a prop to configure this through its API. The more elegant solution is to add support to the component.
I see... it really seems to be an easy implementation. But, as @SutuSebastian said, it isn't supported by the default Flowbite library. I'm wondering if there is any supported case in the standard library where this behavior can be supported. Maybe @zoltanszogyenyi can help us here.
See, I'm not saying "NO"... I'm saying that this is something that first needs to exists at the standard Flowbite library, if this is somehow supported, there is no reason for us to implement it. However, if it isn't supported by the standard Flowbite, we first need to see this supported somehow there or at least not causing inconsistency between the libraries.
The standard library requires Flowbite JS for the Popover to work. The JS library is using Popper (now Floating UI). Unless I missed something, I don't believe Flowbite React uses the JS library from Flowbite. It has its own implementation; therefore, it's not something that can be added to the standard library to be picked up by this library.
Also, @SutuSebastian was just saying the standard library (JS) doesn't use Floating UI, which is technically correct since it's an older version called Popper. Floating UI = Popper v3
Relevant links: https://github.com/themesberg/flowbite/blob/main/src/components/popover/index.ts#L2 https://popper.js.org/docs/v2/