diff --git a/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.html b/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.html
index aa61d6a..d726feb 100644
--- a/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.html
+++ b/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.html
@@ -118,6 +118,7 @@
           </template>
           <div id="addRule">
             <gr-autocomplete
+                id="groupAutocomplete"
                 text="{{_groupFilter}}"
                 query="[[_query]]"
                 placeholder="Add group"
diff --git a/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.js b/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.js
index 24be7e5..41d7896 100644
--- a/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.js
+++ b/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.js
@@ -235,6 +235,12 @@
         id: groupId,
       });
 
+      // Add the new group name to the groups object so the name renders
+      // correctly.
+      if (this.groups && !this.groups[groupId]) {
+        this.groups[groupId] = {name: this.$.groupAutocomplete.text};
+      }
+
       // Wait for new rule to get value populated via gr-rule-editor, and then
       // add to permission values as well, so that the change gets propogated
       // back to the section. Since the rule is inside a dom-repeat, a flush
diff --git a/polygerrit-ui/app/elements/admin/gr-permission/gr-permission_test.html b/polygerrit-ui/app/elements/admin/gr-permission/gr-permission_test.html
index 3a6a9cd..dc00abf 100644
--- a/polygerrit-ui/app/elements/admin/gr-permission/gr-permission_test.html
+++ b/polygerrit-ui/app/elements/admin/gr-permission/gr-permission_test.html
@@ -300,6 +300,8 @@
       test('adding a rule', () => {
         element.name = 'Priority';
         element.section = 'refs/*';
+        element.groups = {};
+        element.$.groupAutocomplete.text = 'new group name';
         const e = {
           detail: {
             value: {
@@ -312,11 +314,12 @@
         assert.equal(Object.keys(element._groupsWithRules).length, 2);
         element._handleAddRuleItem(e);
         flushAsynchronousOperations();
+        assert.deepEqual(element.groups, {newUserGroupId: {
+          name: 'new group name'}});
         assert.equal(element._rules.length, 3);
         assert.equal(Object.keys(element._groupsWithRules).length, 3);
         assert.deepEqual(element.permission.value.rules['newUserGroupId'],
             {action: 'ALLOW', min: -2, max: 2, added: true});
-
         // New rule should be removed if cancel from editing.
         element.editing = false;
         assert.equal(element._rules.length, 2);