OnClick handlers not registering properly when element added dynamically

[luprcDB]

Version

4.3.4

Severity

Critical

Environment

msi

Steps to Reproduce

I have text input and a button. OnClick adds a new Element (div) to an existing div container. The added element contains a Remove button to remove itself (the div). I belive the IDs are set properly. However, after I add a second item the OnClick event of the first one (or any previous ones) does not fire. I don’t think it’s a scope problem, as the elements in the DOM have correct IDs. Just the onclick events don’t fire.

New-UDStack -Children {
    New-UDTextbox -id 'txtInput' -Placeholder 'placeholder'
    New-UDButton -Text 'Add user' -id 'btnSubmit' -Size small -ShowLoading -onclick {
        $inputValue = (Get-UDElement -id 'txtInput').value
        if (!$inputValue) {continue}
        try {$user = Get-ADUser $inputValue -Properties DisplayName -ea Stop} catch {
            Show-UDToast -Message 'User not found' -Duration 5000
        }
        if ($user) {
            Add-UDElement -parentid 'container' -Content {
                New-UDElement -id ('item_'+$inputValue) -Content {
                    New-UDElement -tag div -Content {
                        New-UDIcon -icon 'user' -Size 1x -Style @{margin = '0 .8em 0 1em'}
                        New-UDButton -size small -id ('btn_'+$inputValue) -Text 'Remove' -onclick {
                            Show-UDToast -Message 'Removed'
                            Remove-UDElement -id ('item_'+$inputValue) -Broadcast -ParentId 'container'
                        } -Style @{background = '#d92626'}
                        New-UDTypography -text ($inputValue+' - '+$user.DisplayName)
                    } -Attributes @{style = @{border = '.5px solid'; 'margin-left' = '4em'; padding = '.1em'}}
                } 
            }
            Set-UDElement -id 'txtInput' -Properties @{Value = ''}
        }
    }
    New-UDElement -Tag div -id 'container' -Content {} -Attributes @{style = @{width = '50%'; 'margin-left' = 'auto'}}
} -AlignItems center

Expected behavior

The OnClick event fires and scriptblock removes the desired element from DOM.

Actual behavior

OnClick events do not fire. Button only glows, but OnClick scriptblock is not run.

Additional Environment data

It did not work in 4.3.0 either.

Screenshots/Animations

No response

[luprcDB]

DevTools also show this warning:

[adamdriscoll]

I just tried your example, and it works fine for me. I changed it a bit to use static data. I see the removed toast and the element is removed. Can you try the below app in your environment?

New-UDApp -Content {
    New-UDStack -Children {
    New-UDTextbox -id 'txtInput' -Placeholder 'placeholder'
    New-UDButton -Text 'Add user' -id 'btnSubmit' -Size small -ShowLoading -onclick {
        $inputValue = (Get-UDElement -id 'txtInput').value
        if (!$inputValue) {continue}
        $User = @{
            DisplayName = "Test"
        }
        if ($user) {
            Add-UDElement -parentid 'container' -Content {
                New-UDElement -id ('item_'+$inputValue) -Content {
                    New-UDElement -tag div -Content {
                        New-UDIcon -icon 'user' -Size 1x -Style @{margin = '0 .8em 0 1em'}
                        New-UDButton -size small -id ('btn_'+$inputValue) -Text 'Remove' -onclick {
                            Show-UDToast -Message 'Removed'
                            Remove-UDElement -id ('item_'+$inputValue) -Broadcast -ParentId 'container'
                        } -Style @{background = '#d92626'}
                        New-UDTypography -text ($inputValue+' - '+$user.DisplayName)
                    } -Attributes @{style = @{border = '.5px solid'; 'margin-left' = '4em'; padding = '.1em'}}
                } 
            }
            Set-UDElement -id 'txtInput' -Properties @{Value = ''}
        }
    }
    New-UDElement -Tag div -id 'container' -Content {} -Attributes @{style = @{width = '50%'; 'margin-left' = 'auto'}}
} -AlignItems center
 }

[luprcDB]

@adamdriscoll - I have copy/pasted your code and the behavior remains the same. The LAST added element has the button working, all of the previously added elements don't work (no toast, no removal).

[adamdriscoll]

I see. I can reproduce this. Here's a workaround.

New-UDApp -Content {
    $Session:Users = [System.Collections.Generic.Dictionary[string, object]]::new()
    New-UDStack -Children {
    New-UDTextbox -id 'txtInput' -Placeholder 'placeholder'
    New-UDButton -Text 'Add user' -id 'btnSubmit' -Size small -ShowLoading -onclick {
        $inputValue = (Get-UDElement -id 'txtInput').value
        if (!$inputValue) {continue}
        $User = @{
            DisplayName = "Test"
        }
        if ($User) {
            $Session:Users[$inputValue] = $User
            Sync-UDElement -Id 'container'
            Set-UDElement -id 'txtInput' -Properties @{Value = ''}
        }
    }
    New-UDDynamic -id 'container' -Content {
        New-UDElement -Tag div -Content {
            $Session:Users.Keys | ForEach-Object {
                New-UDElement -tag div -Content {
                    New-UDIcon -icon 'user' -Size 1x -Style @{margin = '0 .8em 0 1em'}
                    $Key = $_
                    New-UDButton -size small -Text 'Remove' -onclick {
                        Show-UDToast -Message 'Removed'
                        $Session:Users.Remove($Key)
                        Sync-UDElement -Id 'container'
                    } -Style @{background = '#d92626'}
                    New-UDTypography -text ($Key +' - '+ $Session:Users[$Key].DisplayName)
                } -Attributes @{style = @{border = '.5px solid'; 'margin-left' = '4em'; padding = '.1em'}}
            }
        } -Attributes @{style = @{width = '50%'; 'margin-left' = 'auto'}}

    } 
} -AlignItems center
 }

[luprcDB]

Thank you for the workaround, Adam.