Default group label to be shown and improve toggle button

packages/node_modules/@node-red/editor-client/src/js/ui/group.js

@@ -82,12 +82,14 @@ RED.group = (function() {
         colorPalette.push('#'+'000000'.slice(0, 6-s.length)+s);
     }
 
-    var defaultGroupStyle = {};
+    var defaultGroupStyle = {
+        label: true
+    };
 
     var groupDef = {
         defaults:{
             name:{value:""},
-            style:{value:{}},
+            style:{value:{label:true}},
             nodes:{value:[]}
         },
         category: "config",
@@ -133,10 +135,9 @@ RED.group = (function() {
 
             $("#node-input-style-label").toggleButton({
                 enabledLabel: RED._("editor.show"),
-                disabledLabel: RED._("editor.hide")
+                disabledLabel: RED._("editor.show"),
             })
 
-
             $("#node-input-style-label").on("change", function(evt) {
                 $("#node-input-row-style-label-options").toggle($(this).prop("checked"));
             })
@@ -217,7 +218,8 @@ RED.group = (function() {
             stroke: convertColorToHex(groupStyle.stroke),
             "stroke-opacity": groupStyle.strokeOpacity,
             fill: convertColorToHex(groupStyle.fill),
-            "fill-opacity": groupStyle.fillOpacity
+            "fill-opacity": groupStyle.fillOpacity,
+            label: true
         }
         groupStyleDiv.remove();
     }
@@ -615,14 +617,14 @@ RED.group = (function() {
             var row = null;
 
             row = $("<div/>").appendTo(picker);
-
+            var currentButton;
             for (var y=0;y<2;y++) { //red-ui-group-layout-text-pos
                 var yComponent= "ns"[y];
                 row = $("<div/>").appendTo(picker);
                 for (var x=0;x<3;x++) {
                     var xComponent = ["w","","e"][x];
                     var val = yComponent+xComponent;
-                    var button = $("<button/>", { class:"red-ui-search-result-node","data-pos":val }).appendTo(row);
+                    var button = $("<button/>", { class:"red-ui-search-result-node red-ui-button","data-pos":val }).appendTo(row);
                     button.on("click",  function (e) {
                         e.preventDefault();
                         layoutHiddenInput.val($(this).data("pos"));
@@ -630,15 +632,22 @@ RED.group = (function() {
                         refreshDisplay();
                     });
                     $('<div>',{class:"red-ui-group-layout-picker-cell-text red-ui-group-layout-text-pos-"+val}).appendTo(button);
-
-
+                    if (val === layoutHiddenInput.val()) {
+                        currentButton = button;
+                    }
                 }
             }
             refreshDisplay();
             var layoutPanel = RED.popover.panel(picker);
             layoutPanel.show({
-                target: layoutButton
-            })
+                target: layoutButton,
+                onclose: function() {
+                    layoutButton.focus();
+                }
+            });
+            if (currentButton) {
+                currentButton.focus();
+            }
         })
 
         refreshDisplay();