Skip to content

Cannot Render a Form Inside of a Tab #656

@thoffmannaspenware

Description

@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

Image

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug 🐛Something isn't working

    Projects

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions