Using LookupObjects inside a Fluent UI Panel/Modal not editable/clickable

[Palani]

Hello Experts,

I am building a PCF control where I have a Fluent UI Panel and a Modal dialog with a button on each.  I am trying to bring up the Lookup dialog using (context.utils.lookupObjects(lookupOptions)).  The lookup dialog comes up, but is not clickable/editable. 

I tried updating the zIndex of the OverlayProps and LayerProps to 0 on the panel, which allows the search button on the lookup panel, but still the search box is not editable (we cannot type in the search text).   Can someone help here by giving suggestions on what else to be done here?

 <Panel
                layerProps={{ styles: { root: { zIndex: 0 } } }}
                overlayProps={{ styles: { root: { zIndex: 0 } } }}
            >

 <Modal
                isBlocking={true}
                layerProps={{ styles: { root: { zIndex: 0 } } }}
                overlay={{ styles: { root: { zIndex: 0 } } }}
            >

Lookup Dialog on Fluent UI Modal

Lookup Dialog on Fluent UI Panel

Regards,

Palani K.B.

[rimatos]

Hi @Palani ,

Unfortunately I do not have experience with using PCF, but maybe I can point you in other directions that can get you some help on the subject.

In this scenario it looks like that either the control is not at the front of the screen (which is strange given that you already changed the zIndex to push the component to the front), or that the control as some view only property set that is not enabling you to click it.

If you need you can reference the LookUpObjects and LookUpOptions  documentation for any additional information on this.

I would recommend also raising a thread for this issue in the https://community.dynamics.com/ forum, as it also contains some users with expertise in PCF handling in those forums.

As a last resource, if you believe this appears to be an issue, you can also raise a support ticket through https://admin.powerplatform.microsoft.com/support in order to investigate this in more depth.

Hope this helps you move forward!

Regards,

Ricardo

[ScottDurow · Accepted solution]

I have had the same issue - it's to do with the way that the Model Driven CSS adds the side panel - and the Fluent UI puts the overlay at the end of the dom. There are some hacks you can do to the CSS to fix - but I have come to the conclusion that if you are going to use the Fluent UI dialog then you'll need to implement your own custom lookup.

[Palani]

Hi @ScottDurow and @rimatos ,

Thank you for your suggestion. I could not find any other solution on my requirement of using LookupObjects on top of a Fluent UI Panel.

I am now proceeding with implementing a custom Lookup dialog for my PCF control.

Regards,

Palani K.B.