Selected option when reusing displayText

[vanScoota]

First of all, I want to thank you for this awesome component!

I have a menu structure like this:

• admin
  • config
  • doc
  • log
  • status
• user
  • doc
  • status
• dev
  • doc

As you can see, I'm reusing some of the displayTexts (doc and status). They direct to the same component passing different custom properties. While the page is displayed according to the properties, the menu displays (highlights) always the last occurence of the display name (e.g. dev/doc when selecting admin/doc).

Is there a way to avoid this or does the displayText have to be unique? If the latter is the case, could you unbind the selection from the displayText and add an additional property to the SideMenuOption used for getting the correct selection?

[sebaferreras]

Thanks @vanScoota, this is definitely a bug in the component. I'll be working on a fix for this today/tomorrow

[sebaferreras]

I've just updated the component, so that now we can use "optionDisplayText >> suboptionDisplayText" to let the component know which sub option should be selected. For example if you use a DocPage for both admins, users and devs (and the userType property allows you to decide what content should be shown), you could do something like this:

@SideMenuDisplayTextConditions([
    { propertyName: 'userType', matcher: Matcher.ToEqual, value: UserType.Admin, displayText: 'Admin >> Doc' },
    { propertyName: 'userType', matcher: Matcher.ToEqual, value: UserType.User, displayText: 'User >> Doc' },
    { propertyName: 'userType', matcher: Matcher.ToEqual, value: UserType.Dev, displayText: 'Dev >> Doc' }
])
export class DocPage
// ...

In the code above I'm assuming that the displayText of the options/sub options are:

const options: Array<SideMenuOption>  = [
    {
        displayText: 'Admin',
        suboptions: [
            {
                displayText: 'Doc',
                component: 'DocPage'
            },
            // ...
        ]
    },
    {
        displayText: 'User',
        suboptions: [
            {
                displayText: 'Doc',
                component: 'DocPage'
            },
            // ...
        ]
    },
    {
        displayText: 'Dev',
        suboptions: [
            {
                displayText: 'Doc',
                component: 'DocPage'
            },
            // ...
        ]
    }
];

[vanScoota]

Thanks for the quick fix. I'm going to test this next week and will come back if there are any problems.

[sebaferreras]

Sounds great! I'll update the component again this week to add an id property on each option/sub option (and will update all the custom decorators) to make easier to select a specific option/sub option regardless of its displayText property.

I'll close this issue for now, but feel free to reopen it if the issue persists.