Cannot Render a Form Inside of a Tab

[thoffmannaspenware]

Describe the Bug

As far as I can tell, I cannot render a Form inside a Tab (part of a set of Tabs) inside an accordion bellow. It starts to render one element of the tab and fails to render further elements in the bellow sequence and also does not load any of the form inside the tab. No stack trace in Pode that I can see. I'll keep looking tomorrow, maybe I just did something stupid. But I tried a lot of simple combinations to isolate.

Steps To Reproduce

            # This works
            $bellowContents = New-PodeWebCard -Content @(
                New-PodeWebForm -Name "$commandName" -ScriptBlock {
                    $WebEvent.Data | Out-Default
                } -Content (New-PodeWebCheckbox -name $commandName)
            )

            # This does not
            $tabs = New-PodeWebTabs -Tabs @(
                New-PodeWebTab -Name "$($commandName)Inputs" -Content @(
                    New-PodeWebForm -Name "$commandName" -ScriptBlock {
                        $WebEvent.Data | Out-Default
                    } -Content (New-PodeWebCheckbox -name $commandName)
                ) 
            )

Expected Behavior

Many elements should render for each bellows, without a form inside a tab breaking the sequence / rendering. Note that many elements do render when I: Use a card Use a tab without a form inside, something like a checkbox works

Screenshots

Platform

Windows, Edge

• Versions:
  • Pode: Pode 2.12.0
  • Pode.Web: 1.0.0
  • PowerShell: 7.4.7

Additional Context

What I think is the error in the browser:

templates.js:704  Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'element')
    at templates.js:704:33
    at Array.forEach (<anonymous>)
    at PodeForm.render (templates.js:688:17)
    at templates.js:671:18
    at Array.forEach (<anonymous>)
    at PodeForm.renderContentArea (templates.js:661:35)
    at PodeForm.finalise (templates.js:577:14)
    at PodeForm.apply (templates.js:454:22)
    at PodeForm.apply (templates.js:1231:22)
    at PodeElementFactory.invokeClass (templates.js:104:40)

full code for the page (note that I played around with very generic inputs and still had the same issue):

Add-PodeWebPage -Name 'RunCommands' -Icon 'Settings' -ScriptBlock {
        param ($commands)
        Write-PodeLog -InputObject 'Execute Command page loading' -Name 'Main'
    
        $commonParams = [System.Management.Automation.Internal.CommonParameters].GetProperties().Name +
        [System.Management.Automation.Internal.ShouldProcessParameters].GetProperties().Name +
        [System.Management.Automation.Internal.TransactionParameters].GetProperties().Name
    
        $bellows = @()

        $inputs = @()

        foreach ($command in $commands) {
            $parameters = $command.Parameters | Where-Object { $_ -notin $commonParams }

            foreach ($parameter in $parameters.Keys) {
                Write-PodeLog -InputObject ('Loading Parameter: {0} Command ' -f $parameter ) -Name 'Main'
                $param = $parameters[$parameter]
                if ($param.ParameterType.Name -eq "String") {
                    $inputs += New-PodeWebTextbox -Name "$($commandName)$($parameter)" -Placeholder ("Enter {0}" -f $param.Name)
                }
                elseif ($param.ParameterType.Name -eq "SwitchParameter") {
                    $inputs += New-PodeWebCheckbox -Name "$($commandName)$($parameter)" -Checked:$false
                }
            }
        
            $commandName = $command.Name
            Write-PodeLog -InputObject ('Loading Command (Page / Forms): {0} Command ' -f $commandName ) -Name 'Main'

            # This works
            $bellowContents = New-PodeWebCard -Content @(
                New-PodeWebForm -Name "$commandName" -ScriptBlock {
                    $WebEvent.Data | Out-Default
                } -Content $inputs
            )

            # this does not
            $tabs = New-PodeWebTabs -Tabs @(
                New-PodeWebTab -Name "$($commandName)Inputs" -Content @(
                    New-PodeWebForm -Name "$commandName" -ScriptBlock {
                        $WebEvent.Data | Out-Default
                    } -Content $inputs
                ) 
            )
    
            # Add this bellow to the accordion
            $bellows += New-PodeWebBellow -Name $command.Name -Content $tabs #$bellowContents 
        }
    
        return New-PodeWebAccordion -Name 'CommandsAccordion' -Bellows $bellows
    } -ArgumentList (, $commands)