Adding condition to when change event occurs on radio buttons

src/common-components/button-question/button-question.vue

@@ -19,7 +19,7 @@
               :textPosition="textPosition"
               :isMultiSelect="isMultiSelect"
               :groupName="groupName"
-              :loaderEnabled="loaderEnabled"
+              :selectingInitiatesLoad="selectingInitiatesLoad"
               :loaderColor="loaderColor"
               :loaderPosition="loaderPosition"
               :sizeInRem="sizeInRem"
@@ -31,7 +31,6 @@
               screenReaderOnlyText="(opens new window)"
               :colLength="this.answers.length < 3 ? '' : '-4'"
               :selectedButtonIDs="selectedValues"
-              :newPageOnSelect="isOverflowScrollable"
               data-test="button"
             />
           </div>
@@ -61,7 +60,7 @@ export default {
       type: String,
       default: "text-center",
     },
-    loaderEnabled: Boolean,
+    selectingInitiatesLoad: Boolean,
     loaderColor: {
       type: String,
       default: "blue",

src/layouts/vehicle-make/make-question/make-question.vue

@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="makes"
     groupName="Choose Vehicle Make"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />

src/layouts/vehicle-model/model-question/model-question.vue

@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="models"
     groupName="Choose Vehicle Model"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />

src/layouts/vehicle-style/style-question/style-question.vue

@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="styles"
     groupName="Choose Vehicle Style"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />

src/layouts/vehicle-year/year-question/year-question.vue

@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="years"
     groupName="Choose Vehicle Year"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />

src/ux-components/list-button-horizontal/list-button-horizontal.spec.js

@@ -91,7 +91,7 @@ describe("list-button-horizontal.vue", () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -113,7 +113,7 @@ describe("list-button-horizontal.vue", () => {
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
         loaderColor: "blue",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -135,7 +135,7 @@ describe("list-button-horizontal.vue", () => {
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
         loaderPosition: "right",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -157,7 +157,7 @@ describe("list-button-horizontal.vue", () => {
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
         sizeInRem: 1,
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -12,7 +12,7 @@
       :aria-required="isRequired"
       :data-focus-target="groupName"
       v-model="checkValue"
-      @change="handleCheckChange"
+      @change="!selectingInitiatesLoad ? handleCheckChange : ''"
     />
     <label
       tabindex="-1"
@@ -60,7 +60,7 @@ export default {
     buttonLabelSubCopy: String,
     screenReaderOnlyText: String,
     textPosition: String,
-    loaderEnabled: Boolean,
+    selectingInitiatesLoad: Boolean,
     loaderColor: String,
     loaderPosition: String,
     sizeInRem: [Number, String],
@@ -88,8 +88,9 @@ export default {
       this.isLoaderDisplayed = true;
     },
     handleClick(value) {
-      if (this.loaderEnabled) {
+      if(this.selectingInitiatesLoad) {
         this.displayLoader();
+        this.handleCheckChange();
       }
       this.handleChange(value);
     },

src/ux-components/list-button/list-button.spec.js

@@ -91,7 +91,7 @@ describe("list-button.vue", () => {
     // Act
     const wrapper = shallowMount(listButton, {
       propsData: {
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -113,7 +113,7 @@ describe("list-button.vue", () => {
     const wrapper = shallowMount(listButton, {
       propsData: {
         loaderColor: "blue",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -135,7 +135,7 @@ describe("list-button.vue", () => {
     const wrapper = shallowMount(listButton, {
       propsData: {
         loaderPosition: "right",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -157,7 +157,7 @@ describe("list-button.vue", () => {
     const wrapper = shallowMount(listButton, {
       propsData: {
         sizeInRem: 1,
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 

src/ux-components/list-button/list-button.vue

@@ -12,7 +12,7 @@
       :aria-required="isRequired"
       :data-focus-target="groupName"
       v-model="checkValue"
-      @change="!newPageOnSelect ? handleCheckChange : ''"
+      @change="!selectingInitiatesLoad ? handleCheckChange : ''"
     >
     <label
       tabindex="-1"
@@ -63,7 +63,7 @@ export default {
     textPosition: String,
     buttonLabelSubCopy: String,
     screenReaderOnlyText: String,
-    loaderEnabled: Boolean,
+    selectingInitiatesLoad: Boolean,
     loaderColor: String,
     loaderPosition: String,
     sizeInRem: [Number,String],
@@ -73,7 +73,6 @@ export default {
       default: "",
     },
     selectedButtonIDs: [Array, String],
-    newPageOnSelect: Boolean,
   },
   data() {
     return {
@@ -91,8 +90,10 @@ export default {
       this.isLoaderDisplayed = true;
     },
     handleClick(value) {
-      this.loaderEnabled ? this.displayLoader() : '';
+      if(this.selectingInitiatesLoad) {
-      this.newPageOnSelect ? this.handleCheckChange() : '';
+        this.displayLoader();
+        this.handleCheckChange();
+      }
       this.handleChange(value);
     },
     handleCheckChange(newValue, oldValue){