Nested fx-switch possible?

[pherk]

I tried to combine fx-switch for a login overlay with a switch rendered as tabcontainer.
Both switches do it separately but together the only the outer switch is toggleable.
The inner switch is correctly rendered, the inner triggers fire but nothing happens.
Is there a solution?

html snippet for illustration

    <fx-switch class="{instance('vars')/loaded}">
    <fx-case id="loginpage">
        <section class="login">
            <fx-control ref="instance('auth')/user" update-event="enter">
                        <label>User</label>
                        <input type="text" autofocus="autofocus" autocomplete="false"/>
            </fx-control>
            <fx-control ref="instance('auth')/password" update-event="enter">
                        <label>Password</label>
                        <input type="password"/>
            </fx-control>

            <fx-trigger>
                        <button>Login</button>
                        <fx-send submission="login"/>
            </fx-trigger>
        </section>
    </fx-case>
    <fx-case id="tabcontainer">
    <section>
    <fx-trigger label="page 1">
        <paper-button>Basics</paper-button>
        <fx-toggle case="one"/>
    </fx-trigger>
    <fx-trigger label="page 2" raised="raised">
        <paper-button>Infos</paper-button>
        <fx-toggle case="two"/>
    </fx-trigger>
    <fx-trigger label="page 3" raised="raised">
        <paper-button>SozNet</paper-button>
        <fx-toggle case="three"/>
    </fx-trigger>
    <fx-trigger label="page 4" raised="raised">
        <paper-button>HC</paper-button>
        <fx-toggle case="four"/>
    </fx-trigger>
    <fx-switch>
        <fx-case>
           page one
        </fx-case>
        <fx-case id="two" name="page2">
            {log('patient')}
        </fx-case>
        <fx-case id="three" name="page3">
            some completely unneeded content
        </fx-case>
        <fx-case id="four" name="page4">
            some completely unneeded content
        </fx-case>
    </fx-switch>
    </section>
    </fx-case>
    </fx-switch>

[JoernT]

thanks @pherk for reporting. I encountered misbehavior for switches also but haven't yet found time to dig into.

However - sure, fx-switch is intended to be nestable as all containers should. Thanks for the testcase - will help to sort it out.

I'll however convert this question to a ticket.

[JoernT]

The problem was a missing id on nested case. You find a completed running version in demo/switch-nested.html. Attaching the full code here also:

    <fx-fore>
        <fx-model>
            <fx-instance id="auth">
                <data>
                    <user>John</user>
                    <password></password>
                    <inprogress>false</inprogress>
                </data>
            </fx-instance>
            <fx-submission id="login"
                           method="urlencoded-post"
                           url="#echo"
                           ref="instance('auth')"
                           replace="none">
                <fx-setvalue ref="inprogress" event="submit">true</fx-setvalue>
                <fx-header name="Authorization" value="'auth'"></fx-header>
                <fx-header name="Accept" value="'application/xml'"></fx-header>
                <fx-header name="Another">bar</fx-header>

                <fx-message event="submit-error">Login failed</fx-message>
                <fx-action event="submit-done">
                    <fx-message>Access granted</fx-message>
                    <fx-toggle case="tabcontainer"></fx-toggle>
                </fx-action>

            </fx-submission>

        </fx-model>
        <fx-switch>
            <fx-case id="loginpage">
                <section class="login">
                    <fx-control ref="instance('auth')/user" update-event="enter">
                        <label>User</label>
                        <input type="text" autofocus="autofocus" autocomplete="false"/>
                    </fx-control>
                    <fx-control ref="instance('auth')/password" update-event="enter">
                        <label>Password</label>
                        <input type="password"/>
                    </fx-control>

                    <fx-trigger>
                        <button>Login</button>
                        <fx-send submission="login"/>
                    </fx-trigger>
                </section>
            </fx-case>
            <fx-case id="tabcontainer">
                <section>
                    <fx-trigger label="page 1">
                        <paper-button>Basics</paper-button>
                        <fx-toggle case="one"/>
                    </fx-trigger>
                    <fx-trigger label="page 2" raised="raised">
                        <paper-button>Infos</paper-button>
                        <fx-toggle case="two"/>
                    </fx-trigger>
                    <fx-trigger label="page 3" raised="raised">
                        <paper-button>SozNet</paper-button>
                        <fx-toggle case="three"/>
                    </fx-trigger>
                    <fx-trigger label="page 4" raised="raised">
                        <paper-button>HC</paper-button>
                        <fx-toggle case="four"/>
                    </fx-trigger>
                    <fx-switch>
                        <fx-case id="one">
                            page one
                        </fx-case>
                        <fx-case id="two" name="page2">
                            {log('auth')}
                        </fx-case>
                        <fx-case id="three" name="page3">
                            some completely unneeded content
                        </fx-case>
                        <fx-case id="four" name="page4">
                            some completely unneeded content
                        </fx-case>
                    </fx-switch>
                </section>
            </fx-case>
        </fx-switch>
    </fx-fore>

I added a check to the code that raises an error popup when a case id cannot be found (is not matching).