0

We have two tabs called X and Y. When we are on Tab Y, we use a checkbox called 'Advanced Filters'.When checked it shows a lightning layout with four inputs.After filling the inputs , if i switch to another tab X and then return back to Tab Y,the layout disappears(rightly so) but the checkbox remains checked.I want to uncheck it too when the tab is switched. This is what i a trying to do.Any response is very much appreciated.

handleTabSwitch(event) {
        this.retrievalMode = event.target.value;
        this.showBookingFiltersTab = false;
        this.showBookingReferenceInput = true;
        // this.checkboxVal = false;

        let advanceFilterCheckbox =this.template.querySelectorAll('[data-advance-filter = "checkbox"]');
            advanceFilterCheckbox.checked = false;
    }

When checked it shows the lightning inputs.enter image description here

When tab is switched to flight and then to Booking, I want to uncheck the checkbox(which is not happening as shown in the screenshot). enter image description here

Improve this question
5
  • 1
    Are you able to provide more information about what's not working? Do you know how to debug your LWC? As it stands, it's hard for anyone to be able to help you without more information. Commented Feb 16, 2021 at 2:59
  • edited my question to show what i need to achieve which is not happening right now.I need to uncheck the checkbox when the tab is switched to another tab X and then again to Y. Commented Feb 16, 2021 at 3:31
  • Do you know how to debug your LWC? Commented Feb 16, 2021 at 3:37
  • Could you also add your HTML template code? I see you are using the querySelectorAll which returns a list of checkboxes. You could iterate over the returned list and set checked=false or just use querySelector if there's only one checkbox. Commented Feb 16, 2021 at 4:03
  • Sure, I will. I only have one Checkbox.I will use querySelector and test.Do you think the above code should work? Commented Feb 16, 2021 at 4:16

1 Answer 1

Reset to default
0

when you query input right after you switched the tab i think the element is stil not available in dom at that time you can put a timeout and then query input inside like this

handleTabSwitch(event) {
setTimeout(()=>this.template.querySelector('[data-advance-filter = "checkbox"]').checked=false);
}
Improve this answer
4
  • Thankyou so much it works. Commented Feb 16, 2021 at 8:45
  • This is what i did. When the page loaded, the default tab is supposed to be flights tab and since the value of checkbox is null at that time, i had to first query the checkbox and then only set it to false if the value is not null.Do you think thats correct? Commented Feb 16, 2021 at 8:48
  • let advanceFilterCheckbox = this.template.querySelector('[data-advance-filter = "checkbox"]'); if (advanceFilterCheckbox != null) { setTimeout(()=>this.template.querySelector('[data-advance-filter = "checkbox"]').checked=false); } Commented Feb 16, 2021 at 8:49
  • @Pseudodarwinist yes that is correct in current scenario Commented Feb 16, 2021 at 8:51

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.