Nested focusmanagers in a form

This example shows how the focusmanager works when nested.

Code-example:

<style type="text/css">
    .container {
        margin: 20px;
        border: solid 1px #000;
        padding: 10px;
        display: inline-block;
    }
    .container.focussed {
        border: solid 2px #F00;
        background-color: #F5F5F5;
    }
    .container2 {
        margin: 5px;
        border: solid 4px #000;
        padding: 10px;
        display: block;
    }
    .container2.focussed {
        border: solid 4px #F00;
        background-color: #DDD;
    }
    .container2.focussed:focus {
        border: dotted 4px #F00;
    }
</style>

<body>
    <form class="container pure-form pure-form-aligned" plugin-fm="true">
        <div class="pure-form-message-inline">Navigate with tab and shift+tab</div>
        <fieldset>
            <div class="pure-control-group">
                <label for="name">Username</label>
                <input id="name" type="text" value="first"/>
            </div>
            <div class="pure-control-group">
                <label for="pw">Password</label>
                <input id="pw" type="password" value="second"/>
            </div>
            <div class="container2 pure-form pure-form-aligned" plugin-fm="true">
                <div class="pure-form-message-inline">Enter with key-right and leave with Esc</div>
                <div class="pure-form-message-inline">Navigate with tab and shift+tab</div>
                <fieldset>
                    <div class="pure-control-group">
                        <label for="nameinner">Username</label>
                        <input id="nameinner" type="text" value="first"/>
                    </div>
                    <div class="pure-control-group">
                        <label for="pwinner">Password</label>
                        <input id="pwinner" type="password" value="second"/>
                    </div>
                    <div class="pure-controls">
                        <label for="cbinner" class="pure-checkbox"><input id="cbinner" type="checkbox" /> I've read the conditions</label>
                    </div>
                    <div class="pure-controls">
                        <button class="pure-button pure-button-bordered">Cancel</button>
                        <button class="pure-button pure-button-bordered">OK</button>
                    </div>
                </fieldset>
            </div>
            <div class="pure-controls">
                <label for="cb" class="pure-checkbox"><input id="cb" type="checkbox" /> I've read the conditions</label>
            </div>
            <div class="pure-controls">
                <button class="pure-button pure-button-bordered">Cancel</button>
                <button class="pure-button pure-button-bordered">OK</button>
            </div>
        </fieldset>
    </form>
</body>

<script src="itsabuild-min.js"></script>
<script>
    document.getElement('.container').focus();
</script>

API Docs

Examples

Module-documentation

Nested focusmanagers in a form