v2 Vertical Navigation pre-selects multiple items.

Hello,

Skuid Version: 13.0.13

Not sure why, or how to work around this, hence any workaround using JS or else would be much appreciated.

First 2 (potentially more) Action items get highlighted as if they were selected, while other action items and all section items are normal.

NavHighlightError.PNG

<skuid__page unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">
<models/>
<components>
<skuid__grid uniqueid="sk-2D3x-2564" flexDirection="row" justifyContent="flex-start" alignItems="flex-start">
    <divisions>
        <division minWidth="100px" ratio="03." alignSelf="auto">
            <components>
                <skuid__verticalNavigation uniqueid="sk-2D3w-2078">
                    <items>
                        <item label="Action 1" uniqueid="sk-2D3w-2077">
                            <actions>
                                <action type="action-sequence" action-sequence-id="24db859f-1887-4f62-9cbb-76d260fa2f5b"/>
                            </actions>
                            <renderConditions logictype="and"/>
                            <selectedConditions/>
                        </item>
                        <item label="Action 2" uniqueid="test">
                            <actions>
                                <action type="action-sequence" action-sequence-id="24db859f-1887-4f62-9cbb-76d260fa2f5b"/>
                            </actions>
                            <renderConditions logictype="and"/>
                            <selectedConditions/>
                        </item>
                        <item label="Section 1" uniqueid="sk-2D3y-4254" type="section">
                            <actions/>
                        </item>
                        <item label="Action 3 " uniqueid="sk-2D52-7680">
                            <actions>
                                <action type="action-sequence" action-sequence-id="24db859f-1887-4f62-9cbb-76d260fa2f5b"/>
                            </actions>
                        </item>
                        <item label="Section 2" uniqueid="sk-2D3z-4731" type="section">
                            <actions/>
                            <items>
                                <item label="Sub-action 1" uniqueid="sk-2D58-10370">
                                    <actions/>
                                </item>
                            </items>
                            <renderConditions logictype="and"/>
                            <selectedConditions/>
                        </item>
                        <item label="Action 4" uniqueid="sk-2D5X-15222">
                            <actions>
                                <action type="action-sequence" action-sequence-id="24db859f-1887-4f62-9cbb-76d260fa2f5b"/>
                            </actions>
                        </item>
                        <item label="Section 3" uniqueid="sk-2D40-5610" type="section">
                            <actions/>
                            <items>
                                <item label="Sub-action 2" uniqueid="sk-2D4A-10300">
                                    <actions/>
                                </item>
                                <item label="Sub-action 3" uniqueid="sk-2D4A-10564">
                                    <actions/>
                                </item>
                            </items>
                        </item>
                        <item label="Section 4" uniqueid="sk-2D5Z-16985" type="section">
                            <actions/>
                            <renderConditions logictype="and"/>
                            <selectedConditions/>
                        </item>
                    </items>
                    <styles>
                        <spacing/>
                    </styles>
                    <renderConditions logictype="and"/>
                    <styleVariantConditions/>
                </skuid__verticalNavigation>
            </components>
        </division>
        <division alignSelf="auto" minWidth="100px" ratio="1">
            <components/>
        </division>
    </divisions>
</skuid__grid>
</components>
<resources>
    <labels/>
    <javascript/>
    <css/>
    <actionsequences>
<actionsequence id="24db859f-1887-4f62-9cbb-76d260fa2f5b" label="New sequence" type="reusable">
    <description/>
    <actions/>
</actionsequence>
</actionsequences>
</resources>
<styles>
    <styleitem type="background" bgtype="none"/>
</styles>
</skuid__page>

Best,

Lukas

HI @lukaspovilonis

  1. , thanks for sharing the page XML here. I'm able to reproduce the issue with your page XML and see that both in the Composer and at runtime when you initially load the page the first 2 items are displaying as selected.

    Have you tried deleting the navigation items and re-creating them?

  2. I've tried to reproduce this issue starting with a new vertical navigation component but have not been successful. Do you have a sense for at what point the items begin to show as selected?

Hi Anna,

I’m glad that I wasn’t going crazy, it took a while to recreate this issue from scratch.

Not exactly sure what is creating it, but it has to do something with going from Section to Action. And the following XML gets added to navigation item: ‘’, So if you copy/paste that for any nav item the item will be highlighted.

For now, I will try removing this line of XML from my working environment and see if I run into any problems.

Best,

Lukas.

After removing it, it seems to be working and highlighting as expected…