---
source_url: https://itmustbecode.com/pcf-controls-with-fluentui-v9-avoid-dom-id-collisions/
title: PCF Controls with FluentUI v9 - Avoid DOM id collisions
date: 2024-01-16T02:24:28+00:00
categories:
  - blog
tags:
  - fluentui
  - pcf
  - react
word_count: 850
reading_time_minutes: 4
type: posts
---

Recently, while developing a PCF control with the **FluentUI React v9** library, I encountered a rather unusual and annoying runtime display bug. Its resolution ended up shedding light on an important concept that had previously escaped my attention and I thought it deserves its own blog post.

## 🤒The symptoms

The control I was developing is my latest community PCF control, the **FluentUI Month Picker**.

 🔗[FluentUI Month Picker | PCF Gallery](https://pcf.gallery/fluentui-month-picker/)
🔗 GitHub repo : drivardxrm/FluentUI.MonthPicker.PCF

Given that **FluentUI v9**([@fluentui/react-components](https://www.npmjs.com/package/@fluentui/react-components)) is the main library used by the platform to render form elements when the **New Look** switch is activated... [see my previous blog post](/adapting-pcf-controls-for-model-driven-apps-new-modern-look/). I decided to use it in my project to replicate the look and feel of a native date picker.

{{< figure src="./image-4.png" alt="" caption="" >}}

{{< figure src="./image-6.png" alt="" caption="" >}}

The control functioned perfectly within the PCF test harness during development. However, upon deployment to a live **Dataverse** environment and integration into a form, inconsistencies surfaced in the display of the calendar pop-over.

As you can see in the image below, the styling of the calendar is off and the surface is transparent.

{{< figure src="./image-4-1.png" alt="" caption="" >}}

Moreover, as soon as I selected a month in the calendar, the styling magically started to be applied correctly.

{{< figure src="./image-5.png" alt="" caption="" >}}

The cherry on top, this display issue seemed to happen only if my PCF control was configured on the **first** field of the form.

## 🧑‍⚕️The diagnostic

After struggling to find a solution and testing various approaches in vain, I decided to be pragmatic and look at the developer logs of the browser. Turns out that the answer was right there under my nose.

I noticed this error message about **conflicting DOM ids** in the rendered page coming from the **fluentui/react-provider** library.

{{< figure src="./image-3.png" alt="" caption="" >}}

Interestingly, the error message provides a link to the **Advanced Configuration** section of the FluentUI v9 documentation. This section explains the issue and offers a comprehensive solution.

🔗[Concepts / Developer / Advanced Configuration - Page ⋅ Storybook (fluentui.dev)](https://react.fluentui.dev/?path=/docs/concepts-developer-advanced-configuration--page#idprefixprovider)
🔗feat: add IdPrefixProvider by layershifter · Pull Request #26496 · microsoft/fluentui (github.com)

## 💊The fix

One of the first thing to consider when working with FluentUI v9 is to wrap your application with a **FluentProvider**. This component is plays a crucial role in injecting both the theme and styles into the application.

```
import { Button, FluentProvider, webLightTheme } from '@fluentui/react-components'

const SimpleApp= (): JSX.Element =>
    <FluentProvider theme={webLightTheme}>
       <Button appearance="primary">Hello FluentUI React v9</Button>
    </FluentProvider>

export default SimpleApp

```

> _See my previous blog post on PCF control development with FluentUI v9_ for more context
>
> 🔗 [Develop PCF Controls with FluentUI React v9 - It Must Be Code!](/develop-pcf-controls-with-fluentui-react-v9/)


Now, Since **FluentUI** is also used natively by the PowerPlatform and that other PCF controls on the form might also bring their own flavor of the provider, chances are that we end up with multiple instances of **FluentProvider** with the same DOM id on the page at runtime. When this happens, it can cause interop problems, thus the display bug encountered earlier.

To mitigate this, we need to wrap the application with another component, **IdPrefixProvider** and provide an **APPID**. This ensures that the **id** of the rendered html element is **unique** by prefixing the standard id with the given **APPID**.

```
import { Button, FluentProvider, IdPrefixProvider, webLightTheme } from '@fluentui/react-components'

const SimpleApp= (): JSX.Element =>
    <IdPrefixProvider value="APPID-">
      <FluentProvider theme={webLightTheme}>
       <Button appearance="primary">Hello FluentUI React v9</Button>
      </FluentProvider>
    </IdPrefixProvider>

export default SimpleApp

```

Here is how I implemented the fix in my PCF control code. By adding a prefix that identifies the control ' **_month-picker-_**' and an ' **_instanceId_**' (randomly generated GUID), I can be sure that each possible instance of the control on a form will have a different prefix id.

{{< figure src="./image-1.png" alt="" caption="" >}}

As you can see in the image below, the FluentProvider root html element gets prefixed accordingly.

{{< figure src="./image.png" alt="" caption="" >}}

{{< figure src="./image-2.png" alt="" caption="" >}}

As soon as I deployed the version with the prefixed FluentProvider, collision errors were resolved and my PCF controls started to render flawlessly 💪.

## Takeaway

Moving forward, I will always use the **IdPrefixProvider** in my PCF controls that uses FluentUI v9. This simple trick not only safeguards against DOM Id collisions but also enhances the overall robustness of PCF controls implementations.

Hope this helps,

## Links
{{< linkcard url="https://react.fluentui.dev/?path=/docs/concepts-developer-advanced-configuration--page#idprefixprovider" title="Fluent UI React" summary="Fluent UI React Components is a set of UI components and utilities resulting from an effort to converge the set of React based component libraries in production today: @fluentui/react and @fluentui/react-northstar." image="/linkcards/00c9cfc191a4eacb.png" domain="react.fluentui.dev" new_tab="true" nofollow="true" >}}


{{< linkcard url="https://github.com/microsoft/fluentui/pull/26496" title="feat: add IdPrefixProvider by layershifter · Pull Request #26496 · microsoft/fluentui" summary="New Behavior This PR implements IdPrefixProvider for @fluentui/react-components. This feature allows to better control automatically generated IDs: /* All ids in a scope will start with “scope-” */…" image="/linkcards/8c63c37040ff4033.png" domain="github.com" new_tab="true" nofollow="true" >}}

{{< linkcard url="/develop-pcf-controls-with-fluentui-react-v9/" title="Develop PCF Controls with FluentUI React v9" summary="Explore FluentUI React v9 and the experience of developing Power Apps Component Framework controls with the new component library." image="./adrian-curiel-PwQHfxo3Q2Y-unsplash-1-scaled.jpg" domain="itmustbecode.com" new_tab="false" nofollow="false" >}}


{{< linkcard url="https://pcf.gallery/fluentui-month-picker/" title="FluentUI Month Picker" summary="A control to select a month and optionally outputs some information about the selected month (ex. month number, number of days in month)." image="/linkcards/c589a7a12cf0f894.png" domain="pcf.gallery" new_tab="true" nofollow="true" >}}


{{< linkcard url="https://github.com/drivardxrm/FluentUI.MonthPicker.PCF" title="GitHub - drivardxrm/FluentUI.MonthPicker.PCF: PCF Control that renders a Month picker over a Date column" summary="PCF Control that renders a Month picker over a Date column - GitHub - drivardxrm/FluentUI.MonthPicker.PCF: PCF Control that renders a Month picker over a Date column" image="/linkcards/f0c99474e5db0b4f.png" domain="github.com" new_tab="true" nofollow="true" >}}

Image by [Marcel Langthim](https://pixabay.com/users/pixel-mixer-1197643/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1620591) from [Pixabay](https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1620591)