yairEO/tagify

Dropdown not working when using within Fluent UI Panel React

Open

#963 opened on Jan 4, 2022

View on GitHub
 (3 comments) (0 reactions) (0 assignees)HTML (456 forks)github user discovery
BugHelp wanted

Repository metrics

Stars
 (3,880 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

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??

Contributor guide

Research direction
Investigate why the tagify dropdown does not open inside a Fluent UI Panel. Check if the dropdown is being clipped or overlapped by the panel's styling, possibly due to z index or overflow properties. Use the provided demo to inspect the DOM and event handling.
Tech stack
javascriptreact
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
ReacttagifyFluent UI
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60