Using Sync-UDElement on UDSelect inside and UDElement discards the OnChange event code

Universal Dashboard Universal Dashboard Help
1

I’m trying to build a dynamic form and have run into a situation where updating the select element dynamically results in it losing its onchange event … the client-side javascript seems to remember the registered event but the act of Sync’ing the element seems to destroy the endpoint of the UDSelect element. Is this a bug or am I doing it wrong? :slight_smile:

Example:

Import-Module .\UniversalDashboard.Community.psd1

$Pages = @(New-UDPage -Id "pageHome" -Icon home -Name "Home" -DefaultHomePage -Content {
    New-UDCard -Content {
        New-UDLink -Text "TEST" -Url "/Test"
    }
})

$Pages += (New-UDPage -Id "pageTest" -Icon gears -Name "Test" -Endpoint {
    if (-not $Session:PageData -and $null -eq $Session:PageData) {
        $Session:PageData = @{
            selectOne = "-"
            disabledOne = "-"
            selectTwo = "-"
            disabledTwo = "-"
        }
    }

    New-UDRow -Columns {
        New-UDColumn -Size 6 -SmallOffset 3 -MediumOffset 3 -LargeOffset 3 -Content {
            New-UDElement -Id wrapperOne -Tag "div" -Endpoint {
                $valueone = $false
                $valuetwo = $false
                $disabledone = $false
                $disabledtwo = $false
                if ($Session:PageData) {
                    switch ($Session:PageData.selectOne) {
                        "1" { $valueone = $true }
                        "2" { $valuetwo = $true }
                    }
                    switch ($Session:PageData.disabledOne) {
                        "1" { $disabledone = $true }
                        "2" { $disabledtwo = $true }
                    }
                }
                New-UDSelect -Id selectOne -Label "Value Set One" -Option {
                    New-UDSelectOption -Name "Select a value ..." -Value "-"
                    New-UDSelectOption -Name "One" -Value "1" -Selected:$valueone -Disabled:$disabledone
                    New-UDSelectOption -Name "Two" -Value "2" -Selected:$valuetwo -Disabled:$disabledtwo
                } -OnChange {
                    #Wait-Debugger
                    Show-UDToast -Message "Value Set One: selected value = $EventData"
                    $Session:PageData.selectOne = $EventData
                    $Session:PageData.disabledTwo = $([Int32]$EventData + 10).ToString()
                    # This breaks selectTwo : the OnChange endpoint disappears
                    Sync-UDElement -Id wrapperTwo
                    Sync-UDElement -Id debugVars
                }
            }

            New-UDElement -Id wrapperTwo -Tag "div" -Endpoint {
                $valueone = $false
                $valuetwo = $false
                $disabledone = $false
                $disabledtwo = $false
                if ($Session:PageData) {
                    switch ($Session:PageData.selectTwo) {
                        "11" { $valueone = $true }
                        "12" { $valuetwo = $true }
                    }
                    switch ($Session:PageData.disabledTwo) {
                        "11" { $disabledone = $true }
                        "12" { $disabledtwo = $true }
                    }
                }
                New-UDSelect -Id selectTwo -Label "Value Set Two" -Option {
                    New-UDSelectOption -Name "Select a value ..." -Value "-"
                    New-UDSelectOption -Name "Eleven" -Value "11" -Selected:$valueone -Disabled:$disabledone
                    New-UDSelectOption -Name "Twelve" -Value "12" -Selected:$valuetwo -Disabled:$disabledtwo
                } -OnChange {
                    #Wait-Debugger
                    Show-UDToast -Message "Value Set Two: selected value = $EventData"
                    $Session:PageData.selectTwo = $EventData
                    $Session:PageData.disabledOne = $([Int32]$EventData - 10).ToString()
                    # This breaks selectOne : the OnChange endpoint disappears
                    Sync-UDElement -Id wrapperOne
                    Sync-UDElement -Id debugVars
                }
            }
        }
    }

    New-UDRow -Columns {
        New-UDColumn -Size 6 -SmallOffset 3 -MediumOffset 3 -LargeOffset 3 -Content {
            New-UDElement -Id debugVars -Tag "div" -Endpoint {
                New-UDTable -Id debugVarsTable -Title "Variables" -Headers "Name","Value" -Endpoint {
                    $vars = @("Session:PageData.selectOne","Session:PageData.disabledOne","Session:PageData.selectTwo","Session:PageData.disabledTwo")
                    $vars | ForEach-Object { [PSCustomObject]@{
                        Name = $_
                        Value = $(
                            try {
                                $value = Invoke-Expression "`$$_"
                            } catch {
                                $value = $null
                            }
                            if ($null -eq $value) { $value = "`$null" }
                            $value.ToString()
                        )
                    } } | Out-UDTableData -Property Name,Value
                }
            }
        }
    }
})

$Dashboard = New-UDDashboard -Title "UDSelect Dynamic Update Test" -Pages $Pages

$RunningDashBoard = Get-UDDashboard -Name "UDSelectDynamicUpdateTest"
if ($null -ne $RunningDashBoard) {
    $RunningDashBoard | Stop-UDDashboard
}
Start-UDDashboard -Dashboard $Dashboard -Name "UDSelectDynamicUpdateTest" -Port 11000
1 Like