1

I created a popup modal that popup a form for user to fill out, this works out well, the modal is originally hidden, then I use querySelector classList to make it show up like this:

    let contactForm = this.template.querySelector('section[data-id="ContactForm"]');
    contactForm.classList.add('slds-fade-in-open');

This part works without problem.

However, when I try to close the form again when the user either click on submit or cancel button, for some reason the same code suddenly don't work anymore:

    let contactForm = this.template.querySelector('section[data-id="ContactForm"]');
    contactForm.classList.remove('slds-fade-in-open');
    console.log(contactForm.classList);

I can confirm the function is being called and the code is ran, here the screenshot of console.log that show 'slds-fade-in-open' is not part of the classList which confirm it was removed in code, yet it's not removed from the DOM.

enter image description here

Also, I tried to immediately do a classList remove when the modal loads and I can confirm it works, so it works when the modal load but doesn't work afterward when the user click on the cancel button?

What am I doing wrong? Is there some mechanic in Salesforce that prevent me from access the DOM after the page has loaded?

0
3

I would actually use a getter for this to simplify things.

get contactFormClass(){
  return `slds-your-class ${this.hidden? 'slds-fade-in-open slds-hide' : '' }`
}

And just reference that in your div:

<div class={contactFormClass}/>
2
  • how does it know when I changed the value of this.hidden is changed somewhere else? How does it know to trigger the change in div when the user click on the cancel button? – Bill Software Engineer Jun 22 at 20:16
  • this.hidden is being tracked by the framework. Which means when it changes, any getters that reference it are re-run - meaning it's always up-to-date. – Caspar Harmer Jun 22 at 20:17
2

I would suggest also adding slds-hide for a good measure, because slds-fade-in-open is not well documented and unless you actually know what it adds I wouldn't try to manipulate it.

In general classList should work, or you can set your classes via property like class={modalClasses}

1
  • Sure but my classList don't seem to work though and that's the main problem I am currently facing. – Bill Software Engineer Jun 22 at 20:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.