bug: advance-select-tag css makes dropdown overlapping when stacked next to each other

[kimu]

What version of FlyonUI are you using?

2.4.1

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

N/A

Describe your issue

Taking the default markup and classes show in https://flyonui.com/docs/advanced-forms/advanced-select/#tags for Advance Select with tags, if more than 1 field of this type is put subsequentially in a form like in the following example

When the dropdown of the top field is open it gets overlapped by the "input" field of the following field, as in this screenshot.

The problem is due to this css entry isolation: isolate; at line 51 of advanceSelect.css, which is set when the select field is on focus.

Removing that entry solve the issue, as shown here.

Given that position:relative is already assigned to the wrapper element in the advance-select-tag class, and the dropdown has position:absolute a stacking context is already generated for these elements.
It looks like that adding isolation: isolate when the element is on focus only put the element in contentious with other advance-select-tags fields and it breaks the isolation of the stacking context. In this scenario it seems to be unecessary and causes only issues..
If anything, I think isolation: isolate should be assigned to the top most wrapper for the entire widget, which in the example is <div class="max-w-sm"> as that would make the entire widget stacking context work in isolation.
I haven't tested it though, so I cannot be sure.

If there aren't other reasons to keep isolation:isolate in the advance-select-tag css class, I already have a patch ready to remove it if you accept this issue as a bug.

This issue has been found in a dev environment, I cannot provide a link for it.

[github-actions]

Hi @kimu

Thank you for your support in helping us improve FlyonUI!

We’ve received your submission and will respond within few business days. Our team handles issues one at a time, and we’ll be reviewing yours as soon as possible.

In the meantime, any additional details or a reproducible example would be greatly appreciated and will help us resolve the issue more efficiently.

Thank you for your patience and understanding!

[PruthviPraj00]

Hello @kimu

Thanks so much for the detailed report and especially for digging into the CSS and identifying the root cause! 🙌
We really appreciate the time you took to analyze the stacking context and suggest a potential fix.

Our team fully supports any help the community can offer, and your patch would definitely be valuable for us to review. Feel free to open a pull request with your changes so we can test and incorporate them properly.

In the meantime, we’ll also examine the isolation: isolate usage and make sure the component works correctly across multiple stacked instances.

Thanks again for contributing to improving FlyonUI — your feedback is very welcome! 🚀