Adding condition to when change event occurs on radio buttons
This commit is contained in:
parent
56cda31f8c
commit
781a1f8967
9 changed files with 24 additions and 23 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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() : '';
|
||||
this.newPageOnSelect ? this.handleCheckChange() : '';
|
||||
if(this.selectingInitiatesLoad) {
|
||||
this.displayLoader();
|
||||
this.handleCheckChange();
|
||||
}
|
||||
this.handleChange(value);
|
||||
},
|
||||
handleCheckChange(newValue, oldValue){
|
||||
|
|
|
|||
Loading…
Reference in a new issue