My goal is to clear all the checkbox checks when I move from one lightning-tab to another. I use the lightning-tab onactive={handleTabClick} function to clear all the field inputs when moving from one tab to another. The following code clears regular input boxes but not the lightning-checkbox-group:
handleTabClick(){
this.template.querySelectorAll('lightning-input[data-id="weekly"]').forEach(element
=> {
element.value = null;
});
this.template.querySelectorAll('lightning-checkbox-group[data-id="weekly"]').forEach(element => {
element.value = null
});
this.valueWeekly = null
this.skipEveryWeek = null
}
Here's my HTML:
LWC HTML:
<div class="slds-var-m-around_medium slds-box">
<h1 class="slds-var-m-around_medium">Recurrence pattern</h1>
<div class="slds-border_top slds-border_bottom">
<lightning-tabset>
<lightning-tab label="Daily" onactive={handleTabClick} value="Daily">
For daily Service Appointments simpy select a Start Date and End Date from the datepickers
below.
</lightning-tab>
<lightning-tab label="Weekly" onactive={handleTabClick} value="Weekly">
<ul class="slds-list_horizontal slds-has-inline-block-links_space">
<li>
<div class="page-section page-right">
<lightning-checkbox-group name="Checkbox Group" options={optionsWeekly}
value={valueWeekly} onchange={handleChangeWeekly} data-id="weekly">
</lightning-checkbox-group>
</div>
</li>
<li>
<div class="page-section page-right">
<p>
<lightning-formatted-text class="slds-var-m-around_medium"
value=" "></lightning-formatted-text>
</p>
</div>
</li>
<li>
<div class="page-section page-right">
<lightning-input
label="(Skips every # of weeks)" type="number" value={skipEveryWeek}
onkeyup={handleRecurEveryWeek} data-id="weekly">
</lightning-input>
</div>
</li>
<li>
<div class="page-section page-right">
<br>
<br>
<br>
<p>
<lightning-formatted-text
class="slds-var-m-around_medium" value="week(s)">
</lightning-formatted-text>
</p>
</div>
</li>
</ul>
</lightning-tab>
<lightning-tab label="Monthly" onactive={handleTabClick} value="Monthly">
<lightning-accordion class="example-accordion" onsectiontoggle={handleToggleSection}
active-section-name="Day">
<!--////////////////////////////////////////////////////-->
<lightning-accordion-section name="Day" label="Day" onclick={handleMonthlyDay}>
<ul class="slds-list_horizontal slds-has-inline-block-links_space">
<li>
<div class="page-section page-right">
<lightning-input class="daymonth" label="Day of Month" type="number"
value={dayOccurrenceMonth} onkeyup={handleMontlyDayMonth}
data-id="monthly">
</lightning-input>
</div>
</li>
<li>
<div class="page-section page-right">
<br>
<br>
<p>
<lightning-formatted-text class="slds-var-m-around_medium"
value="of every"></lightning-formatted-text>
</p>
</div>
</li>
<li>
<div class="page-section page-right">
<lightning-input class="recurmonth" label="(Skips every # of months)" type="number"
value={skipEveryMonth1} onkeyup={handleRecurEvery1}
data-id="monthly">
</lightning-input>
</div>
</li>
<li>
<div class="page-section page-right">
<br>
<br>
<p>
<lightning-formatted-text class="slds-var-m-around_medium"
value="month(s)"></lightning-formatted-text>
</p>
</div>
</li>
</ul>
</lightning-accordion-section>
<!--////////////////////////////////////////////////////-->
<lightning-accordion-section name="Week Day" label="Week Day">
<ul class="slds-list_horizontal slds-has-inline-block-links_space">
<li>
<div class="page-section page-right">
<lightning-combobox name="progress" value={valueEvery}
placeholder="Select Progress" options={optionsEvery}
onchange={handleChangeEvery} data-id="monthly">
</lightning-combobox>
</div>
</li>
<li>
<div class="page-section page-right">
<lightning-combobox name="progress" value={valueWeekday}
placeholder="Select Progress" options={optionsWeekday}
onchange={handleChangeWeekday} data-id="monthly">
</lightning-combobox>
</div>
</li>
<li>
<div class="page-section page-right">
<br>
<br>
<p>
<lightning-formatted-text class="slds-var-m-around_medium"
value="of every">
</lightning-formatted-text>
</p>
</div>
</li>
<li>
<div class="page-section page-right">
<lightning-input type="number" value={skipEveryMonth2} onkeyup={handleRecurEvery2}
data-id="monthly">
</lightning-input>
</div>
</li>
<li>
<div class="page-section page-right">
<br>
<br>
<p>
<lightning-formatted-text class="slds-var-m-around_medium"
value="month(s)">
</lightning-formatted-text>
</p>
</div>
</li>
</ul>
</lightning-accordion-section>
<!--////////////////////////////////////////////////////-->
</lightning-accordion>
</lightning-tab>
<lightning-tab label="Yearly" onactive={handleTabClick} value="Yearly">
<ul class="slds-list_horizontal slds-has-inline-block-links_space">
<li>
<div class="page-section page-right">
<lightning-input label="Day of Year" type="number" data-id="yearly"
value={dayOccurrenceYear} onkeyup={handleYearlyDay}>
</lightning-input>
</div>
</li>
<li>
<div class="page-section page-right">
<br>
<br>
<p>
<lightning-formatted-text class="slds-var-m-around_medium"
value="of every">
</lightning-formatted-text>
</p>
</div>
</li>
<li>
<div class="page-section page-right">
<lightning-input label="(Skips every # of years)" type="number"
value={skipEveryYear} onkeyup={handleRecurEveryYear}
data-id="yearly">
</lightning-input>
</div>
</li>
<li>
<div class="page-section page-right">
<br>
<br>
<p>
<lightning-formatted-text class="slds-var-m-around_medium"
value="year(s)" >
</lightning-formatted-text>
</p>
</div>
</li>
</ul>
</lightning-tab>
</lightning-tabset>
</div>
</div>
I have an Array or List variable "valueWeekly" that I've been able to nullify, but unsuccessfully nullify the visual representation in the UI.
Here are some Before and After screenshots Before: enter image description here
