Bugfix for #10927 - Body steal focus when opening folder overlay

[BatJan]

Prerequisites

• I have added steps to test this contribution in the description below

If there's an existing issue for this PR then this fixes #10972

Description

When creating a folder under "Settings -> Document types" the input field for the name that appears don't get autofocused. I suspect it's due to the section containing the input element is hidden using ng-show instead of ng-if making the autofocus directive compete with all other places this directive might have been used and also settled on the element to focus on before the dialog for naming the folder appears. Changing it to use ng-if instead makes the directive run and set focus again.

Before

After

[umbrabot]

Hi there @BatJan, thank you for this contribution! 👍

While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:

• It's clear what problem this is solving, there's a connected issue or a description of what the changes do and how to test them
• The automated tests all pass (see "Checks" tab on this PR)
• The level of security for this contribution is the same or improved
• The level of performance for this contribution is the same or improved
• Avoids creating breaking changes; note that behavioral changes might also be perceived as breaking
• If this is a new feature, Umbraco HQ provided guidance on the implementation beforehand
• The contribution looks original and the contributor is presumably allowed to share it

Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution.

If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[bjarnef]

@BatJan I think it was also an issue when creating a folder under media types.
https://github.com/umbraco/Umbraco-CMS/blob/23675a33ee2383cf7ceef38cc2d4942c46e3ee6c/src/Umbraco.Web.UI.Client/src/views/mediatypes/create.html

The part with ng-show="!model.creatingFolder" and ng-show="model.creatingFolder"

[BatJan]

@bjarnef Yes it indeed is - I'm going to push shortly. Just need to figure out an issue with the view for https://github.com/umbraco/Umbraco-CMS/blob/23675a33ee2383cf7ceef38cc2d4942c46e3ee6c/src/Umbraco.Web.UI.Client/src/views/datatype/create.html where I see a "Autofocus processing was blocked because a document already has a focused element" after making the change... So need to figure that one out before comitting the extra changes - But good spot 🙌🏻

[BatJan]

@bjarnef Ok, found it - Turns out that for some reason the native autofocus attribute was being used instead of the umb-auto-focus directive in the view for the datatypes dialog 😁

But should be all good now 👍🏻 Let me know if you spot anything I might have missed - Have been checking all the create.html views I could find.

[bjarnef]

@BatJan yeah, I also noticed one dialog using the native autofocus. while others used umb-auto-focus and wondering why it didn't use same attribute :)

[BatJan]

Oh dear - The changes I though I pushed for this PR ended up in an old branch doh! 🙈 All good now!

[nul800sebastiaan]

Awesome, thanks for the help @BatJan and @bjarnef ! 👍