cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Palani
Frequent Visitor

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

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 ModalLookup Dialog on Fluent UI Modal

 

Lookup Dialog on Fluent UI PanelLookup Dialog on Fluent UI Panel

 

Regards,

Palani K.B.

1 ACCEPTED SOLUTION

Accepted Solutions

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.

View solution in original post

3 REPLIES 3
rimatos
Community Support
Community Support

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

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.

View solution in original post

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.

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Users online (1,759)