Hi Michael,

Yes it should be possible to default the top tab to open, I will take a look.

If you replace the controller with this code the first tab will be open by default:

angular.module('umbraco.services').config([
'$httpProvider',
function ($httpProvider) {
    $httpProvider.interceptors.push(function ($q, $location) {
        return {
            'response': function (response) {
                if (response.config.url.includes('/umbraco/backoffice/UmbracoApi/Content/GetById')
                    || response.config.url.includes('umbraco/backoffice/UmbracoApi/Content/GetEmpty')) {
                    if (response.status === 200) {
                        window.setTimeout(function () {
                            var tabs = document.getElementsByClassName("umb-group-panel__header");
                            for (var i = 0; i < tabs.length; i++) {
                                if (tabs[i].onclick == null) {
                                    tabs[i].onclick = function () {
                                        this.classList.toggle("open");
                                        this.nextElementSibling.classList.toggle("open");
                                    }
                                }
                            }
                            tabs[0].classList.toggle("open");
                            tabs[0].nextElementSibling.classList.toggle("open");
                        }, 500)
                    }
                }
                return response;
            }
        };
    });
}

]);

I tweaked the answer provided by Marc. Toggling the open status would sometimes make the first panel open then close again. This variation simply adds the open class.

angular.module('umbraco.services').config([
    '$httpProvider',
    function ($httpProvider) {
        $httpProvider.interceptors.push(function ($q, $location) {
            return {
                'response': function (response) {
                    if (response.config.url.includes('/umbraco/backoffice/UmbracoApi/Content/GetById')
                        || response.config.url.includes('umbraco/backoffice/UmbracoApi/Content/GetEmpty')) {
                        if (response.status === 200) {
                            window.setTimeout(function () {
                                var tabs = document.getElementsByClassName("umb-group-panel__header");
                                for (var i = 0; i < tabs.length; i++) {
                                    if (tabs[i].onclick == null) {
                                        tabs[i].onclick = function () {
                                            this.classList.toggle("open");
                                            this.nextElementSibling.classList.toggle("open");
                                        }
                                    }
                                }
                                tabs[0].classList.add("open");
                                tabs[0].nextElementSibling.classList.add("open");
                            }, 500)
                        }
                    }
                    return response;
                }
            };
        });
    }
]);

I discovered that the component sometimes throws an angular exception in the console regarding classList not being available. This only happens when editing document types. So I added a couple checks to prevent it from firing in that scenario.

Inside the window.setTimeout, use this block instead:

var tabs = document.getElementsByClassName("umb-group-panel__header");
if (tabs) {
    for (var i = 0; i < tabs.length; i++) {
        if (tabs[i].onclick == null) {
            tabs[i].onclick = function () {
                this.classList.toggle("open");
                this.nextElementSibling.classList.toggle("open");
            }
        }
    }
    if (tabs[0]) {
        tabs[0].classList.add("open");
        tabs[0].nextElementSibling.classList.add("open");
    }
}

is working on a reply...