add labels to search item and always display remove button on item

app/src/components/BaseSelectize.vue

@@ -2,8 +2,8 @@
   <div class="selectize-base">
     <b-input-group>
       <b-input-group-prepend is-text>
-        <label class="sr-only" for="selectize">{{ ariaLabel }}</label>
-        <icon :iname="searchIcon" v-if="searchIcon" />
+        <icon iname="search-plus" />
+        <span class="ml-1">{{ label }}</span>
       </b-input-group-prepend>
       <b-form-input
         :class="visible ? null : 'collapsed'"
@@ -35,8 +35,7 @@ export default {
 
   props: {
     choices: { type: Array, required: true },
-    ariaLabel: { type: String, required: true },
-    searchIcon: { type: String, default: 'search' },
+    label: { type: String, default: null },
     // FIXME find a better way to pass filters
     format: { type: Function, default: null }
   },

app/src/components/ZoneSelectize.vue

@@ -2,17 +2,13 @@
   <div class="selectize-zone">
     <div id="selected-items" v-if="selected.length > 0">
       <b-button-group size="sm" v-for="item in filteredSelected" :key="item">
-        <b-button
-          :variant="itemVariant" :to="itemRoute ? {name: itemRoute, params: {name: item}} : null"
-          @blur="onItemButtonBlur" class="item-btn"
-        >
+        <b-button :variant="itemVariant" :to="itemRoute ? {name: itemRoute, params: {name: item}} : null" class="item-btn">
           <icon :iname="itemIcon" /> {{ item | filter(format) }}
         </b-button>
         <b-button
           v-if="!removable || removable(item)"
           class="remove-btn" variant="warning"
           @click="onRemove(item)"
-          @blur="onItemDeleteBlur"
         >
           <icon :title="$t('delete')" iname="minus" />
         </b-button>
@@ -20,10 +16,10 @@
     </div>
 
     <base-selectize
+      v-if="choices.length"
       :choices="choices"
       :format="format"
-      :aria-label="ariaLabel"
-      :search-icon="searchIcon"
+      :label="label"
       @selected="$emit('change', { ...$event, action: 'add' })"
     />
   </div>
@@ -42,8 +38,7 @@ export default {
     selected: { type: Array, required: true },
     // needed by SelectizeBase
     choices: { type: Array, required: true },
-    searchIcon: { type: String, default: 'search' },
-    ariaLabel: { type: String, required: true },
+    label: { type: String, default: null },
     format: { type: Function, default: null },
     removable: { type: Function, default: null }
   },
@@ -63,15 +58,6 @@ export default {
   methods: {
     onRemove (item) {
       this.$emit('change', { item, index: this.selected.indexOf(item), action: 'remove' })
-    },
-    onItemButtonBlur ({ target, relatedTarget }) {
-      if (target.nextElementSibling === relatedTarget) {
-        relatedTarget.classList.add('display')
-      }
-    },
-
-    onItemDeleteBlur ({ target }) {
-      target.classList.remove('display')
     }
   },
 
@@ -98,42 +84,11 @@ export default {
     margin-right: .5rem;
     margin-bottom: .5rem;
 
-    &:hover {
-      .remove-btn  {
-        display: inline-block;
-      }
-
-      .item-btn {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
-
     .item-btn {
-      border-top-right-radius: $border-radius;
-      border-bottom-right-radius: $border-radius;
-
-      &:focus, &:hover {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-
-        & ~ .remove-btn {
-          display: inline-block;
-        }
-      }
-
       .icon {
         margin-right: .25rem;
       }
     }
-
-    .remove-btn {
-      display: none;
-
-      &.display {
-        display: inline-block;
-      }
-    }
   }
 }
 

app/src/views/group/GroupList.vue

@@ -57,8 +57,8 @@
                 <template v-else>
                   <zone-selectize
                     :choices="group.availableMembers" :selected="group.members"
-                    item-icon="user" search-icon="user-plus" item-route="user-info"
-                    :aria-label="$t('group_add_member')"
+                    item-icon="user" item-route="user-info"
+                    :label="$t('group_add_member')"
                     @change="onUserChanged({ ...$event, name })"
                   />
                 </template>
@@ -71,10 +71,10 @@
               </b-col>
               <b-col>
                 <zone-selectize
-                  item-icon="key-modern" item-variant="info"
+                  item-icon="key-modern" item-variant="dark"
                   :choices="group.availablePermissions"
                   :selected="group.permissions"
-                  :aria-label="$t('group_add_permission')"
+                  :label="$t('group_add_permission')"
                   :format="formatPermission"
                   :removable="name === 'visitors' ? removable : null"
                   @change="onPermissionChanged({ ...$event, name, groupType: 'normal' })"
@@ -113,7 +113,7 @@
                   item-icon="key-modern" item-variant="info"
                   :choices="userGroups[name].availablePermissions"
                   :selected="userGroups[name].permissions"
-                  :aria-label="$t('group_add_permission')"
+                  :label="$t('group_add_permission')"
                   :format="formatPermission"
                   @change="onPermissionChanged({ ...$event, name, groupType: 'user' })"
                 />
@@ -123,8 +123,8 @@
           </div>
 
           <base-selectize
-            search-icon="user-plus"
-            :aria-label="$t('group_add_member')"
+            v-if="availableMembers.length"
+            :label="$t('group_add_member')"
             :choices="availableMembers"
             :selected="userGroupsNames"
             @selected="onSpecificUserAdded"
@@ -195,7 +195,6 @@ export default {
 
   methods: {
     onPermissionChanged ({ item, index, name, groupType, action }) {
-      console.log(groupType)
       const uri = 'users/permissions/' + item
       const data = { [action]: name }
       const from = action === 'add' ? 'availablePermissions' : 'permissions'