fixed more than max selections in slide 3

Author: supalarry

frontend/src/components/app/onboarding/SelectionButton.vue

@@ -4,11 +4,14 @@
         'onboarding-sub-container-content-button-outline': true,
         'mt-2': true,
         'onboarding-sub-container-content-button-outline-selected': selected,
+        'cursor-default': invalid,
       }"
     v-on:click="select(val)">{{val}}</h1>
 </template>
 
 <script>
+/* eslint-disable max-len */
+
 export default {
   props: ['val', 'bus'],
   data: () => ({
@@ -17,6 +20,9 @@ export default {
   }),
   methods: {
     select(val) {
+      if (!this.selected && this.$parent.maxInterests && this.$parent.optionSelected.length === this.$parent.maxInterests) {
+        return;
+      }
       if (this.selected) {
         this.selected = false;
         this.selectedValue = '';
@@ -33,6 +39,11 @@ export default {
       }
     },
   },
+  computed: {
+    invalid() {
+      return !this.selected && this.$parent.maxInterests && this.$parent.optionSelected.length === this.$parent.maxInterests;
+    },
+  },
   mounted() {
     this.bus.$on('deselectIfNot', this.deselectIfNot);
   },

frontend/src/components/app/onboarding/SlideThree.vue

@@ -50,8 +50,10 @@ export default {
       this.$emit('saveInput', 'slideThree', this.optionSelected, 0);
     },
     select(...args) {
-      const [val] = args;
-      this.optionSelected.push(val);
+      if (this.optionSelected.length < this.maxInterests) {
+        const [val] = args;
+        this.optionSelected.push(val);
+      }
     },
     deselect(val) {
       this.optionSelected = this.optionSelected.filter((e) => e !== val);