0

How can I get the list of classes? my goal is to hide the combobox, so I want to add "slds-hidden" to the list of classes but when I print the value of startSelect I get undefined.

HTML:

<template if:false={isLoading}>
   <div class="slds-page-header slds-m-bottom_small">
      <div class="slds-grid">
         <div class="slds-col slds-has-flexi-truncate">
            <p class="slds-text-title_caps slds-line-height_reset">Mylist</p>
            <h1 class=>{myListTitle}</h1>
            <div class="slds-size_1-of-3">
               <div class="slds-grid slds-gutters">
                  <div class="slds-col">
                     <lightning-combobox
                        name="mylist"
                        label="Mylist"
                        value={mylist}
                        data-id="mywl"
                        placeholder="Select"
                        options={mylistOptions}
                        onchange={handlemyListChange} 
                        ></lightning-combobox>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</template>

..
..

JS:

connectedCallback() {
    const startSelect = this.template.querySelectorAll('[data-id="mywl"]').classList; //undefined
}
2
  • 1
    Try with: this.template.querySelector('[data-id="mywl"]').classList. If you use querySelectorAll you get back an array
    – Alex M.
    Commented Jul 15, 2021 at 9:38
  • not working, getting [Cannot read property 'classList' of null]
    – Json
    Commented Jul 15, 2021 at 10:19

1 Answer 1

1

You can't query anything in the template in connectedCallback, because the component hasn't been rendered yet. If you query the records in an event handler (e.g. a button click), it should work fine. Also, it's rather normal to just use a conditional render instead of slds-hidden.

// Controller code
showCombobox;

<!-- Template markup -->
<lightning-combobox if:true={showCombobox}

There's no need to directly manipulate styles here.

6
  • Thank you @sfdcfox, I have a follow-up question, I want to set a default value for this combobox, and I need it to be populated before I call the server side method (the default value will be used as a parameter for the apex method) - How can I do this without populating the value in the connectedCallback?
    – Json
    Commented Jul 15, 2021 at 10:21
  • @Json Why do you want to avoid setting mylist in connectedCallback?
    – sfdcfox
    Commented Jul 15, 2021 at 10:24
  • I need to check first who is the running user, and then per the running user I set the combobox to the appropriate value + calling the apex method to retrieve its related stuff
    – Json
    Commented Jul 15, 2021 at 10:25
  • How are you calling the Apex? Is it a wired method, or imperative call?
    – sfdcfox
    Commented Jul 15, 2021 at 10:29
  • imperative call
    – Json
    Commented Jul 15, 2021 at 10:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .