diff --git a/app/views/server/universities/_sso_mapping.html.erb b/app/views/server/universities/_sso_mapping.html.erb
index 1c51ceb03077c8e6df96279c3474d9ada96580b6..620dcb85813558864fe803fe84668f3a311b932c 100644
--- a/app/views/server/universities/_sso_mapping.html.erb
+++ b/app/views/server/universities/_sso_mapping.html.erb
@@ -63,7 +63,7 @@ end
       </div>
     </draggable>
 
-    <a v-on:click="fields.push({sso_key: 'key', internal_key: 'email', roles: {}})" class="btn btn-primary btn-sm">
+    <a v-on:click="addField" class="btn btn-primary btn-sm">
       <%= t('add_field') %>
     </a>
   </div>
@@ -84,6 +84,27 @@ end
         fields: <%= object.sso_mapping.blank? ? '[]' : object.sso_mapping.to_json.html_safe %>,
         keys: <%= mapping_keys.map { |key| [key, User.human_attribute_name(key)] }.to_h.to_json.html_safe %>
       }
+    },
+    methods: {
+      addField: function () {
+        this.fields.push({sso_key: 'key', internal_key: 'email', roles: {}});
+        this.enableSelects();      
+      },
+      enableSelects: function () {
+        // conditional.js messes with the new field added, so we have to force enable the select fields
+        var selectFields,
+            i;
+        setTimeout(function() {
+          selectFields = document.getElementById("app").getElementsByClassName("form-select");
+          for (i = 0; i < selectFields.length; i += 1) {
+              target = selectFields[i];
+              target.removeAttribute('disabled');
+          }
+        }, 100);
+      }
+    },
+    mounted() {
+      this.enableSelects();
     }
   });