search

yairEO / tagify

🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
https://yaireo.github.io/tagify/
Other
3.45k stars 426 forks source link

Dropdown not working when using within Fluent UI Panel React #963

Open TobiasKoller opened 2 years ago

TobiasKoller commented 2 years ago

hi, I'm using the Panel (Fluent UI Panel) of Microsofts Fluent UI Library and would like to render the React tagify-textbox inside.

When using the tagify control outside the panel it works fine, but inside the panel the dropdown is not opened when typing @kenny Here is an example.

Demo

Can you tell me how to fix this? Maybe the component where the dropdown is rendered in is not available at startup??

yairEO commented 2 years ago

The dropdown is there, you just don't see it because your panel has a ridiculously-unnecessary large value of z-index:

image

simply decrease that or increase the z-index of the Tagify dropdown (using CSS selectors)

image

yairEO commented 2 years ago

Maybe I will increase it in Tagify also by default

TobiasKoller commented 2 years ago

Perfect. Thanks you!!