Replace v-chip-group

aleksis/apps/kolego/frontend/components/AbsenceReasonGroupSelect.vue

@@ -63,8 +63,10 @@ export default {
       if (this.customAbsenceReasons) {
         return true;
       }
-      return (!this.$apollo.queries.absenceReasons.loading &&
-          this.absenceReasons.length);
+      return (
+        !this.$apollo.queries.absenceReasons.loading &&
+        this.absenceReasons.length
+      );
     },
     customAbsenceReasonsExists() {
       return this.customAbsenceReasons.length > 0;
@@ -109,20 +111,15 @@ export default {
 </script>
 
 <template>
-  <v-chip-group
-    column
-    :value="innerValue"
-    @change="updateInnerValue"
-    mandatory
-    v-if="showChips"
-  >
+  <div class="d-flex flex-wrap" style="gap: 0.2em" v-if="showChips">
     <v-chip
       v-if="allowEmpty"
       color="success"
       :value="emptyValue"
+      :input-value="innerValue === emptyValue"
       filter
       outlined
-      @click.native="$event.stopPropagation()"
+      @click.stop="updateInnerValue(emptyValue)"
     >
       {{ $t("kolego.absence_reason.present") }}
       <v-avatar right v-if="loadSelectedChip && innerValue === emptyValue">
@@ -135,10 +132,11 @@ export default {
       :absence-reason="absenceReason"
       filter
       outlined
+      :input-value="innerValue === absenceReason.id"
       :loading="loadSelectedChip && absenceReason.id === innerValue"
-      @click.native="$event.stopPropagation()"
+      @click.stop="updateInnerValue(absenceReason.id)"
     />
-  </v-chip-group>
+  </div>
   <v-skeleton-loader v-else type="chip@4" class="d-flex flex-wrap gap" />
 </template>