fast
fast copied to clipboard
microsoft
fix: Can't use fluent-select inside fluent-data-grid
🐛 Bug Report
As the title says. I have tried to get this working with the Blazor components, but could not get it to work. Is seems to be an issue with the z-index...
💻 Repro or Code Sample
🤔 Expected Behavior
Using a fluent-select inside a fluent-data-grid should just work OOTB
😯 Current Behavior
The list does not show
💁 Possible Solution
🔦 Context
🌍 Your Environment
- OS & Device: Windows
- Browser Microsoft Edge 106
@chrisdholt I think we've got one or more issues that capture this already. Do you recall? I think it's a recurring theme. Is this something we can address in vNext of foundation? Even though it's a "fix" to vCurrent, it seems it could involve a breaking change. In the meantime do we have any work-arounds we could document?
@chrisdholt I think we've got one or more issues that capture this already. Do you recall? I think it's a recurring theme. Is this something we can address in vNext of foundation? Even though it's a "fix" to vCurrent, it seems it could involve a breaking change. In the meantime do we have any work-arounds we could document?
There's a lot of background here actually. I'll link to this comment first and foremost: https://github.com/microsoft/fast/issues/5363#issuecomment-961312682.
This is a stacking context and positioning issue. I think if we want to be accurate, the title of this is likely, "Can't use fluent-select inside fluent-data-grid without CSS".
The underlying issue here where the expectation is set is that the native <select></select> is always rendered to the top layer. Unfortunately, until recently there was no mechanism for component libraries to do the same without essentially absolute/fixed positioning and whatnot. From a component standpoint, it's hard to manage this layering because without an API like the new incoming Popup API, it's all a matter of context, stacking context, etc. Thankfully we're getting close to where we'll have a native approach to this. In the meantime, @radium-v is taking a fresh look at alternatives to floating-ui, potentially providing a very simple positioning implementation that we can apply to all components as part of the vNext work.
Assigning to @radium-v just for the sake of organization. I think once we have the path forward we'll likely dupe all existing/related issues to a single issue describing the feature. For now, this can at least illustrate that we're looking at solving this.