PCF Controls with FluentUI v9 – Avoid DOM id collisions
While developing a PCF control with the FluentUI React v9 library, the author encountered a display bug where the styling of the calendar pop-over was off and transparent. The issue only occurred when the control was configured on the first field of the form. After investigating the developer logs, the author discovered that the bug was caused by conflicting DOM ids from the fluentui/react-provider library. To fix the issue, the author wrapped the application with the IdPrefixProvider component and provided a unique APPID to ensure that each instance of the control on a form had a different prefix id. This resolved the collision errors and the PCF controls started rendering flawlessly. The author recommends using the IdPrefixProvider in PCF controls that use FluentUI v9 to prevent DOM id collisions and enhance the robustness of the implementations.
Article 15m
Login now to access my digest by 365.Training
Learn how my digest works
Features
- Articles, blogs, podcasts, training, and videos
- Quick read TL;DRs for each item
- Advanced filtering to prioritize what you care about
- Quick views to isolate what you are looking for right now
- Save your favorite items
- Share your favorites
- Snooze items you want to revisit when you have more time