Hot answers tagged

28 votes
Accepted

Order of execution of @wire in lwc

In a typical wire setup, the life cycle will be: constructor wire provisions empty object ({data, error} are each undefined) connectedCallback render renderedCallback wire provisions results from ...
sfdcfox's user avatar
  • 487k
11 votes

Dynamically changing lightning button icon name with setAttribute not working

setAttribute is for setting HTML attributes. For component attributes, use direct assignment: event.target.iconName='utility:check" If you use query selectors, just remember that if it's not an HTML ...
sfdcfox's user avatar
  • 487k
11 votes
Accepted

LWCs cause 10-20 seconds of lag populating a small amount of elements on the page

It's not LWC, actually, but rather Locker Service that's causing the problem. I created a pure LWC as a baseline without Locker Service interfering. This runs in a fraction of a second, much less than ...
sfdcfox's user avatar
  • 487k
9 votes

How to run " $('div').clone().appendTo('.wrapper'); " in LWC?

In LWC, we usually do not create dynamic nodes this way. It is idiomatic in LWC to use a repeating template (for:each and for:item) and only change the data that drives the template, rather than clone ...
sfdcfox's user avatar
  • 487k
8 votes

Inconsistencies between shadow DOM and synthetic DOM on LWC OSS

After looking into all repos and issues for LWC, we have found the solution on the bottom readme of the LWC Recipes OSS repo: The Edge browser currently doesn't support native shadow DOM. If you want ...
Armando Ruiz's user avatar
7 votes
Accepted

Order of execution in Lightning Web Components

@wire( getFieldSetData, {objectName: 'SOBJECTName', fieldSet: 'FIELSETName'} ) This wire in child is getting called even before you get recordId from parent and so you cannot say when will ...
salesforce-sas's user avatar
7 votes
Accepted

How to reset or deselect lightning-radio-group option

Just set the value to undefined like so: <template> <lightning-radio-group name="radioGroup" label="Radio Group" ...
POZ's user avatar
  • 4,354
7 votes
Accepted

How is the <template> tag used in lwc different from one used in web components?

In LWC, the LightningElement's default rendering lifecycle handles this for you. This means that you get to do less typing. However, if you want to include a different template, perhaps based on some ...
sfdcfox's user avatar
  • 487k
7 votes

What is Lightning Element in Lightning Web Component

Additionally to what you found online: LightningElement is the base class for Lightning web components, which allows us to use connectedCallback(). Source. In other words it's a JavaScript class ...
Arthlete's user avatar
  • 4,907
6 votes
Accepted

Keypress ESC in LWC

keyboard up / down events normally should cross the shadow boundary. One important thing is that if you want to listen on div elements that they need a tabindex in order to be "selectable". On this ...
Renji-xD's user avatar
  • 2,791
6 votes
Accepted

Dynamically adding read-only attribute to lightning-input element in lwc framework

The usual way to address this is to hold the "read-only-ness" as tracked state (a change to it causes refresh of the UI) and to then conditionally render the input with or without the required read-...
Phil W's user avatar
  • 35.4k
6 votes
Accepted

LWC + Jest: Make assertions about an element's rendered style

Stumbled across the answer as I was writing up the question. You can access an element's style properties ( ...drum roll... ) via its style property. return Promise.resolve() .then(() => { ...
Matthew Souther's user avatar
5 votes

How to run " $('div').clone().appendTo('.wrapper'); " in LWC?

You can simply rewrite your jsfiddle jQuery snipper to LWC next way: <template> <div class="container" lwc:dom="manual"></div> <button onclick={onAddNoteButtonClick}>...
Oleh Berehovskyi's user avatar
5 votes

Get labels and values of each field in lightning-record-view-form in LWC

You should use onload event to fetch the record details. Also you cannot get the label and field API name directly - you need to get them separately. <lightning-record-view-form record-id={...
salesforce-sas's user avatar
5 votes
Accepted

Can you know if a component's event is handled?

No. Strictly speaking, unless you come up with some arrangement with the parent, you cannot tell if an event was actually handled. What would that look like? @api eventHandled() { if(this.eventFired)...
sfdcfox's user avatar
  • 487k
5 votes
Accepted

How to set order of execution for getter/setter in LWC

In most languages, including LWC, you cannot control the order of getters and setters. They can be called in any order, and may even change based on different templates or updates to the runtime ...
sfdcfox's user avatar
  • 487k
5 votes

Alternate to if:false in LWC

As far as I'm aware, you are meant to use either of the two solutions. I would personally recommend flipping the Boolean value, as that is a trivial code change. This is actually similar to most other ...
sfdcfox's user avatar
  • 487k
4 votes

Dynamically set the onclick function in LWC button

You don't have to manually apply onclick event listener to <lightning-button>. But you can handle this or any other event in the container component. Just define the function handleNext: <!--...
Oleh Berehovskyi's user avatar
4 votes

LWC: unit testing component using validity object

After analysis was able to resolve this with the hep of this link https://books.google.co.in/books?id=wlu8DwAAQBAJ&pg=PA512&lpg=PA512&dq=how+to+mock+this.template.querySelector(%...
Barsha Patro's user avatar
4 votes
Accepted

LWC : onchange Handler not getting fired when @track attribute is changed

HTML specifies that onchange handlers only fire for UI (user) updates, not by JavaScript. This isn't a framework limitation or anything, just standard, default behavior of the standards. This prevents ...
sfdcfox's user avatar
  • 487k
4 votes

How do I turn this array into one array in LWC?

["Relationship": "Subscriber", "memberId": "12345","MemberName": "Test Member"] is not a valid array. Arrays are indexed values, such as: [&...
sfdcfox's user avatar
  • 487k
4 votes
Accepted

LWC and export module this context

You can specify this using Function.prototype.call: showToast.call(this, 'Warning','blaaaa','warning', 'dismissible') Or by binding before calling: showToast.bind(this)('Warning','blaaaa','warning', '...
sfdcfox's user avatar
  • 487k
4 votes
Accepted

Cannot change or access class member variables from callback function

function dragstarted(d) Creates a new this context. You need to either use an arrow function, or bind to a function on the class. dragstarted(d) => { Or let dragstarted = function(d) { ... } ...
sfdcfox's user avatar
  • 487k
3 votes
Accepted

How to set typeattribute in LWC datatable?

It seems like you are trying to hide the button wherever SME_Document_Collection_Mode__c is Login via link. Modifying the columns will affect the whole table as each object in columns define the ...
salesforce-sas's user avatar
3 votes
Accepted

How to change CSS of a lightning-accordion-section label in Lightning Web Component

This is not possible directly. You can check this answer Requote LWC is enforcing the shadow DOM style scoping, so you can't currently style other Elements outside your shadow tree. ...
salesforce-sas's user avatar
3 votes
Accepted

Show parent field in LWC

[Wire service] always return object with properties data and error. Initially, it returns with both undefined and so if you dont put conditions then you will get errors as you cant access Name of ...
salesforce-sas's user avatar
3 votes

Append child dynamically from JS in LWC

It is not possible to dynamically create LWC components from JavaScript. They can only be created within templates. You need to change your code to either leverage an iteration over some data held in ...
Phil W's user avatar
  • 35.4k
3 votes
Accepted

Selection done in one iteration in aura, is reflecting in every other iteration

I believe your problem is that you are using a "common" variable for all items in your loop, and that when you set the value of those ones, you update them all <c:lwcCustomLookUp objectName="...
Sergio Alcocer's user avatar
3 votes
Accepted

How to get label of the node in lightning-tree in LWC

You only get the name. It's up to you to find the appropriate element. The documentation recommends having a mapping object, though you could also do this on the fly. handleSelect(event) { ...
sfdcfox's user avatar
  • 487k
3 votes
Accepted

How to select a element using querySelector that has dynamic name?

As of now, You can only query elements with the attributes that are exposed on the element - in this case lightning-button-icon-stateful. The attribute name is not directly placed on this element but ...
brahma's user avatar
  • 1,012

Only top scored, non community-wiki answers of a minimum length are eligible