diff --git a/services/web/app/views/project/list/modals.jade b/services/web/app/views/project/list/modals.jade
index b8e6cc167f..5f0cac85a2 100644
--- a/services/web/app/views/project/list/modals.jade
+++ b/services/web/app/views/project/list/modals.jade
@@ -149,7 +149,6 @@ script(type="text/ng-template", id="userProfileModalTemplate")
 					type='text',
 					name='first_name',
 					ng-model="userInfoForm.first_name",
-					ng-blur="sendUpdate()",
 					placeholder="First Name",
 					select-when="formVisable"
 				)
@@ -160,27 +159,29 @@ script(type="text/ng-template", id="userProfileModalTemplate")
 					type='text',
 					name='last_name',
 					ng-model="userInfoForm.last_name",
-					ng-blur="sendUpdate()",
 					placeholder='Last Name'
 				)
 
-			.form-group#institution_auto_complete
+			.form-group.user_details_auto_complete
 				label(for="institution") Institution
 				autocomplete(
 					ng-model="userInfoForm.institution",
 					name="institution",
 					data="institutions",
-					ng-blur="sendUpdate()",
 					on-type="updateInstitutionsList",
 					attr-placeholder="Institution",
 					attr-inputclass="form-control"
 				)
 
-			.form-group
+			.form-group.user_details_auto_complete
 				label(for="role") Role
-				input(type='text', name='role',  ng-model="userInfoForm.role", placeholder='Role', ng-blur="sendUpdate()", list="_roles").form-control
-				datalist#_roles
-					option(ng-repeat='role in roles') {{role}}
+				autocomplete(
+					ng-model="userInfoForm.role",
+					name="role",
+					data="roles",
+					attr-placeholder="Role",
+					attr-inputclass="form-control"
+				)
 
 
 	.modal-footer
diff --git a/services/web/public/coffee/main/user-details.coffee b/services/web/public/coffee/main/user-details.coffee
index e4b661c28b..e79ccfbbe4 100644
--- a/services/web/public/coffee/main/user-details.coffee
+++ b/services/web/public/coffee/main/user-details.coffee
@@ -37,7 +37,10 @@ define [
 	App.controller "UserProfileModalController", ($scope, $modalInstance, $http, Institutions) ->
 		$scope.roles = ["Student", "Post-graduate student", "Post-doctoral researcher", "Lecturer", "Professor"]
 
-		$scope.sendUpdate = ->
+		$modalInstance.result.finally ->
+			sendUpdate()
+
+		sendUpdate = ->
 			request = $http.post "/user/settings", $scope.userInfoForm
 			request.success (data, status)->
 			request.error (data, status)->
@@ -45,14 +48,9 @@ define [
 
 		$scope.updateInstitutionsList = (inputVal)->
 
-			# this is a little hack to use until we change auto compelete lib with redesign and can 
-			# listen for blur events on institution field to send the post
-			if inputVal?.indexOf("(") != -1 and inputVal?.indexOf(")") != -1 
-				$scope.sendUpdate()
-
 			query = $scope.userInfoForm.institution
 			if query?.length <= 3
-				return #saves us algolia searches, need ~4 chars to get uni anyway
+				return #saves us algolia searches
 				
 			Institutions.search $scope.userInfoForm.institution, (err, response)->
 				$scope.institutions = _.map response.hits, (institution)->
diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less
index 6d49493825..572e4a015b 100644
--- a/services/web/public/stylesheets/app/project-list.less
+++ b/services/web/public/stylesheets/app/project-list.less
@@ -153,7 +153,7 @@ ul.project-list {
 	}
 }
 
-#institution_auto_complete {
+.user_details_auto_complete {
 
 	ul>li{
 		list-style:none;