Classes not added to dropdown in sidebar when in repeat

[Digo]

I’m currently having an issue similar to what has been reported as a bug in the past here:

Dynamic Accordions not switching button classes correctly

Wappler 2.9.0 Mac OS X Catalina and Mojave When a standard Accordion Cards component is added and edited for dynamic data usage, the classes are not correctly switching to show the collapsed class on the button element. Code used for dynamic accordion card <div class="accordion" id="accordion1" is="dmx-repeat" dmx-bind:repeat="3"> <div class="card"> <div class="card-header" dmx-bind:id="'accordion1_headingOne'+$index"> <h5 class="mb-0"> <button class="…

Dynamic Accordion Usage

Thanks Jon, yes you are correct, there are quite a few places where I am still tweaking little things to make them prettier for smaller screen sizes, just struggling to find the time, but will get there. Thanks for pointing it out though, it could have been one of the many things i had missed.

In fact, it appears to be exactly the same issue, only that instead of an accordion, this is a menu (metisMenu). The gif below shows two dropdowns, both are exactly the same code, the only difference being the first is a repeat to repeat the dropdown for each database entry:

Looking at inspect element, the issue is clicking it no longer applies the classes correctly as it does when not in a repeat, and I cannot figure out why. Does the repeat change how classes are added?

Here is a copy of the code from the sidebar:

HTML

            <ul class="sub-menu" aria-expanded="true">

                <!-- Non working dropdown in a repeat below -->
                
                    <li dmx-repeat:repeat1="getUsersProjects.data.query1">
                        <a href="javascript: void(0);" class="has-arrow">{{project}}</a>
                        <ul class="sub-menu" aria-expanded="true">
                            <li><a href="javascript: void(0);" key="t-issues">{{project}} Issues</a></li>
                            <li><a href="javascript: void(0);" key="t-overview">Overview</a></li>
                            <li><a href="newissue" key="t-newissue">New Issue</a></li>
                        </ul>
                    </li>

                <!-- Working dropdown below -->

                <li>
                    <a href="javascript: void(0);" class="has-arrow">Level 1.2</a>
                    <ul class="sub-menu" aria-expanded="true">
                        <li><a href="javascript: void(0);">Level 2.1</a></li>
                        <li><a href="javascript: void(0);">Level 2.2</a></li>
                    </ul>
                </li>

            </ul>

Does anyone have any insight on how I can resolve this?

[ben]

Could you give the following a try?

<ul class="sub-menu" id="repeat_region" aria-expanded="true" is="dmx-repeat" dmx-bind:repeat="getUsersProjects.data.query1">
    <li>
        <a href="javascript: void(0);" class="has-arrow">{{project}}</a>
        <ul class="sub-menu" aria-expanded="true">
            <li><a href="javascript: void(0);" key="t-issues">{{project}} Issues</a></li>
            <li><a href="javascript: void(0);" key="t-overview">Overview</a></li>
            <li><a href="newissue" key="t-newissue">New Issue</a></li>
        </ul>
    </li>
</ul>

[Digo]

Yeah, I gave this a try before posting, but unfortunately, no difference.

In the meantime, I have created a workaround using a variable and show class to expand it, though it’s not the best fix since it doesn’t apply the other classes it should if it worked without this.

[Teodor]

@Digo

this is a menu (metisMenu)

What is metismenu? Is this some third party menu script? If yes, then the issue you are having is that you need to initialize it after the repeat region is rendered.

[Digo]

Yes, it’s a popular third party script - https://github.com/onokumus/metismenu

As for the script, it’s initialized last, well after the repeat.

[Teodor]

@Digo

it’s initialized last, well after the repeat.

I don’t see this in your code. You need to add a repeat children region and use its onupdated static event to call the function which initializes this script.