Using React component in the LightBox Edition's window


#1

Hello,

I’m trying to use the React-Select component in my LightBox Edition’s window to assign the users to a task.
( Here’s the official documentation by the way :slight_smile: )

I tried to implement it on an empty Sharepoint React Webpart and succeed, but when i try to implement it in my lightbox, it doesn’t work :neutral_face:

Could you help me ?

Here’s my code that work on the empty Webpart :
http://snippet.dhtmlx.com/5/13a61ee1c

Here’s my DHTMLX Gantt code :
http://snippet.dhtmlx.com/5/776f51072

I get this error in my DHTMLX Gantt code :

TypeError: a.querySelector is not a function
            at m:\#DEV\#Git\#Teamway\Teamway-PlannerGantt\dist\teamway-planner-gantt-web-part.js:943:121878
            at Object.t.getLightbox (m:\#DEV\#Git\#Teamway\Teamway-PlannerGantt\dist\teamway-planner-gantt-web-part.js:943:121999)
            at Object.t.showLightbox (m:\#DEV\#Git\#Teamway\Teamway-PlannerGantt\dist\teamway-planner-gantt-web-part.js:943:119929)
            at HTMLDivElement.l (m:\#DEV\#Git\#Teamway\Teamway-PlannerGantt\dist\teamway-planner-gantt-web-part.js:943:244252)

#2

Hello @MCTeamway,

This error occurs because gantt doesn’t support React methods and elements, so it’s the reason this select component doesn’t work.
This feature stays in our dev tracker and will be implemented in the future, but I cannot give you any ETA.
For now, you can use only javascript libraries which returns “HTML” elements, as jQuery Chosen:
https://harvesthq.github.io/chosen/
and similar.
You may find the example of usage by the following link:
https://docs.dhtmlx.com/gantt/desktop__custom_editor.html#customthirdpartyeditor