Modal dialog does not work in SPFx web part

%3CLINGO-SUB%20id%3D%22lingo-sub-1193696%22%20slang%3D%22en-US%22%3EModal%20dialog%20does%20not%20work%20in%20SPFx%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1193696%22%20slang%3D%22en-US%22%3E%3CP%3EUsing%20SPFx%20with%20react%20(hooks)%20I%20am%20developing%20a%20web%20part%20with%20few%20components.%3C%2FP%3E%3COL%3E%3CLI%3EOne%20component%20should%20show%20as%20a%20modal%20dialog%20but%20never%20shows%3C%2FLI%3E%3CLI%3EAnother%20is%20a%20tooltip%20implementation%20and%20does%20not%20show%20at%20all%20too.%3C%2FLI%3E%3C%2FOL%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EDoes%20anyone%20have%20a%20good%20example%3F%20there%20is%20one%20for%20extensions%20but%20did%20not%20find%20one%20for%20the%20web%20part.%3C%2FP%3E%3CP%3EThank%20you%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1193696%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1194669%22%20slang%3D%22en-US%22%3ERe%3A%20Modal%20dialog%20does%20not%20work%20in%20SPFx%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1194669%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F422305%22%20target%3D%22_blank%22%3E%40Ofer-Gal%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHi%20%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIts%20so%20hard%20to%20say%20without%20seeing%20any%20code.Have%20you%20tried%20using%20the%20Office%20UI%20Fabric%20Dialog%20and%20Teaching%20Bubble%20for%20your%20requirements%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1195439%22%20slang%3D%22en-US%22%3ERe%3A%20Modal%20dialog%20does%20not%20work%20in%20SPFx%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1195439%22%20slang%3D%22en-US%22%3E%3CP%3EI%20tried%20%22Office%20UI%20Fabric%22%20Dialog.%20What%20is%20%22Teaching%20Bubble%20%22%3F%3CBR%20%2F%3EMy%20test%20was%20a%20component%20using%20DetailsList%20example%20where%20each%20row%20had%20a%20button%20that%20called%20a%20component%20using%20Dialog%20or%20Panel.%20nither%20of%20them%20ever%20showed%20and%20the%20console%20showed%20CORS%20error.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1197621%22%20slang%3D%22en-US%22%3ERe%3A%20Modal%20dialog%20does%20not%20work%20in%20SPFx%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1197621%22%20slang%3D%22en-US%22%3E%3CP%3EIf%20you%20have%20Chrome%2Ccan%20you%20run%20chrome%20using%20disablewebsecurity%20which%20will%20disable%20the%20CORS%20issues%20for%20time%20being%20to%20verify%20that%20your%20content%20has%20been%20working%20properly%20or%20not%20in%20a%20Dialog%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESo%20you%20code%20is%20failing%20because%20of%20CORS%20issue%2Cnot%20because%20of%20the%20react%20component%20not%20getting%20rendered.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ETeaching%20bubble%20is%20more%20of%20a%20tooltip%20kind%20of%20thing%20to%20display.Here%20is%20the%20link.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fcontrols%2Fweb%2Fteachingbubble%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fcontrols%2Fweb%2Fteachingbubble%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1198167%22%20slang%3D%22en-US%22%3ERe%3A%20Modal%20dialog%20does%20not%20work%20in%20SPFx%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1198167%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F453843%22%20target%3D%22_blank%22%3E%40O365Developer%3C%2FA%3E%26nbsp%3B%20I%20am%20actually%20using%20the%20new%20edge%20to%20test%20my%20development.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eonce%20developed%2C%20my%20users%20will%20need%20to%20run%20with%26nbsp%3B%3CSPAN%3Edisabled%20web%20security.%26nbsp%3B%3CIMG%20class%3D%22lia-deferred-image%20lia-image-emoji%22%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Fhtml%2Fimages%2Femoticons%2Ffacepalm_40x40.gif%22%20alt%3D%22%3Afacepalm%3A%22%20title%3D%22%3Afacepalm%3A%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1199693%22%20slang%3D%22en-US%22%3ERe%3A%20Modal%20dialog%20does%20not%20work%20in%20SPFx%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1199693%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F422305%22%20target%3D%22_blank%22%3E%40Ofer-Gal%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20want%20you%20to%20run%20with%20disablewebsecurity%20in%20Chrome%20to%20make%20sure%20that%20your%20code%20is%20working%20fine%20without%20any%20issues.%3C%2FP%3E%3CP%3EDisabling%20CORS%20in%20IE%20not%20possible%20%2Cor%20may%20be%20possible%20with%20newer%20version%20of%20Edge.%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fsuperuser.com%2Fquestions%2F1020612%2Fcan-the-same-origin-request-policy-be-disabled-in-microsoft-edge%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fsuperuser.com%2Fquestions%2F1020612%2Fcan-the-same-origin-request-policy-be-disabled-in-microsoft-edge%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20the%20code%20is%20running%20fine%2C%20and%20in%20order%20to%20handle%20the%20CORS%20issue%2Cwe%20can%20use%20some%20proxies%20like%20heroku%20or%20you%20can%20develop%20your%20own%20custom%20proxy%2Chowever%20that%20needs%20to%20be%20hosted%20on%20some%20server.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

Using SPFx with react (hooks) I am developing a web part with few components.

  1. One component should show as a modal dialog but never shows
  2. Another is a tooltip implementation and does not show at all too.

 

Does anyone have a good example? there is one for extensions but did not find one for the web part.

Thank you

5 Replies
Highlighted

@Ofer-Gal 

 

Hi ,

 

Its so hard to say without seeing any code.Have you tried using the Office UI Fabric Dialog and Teaching Bubble for your requirements?

 

 

Highlighted

I tried "Office UI Fabric" Dialog. What is "Teaching Bubble "?
My test was a component using DetailsList example where each row had a button that called a component using Dialog or Panel. nither of them ever showed and the console showed CORS error.

Highlighted

If you have Chrome,can you run chrome using disablewebsecurity which will disable the CORS issues for time being to verify that your content has been working properly or not in a Dialog

 

So you code is failing because of CORS issue,not because of the react component not getting rendered.

 

Teaching bubble is more of a tooltip kind of thing to display.Here is the link.

 

https://developer.microsoft.com/en-us/fabric#/controls/web/teachingbubble

Highlighted

@O365Developer  I am actually using the new edge to test my development.

 

once developed, my users will need to run with disabled web security. :facepalm:

 

Highlighted

@Ofer-Gal 

 

I want you to run with disablewebsecurity in Chrome to make sure that your code is working fine without any issues.

Disabling CORS in IE not possible ,or may be possible with newer version of Edge.

https://superuser.com/questions/1020612/can-the-same-origin-request-policy-be-disabled-in-microsoft-...

 

If the code is running fine, and in order to handle the CORS issue,we can use some proxies like heroku or you can develop your own custom proxy,however that needs to be hosted on some server.