Issue with umb-route-slot inside routed modal

[enkelmedia]

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

14.1.1

Bug summary

I have a couple of places where I would like to have a umb-route-slot inside a routed modal. I've managed to get it to "kind of work" but there is something strange going on in some scenarios which causes the umb-router-slot inside my modal to not load.

Specifics

I have a branch from the backoffice-repo here with a example:

https://github.com/enkelmedia/Umbraco.CMS.Backoffice/tree/routed-modal-issue/examples/modal-routed

In summary I have a dashboard which contains a umb-router-slot (tab1 and tab2), tab2 of the routes inside contains a UmbModalRouteRegistrationController that hosts a modal. This modal also contains a umb-router-slot. The problem is that the route inside the modal is only loaded when the modal is opened from tab2, not if I navigate to the route from another location in the backoffice.

I hope that this can illustrate the issue:

After fiddling with this for quite some time I'm starting to wonder if this is a bug or if I'm missing something.

Steps to reproduce

Have a look at the sample:

https://github.com/enkelmedia/Umbraco.CMS.Backoffice/tree/routed-modal-issue/examples/modal-routed

npm run example
# pick `modal-routed`.

Expected result / actual result

Since the route works from the tab2-view it should also be possible to navigate to it using a a-href.

[github-actions]

Hi there @enkelmedia!

Firstly, a big thank you for raising this issue. Every piece of feedback we receive helps us to make Umbraco better.

We really appreciate your patience while we wait for our team to have a look at this but we wanted to let you know that we see this and share with you the plan for what comes next.

• We'll assess whether this issue relates to something that has already been fixed in a later version of the release that it has been raised for.
• If it's a bug, is it related to a release that we are actively supporting or is it related to a release that's in the end-of-life or security-only phase?
• We'll replicate the issue to ensure that the problem is as described.
• We'll decide whether the behavior is an issue or if the behavior is intended.

We wish we could work with everyone directly and assess your issue immediately but we're in the fortunate position of having lots of contributions to work with and only a few humans who are able to do it. We are making progress though and in the meantime, we will keep you in the loop and let you know when we have any questions.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[nielslyngsoe]

Hi @enkelmedia

Good case, we do this our selfs, for example Workspaces has their own router-slot.

I've also done some work on this lately as we implemented conditions for Block Workspace Views. As we only want to see the Settings View if a Block has Settings etc.
And if I'm not mistaken that will be part of 14.2, so would be nice if you could re-test with latests, RC is begin build on Wednesday next week.

Otherwise I would be cautious about your redirects in the modal (also notice you have a test-redirect which might mess it up). Also I'm not sure there is any reason to first set your routes in the connectedCallback, should be fine to have them set up-front :-)

let me know how that goes, also if you have any ideas on how the DX could be improved :-)

[enkelmedia]

Hi!

Thanks for looking a this!

Valid point, I did try to put the routes in the ctor as well, no difference and then I forgot to move them back.

I also found something that seems to solve the problem, basically adding the code below to the end of the firstUpdated metod of the UmbRouterSlotElement, this worked for me:

const newActiveLocalPath = this._constructLocalRouterPath();
if (this._activeLocalPath !== newActiveLocalPath) {
   this.#router.routes = [...this.#router.routes];
}

Not sure at all if this is a robust solution (or if it creates other issues) but there is a PR for it here: umbraco/Umbraco.CMS.Backoffice#2146

What do you think about this approach?

Btw. thanks for pointing out about the redirects, it seems like appending the full url to the route inside the modal make for a snappier load:

I could try out the upcoming 14.2 to see if there is anything different, I did spend about 8 hours trying to get this to work but then falled back to making the stuff in the modal a workspace and use Umb.Modal.Workspace - with this approach the steps are loaded as they should - but it would be better to be able to have umb-router-slot inside a custom modal as well.

[nielslyngsoe]

fixed by umbraco/Umbraco.CMS.Backoffice#2146