Hide/show fields on Form

Suite and Optimus Suite 8
#1

I need to hide or show a datepicker field on a form based on permissions of a logged in user. However, the user may not log in until the form has already been displayed, so I can’t rely on setting the form configuration before it is displayed. Using the show() and hide() functions on a regular input field works, but I (usually, but not always) get the following error when using the show() function on a datePicker.

domvm.micro.js:1179 Uncaught TypeError: Cannot read properties of null (reading ‘_node’)
at alreadyAdopted (domvm.micro.js:1179:1)
at findSeqThorough (domvm.micro.js:1195:1)
at patchChildren (domvm.micro.js:1375:1)
at patch (domvm.micro.js:1246:5)
at patchChildren (domvm.micro.js:1376:1)
at patch (domvm.micro.js:1246:5)
at patchChildren (domvm.micro.js:1376:1)
at patch (domvm.micro.js:1246:5)
at patchChildren (domvm.micro.js:1376:1)
at patch (domvm.micro.js:1246:5)

Unfortunately I cannot create a snippet to demonstrate the issue or test it outside of my environment.

Here is the code I use to define the field when creating the form:

{type:"datePicker",id:"PromiseDate",label:"Promise Date",dateFormat:"%Y-%m-%d",labelPosition:"left",labelWidth:110,helpMessage:"This is the absolute drop-dead date as negotiated with the customer. Use this date when speaking with the customer.",
    mark: function(d){
        let today = new Date();
        return (d.getFullYear() === today.getFullYear() && d.getMonth() === today.getMonth() && d.getDate() === today.getDate() ? "today" : "");
    }
}

Here is the code I use for hiding/showing the field after the user logs in:

function showPromiseDate(){
    let item = form.getItem("PromiseDate");
    item.hide();
    let ugrps = App.user?.groups || [];
    for (var i=0;i<parseInt(ugrps.count);i++){
        if (["sales","engineering"].indexOf(ugrps[i].toLowerCase()) !== -1){
            dhx.awaitRedraw().then(()=>{ item.show(); });
        }
    }
}

Since similar methods work for other form controls such as input and select, I have a feeling it is due to the extra complexities the calendar adds to the datePicker. I’d ultimately like to see the show() function fixed for the datePicker, but if anyone has suggestions for other ways to hide and show a form field dynamically, I need to get around this issue quicker than the typical update release cycle.

I’m currently using version 8.3.3, but I’ve had this issue on a few different releases of 7.x and 8.x in the past in other projects.

#2

Looks like it’s not tied to just datePicker; I just had it happen on a different form on a standard input, whereas the datePicker on that form hides and shows without an issue. I cannot determine what is causing the differing behavior between the two pages.

I tried adding awaitRedraw() before trying to show the input, but that didn’t change anything.

#3

Hello.

Could you please provide a complete demo or a code snippet, where the problem can be reconstructed locally.
Here is a snippet based on your provided info:
https://snippet.dhtmlx.com/p3ktu2d2
item showing/hiding seems to work normally here.

#4

Unfortunately I cannot create a snippet as the snippet site fails to load with a json parse error more than 90% of the time. I’ll take your word that it works in your snippet, and assume it’s something to do with the complexity of my page, and find a way to rework how my page creates the form. Thank you for looking into it.