2022 Developer Survey is open! Take survey.

Questions tagged [lwc-dom]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
1 vote
0 answers
34 views

LWC Responsive Tables In Light DOM

I'm trying to build a div-based responsive table in LWC using Salesforce's new "Light DOM" feature. Unfortunately the table won't render properly, it looks like this: Following is the html-...
user avatar
  • 11
0 votes
0 answers
33 views

jest dom is not updating after element.innerText is set imperatively

I am testing a component that renders a table. Each row of the table body has a column that contains a button, when the button is pressed a javascript handler modifies the cell by setting the ...
user avatar
  • 2,584
0 votes
0 answers
25 views

LWC Could show checkbox group inside lightning-tabset correctly

In order to provide users with a UI in which he could select some products with groups of products based on global category I am trying to show lightning-checkbox-group inside lightning-tabset, this ...
user avatar
0 votes
1 answer
57 views

Resetting rich text area in lwc record edit form

I have a lwc with the following code in html <template> <lightning-record-edit-form object-api-name={object} onsuccess={handleRecordCreate}> <lightning-messages></...
user avatar
  • 1,071
1 vote
3 answers
99 views

How to use querySelector inside forEach in HTML file of LWC bundle?

This might be super easy but I am stuck. I have a lightning card inside forEach on the template. In Javascript, I need to find the card, and add dynamic css based on some business logic. However, ...
user avatar
0 votes
1 answer
17 views

Communicating between parent and child which is multiple levels deep

So I have parent component and child components as so <parent> <childl1 contracts = {contracts} oncontractsupdate = "handleContractsUpdate"> <childl2 contracts = {contracts}...
user avatar
0 votes
1 answer
57 views

Open multiple accordion section using active-section-name not working as expected

i tried to create accordion section dynamically by constructing the section name and the data inside accordion in the JS file. Method in JS will call apex method that will deserialize JSON response ...
user avatar
0 votes
1 answer
164 views

How to use spinner (LWC) with setTimeout

I have an LWC component that has a spinner in it as shown below <template> <form> <div if:true={isLoading}> <lightning-spinner alternative-text="...
user avatar
  • 15
0 votes
1 answer
35 views

Overlay Library - using referenceSelector to reference Element in Child Component

I have a parent aura component in which I have <lightning:overlayLibrary aura:id="overlayLib"/> included. I want the popover to be displayd next to a DOM element which exists inside a ...
user avatar
0 votes
0 answers
41 views

Inject Angular JS in LWC

We have a proper Angular JS 1.4 application with App, Controller and service layers that works in VF page which we need to replicate exactly in LWC. We have tried using LWC:dom="manual" to ...
user avatar
1 vote
1 answer
38 views

Setting class name dynamically in LWC

I want to add class to a div dynamically,something like this : <div class={getShowHideClassesInvoicesAndPayments} > #!----content-# </div> Javascript: ...
user avatar
0 votes
0 answers
32 views

This is my LWC and I want some flexibility in it

I want flexibility so that in the first row it ends with 105 and in the next row it starts with 201; it means it automatically creates a row start with initials 1,2,3 and it means if it ends with 105, ...
user avatar
0 votes
1 answer
165 views

How to test methods that change object fields (and some others methods) not decorated with @api using JEST in LWC

My LWC application includes a modal window and is written for use in Salesforce and uses Apex. I had a hard time writing tests for some functions, but I couldn't test the application until the end. I ...
user avatar
2 votes
1 answer
53 views

Pass param to JS from html for rendering during iteration? [closed]

I want to check if the metadata.datatype === 'Checkbox' although i am not able to pass the param from html to js in LWC. Code: <template> <template for:each={caseMetadata.data} for:item=&...
user avatar
0 votes
0 answers
25 views

How to over come the error :- The `innerHTML` property is available only on elements that use the `lwc:dom="manual"` directive?

On click of a div i am trying clear the content and I am making it editable. so when i try to get the innerHTML it has no issues but when i try to modify the innerHTML , i get a console error as below ...
user avatar
2 votes
1 answer
41 views

LWC and export module this context

I have a util function where I used the toast message function: import { ShowToastEvent } from "lightning/platformShowToastEvent"; const showToast = function (toastTitle, toastMessage, ...
user avatar
  • 23
0 votes
0 answers
98 views

Button-menu-item's displays below DIV's with higher z-index

I'm creating a process design App with process steps. Each process step is represented by a child LWC component having a container div with a different z-index, to allow correct placement and drag &...
user avatar
  • 16
0 votes
0 answers
46 views

LMS retrieval/update lags 1 click behind

It seems that the component relying on the URL update doesn't get the correct mediaId from the URL. The first click gets the Something went wrong.... <template>, then each following click is 1 ...
user avatar
0 votes
1 answer
104 views

Lightning Datatable not rendering

I am facing a intermittent issue where my datatable is not rendering. It does render first time. Basically, its takes data from a parent component (opps). In below snippet the paginator components ...
user avatar
0 votes
2 answers
106 views

LWC: change class of lightning-input checkbox depending on status

I need to give a checkbox a class name depending on whether the checkbox is checked or not. The checkbox is being displayed inside a lwc template. How can I achieve this? <template for:each={...
user avatar
  • 127
0 votes
1 answer
64 views

How i can convert this toggle Aura into LWC

I am not able to convert Controller in LWC JS below is my code to show toggle or helptext Aura Component <aura:component > <div class="slds-form-element"> <div class="...
user avatar
  • 13
0 votes
1 answer
42 views

onRender event but not after every save

I have a simple component that just pops up a browser alert if a specific field is filled in when the page finishes rendering. I'm not too familiar with the different DOM events and when they fire, ...
user avatar
  • 63
0 votes
1 answer
223 views

Error during LWC component connect phase: [Maximum call stack size exceeded]

I am trying to assign value to a property of my parent component's constructor method. Below is the html code: <template> {welcomes} <c-testfile></c-testfile> </template&...
user avatar
0 votes
1 answer
42 views

Payload not getting updated by method in setter

Trying to write a getter and setter method to simply update my JSON payload to have name.first be the student's first and last name so that way the lightning-button can show as their full name, this ...
user avatar
0 votes
1 answer
41 views

Struggling to find correct data-bind structure for JSON payload

I am having trouble rendering multiple for:each loops inside of each other and am pretty sure it is the structuring of how I have it. But I am not seeing where the issue is taking place. So when I ...
user avatar
0 votes
0 answers
81 views

ERROR : There were errors while compiling component

Can anybody please help me out in solving this issue ERROR IN LOCAL DEVELOPMENT ORG : Couldn't find the compiled component. If this component has a dependency on a component in the org or a component ...
user avatar
0 votes
0 answers
48 views

DOM handling in Experience Builder: Components inserted via code vs. drag and drop

I'm trying to set up a component registration process as described here . This works fine for the component c-sub-navigation, which I inserted manually. The second component c-knowledge-display is ...
user avatar
0 votes
1 answer
129 views

How to remove this huge distance between label and input in LWC?

How to remove this huge distance between label and input in LWC. I didn't use custom styles, only from the salesforce lightning design system. Here's my code from the HTML file: <div> &...
user avatar
0 votes
1 answer
38 views

Correct representation of DOM in LWC?

Sharing my visual understanding of DOM. Please let me know if this is correct? Also please do share more useful material or your viewpoints. Will be helpful.
user avatar
  • 750
0 votes
1 answer
61 views

LWC constructor and wire adapter

Already wire adapter was there in LWC i.e. @wire annotation to display the records,so can we do the same thing (display the records) through LWC constructor also? If yes, then why @wire feature was ...
user avatar
0 votes
0 answers
58 views

LWC order of execution

I'm struggling with the execution order of a parent and child components, the main problem is that I'm trying to populate a Chart with dynamic data... any help is welcome. casesOverview.html (Parent) ...
user avatar
0 votes
0 answers
78 views

LWC that implements Power BI JS is throwing an error

I have a LWC that implements this Power BI JS module. Here is the HTML portion of the LWC: <template> <div data-id="embed-container" style="height: 480px" lwc:dom="...
user avatar
0 votes
1 answer
598 views

How to format a CURRENCY type field in a datatable in LWC?

How to format a CURRENCY type field (named "Amount") in a datatable so that there are only 2 digits at the end of the number after the dot (in the fractional part)? The table displays an ...
user avatar
0 votes
0 answers
67 views

Accessing attribute value in LWC jest shadow dom

I am passing a data to child components like so: componentToTest.js: export default class ComponentToTest extends NavigationMixin(LightningElement) { columns = [ { label: ...
user avatar
0 votes
1 answer
30 views

Unable to display LWC component in Lightning record page

I am not able to see the ProgreesIndicator with the custom names that I retrieved from apex method Please help me!! HTML: <template> <lightning-card> <lightning-progress-...
user avatar
0 votes
1 answer
52 views

Duplicate values are getting added on clicking of new button in LWC

I have one button New which will open model popup window <lightning-button label="New" slot="actions" onclick={openModel}></lightning-button> On click of button ...
user avatar
  • 7
0 votes
0 answers
83 views

LWC DOM doesn't get refreshed on browser back button

I have an LWC that gets loaded on a custom button (Detail Page Button type ) on the Quote record page. I have a combo box (in the child component) where I select a value, but when I click on the ...
user avatar
0 votes
0 answers
1k views

Dynamically building a record edit form from fieldset

I am working on creating a lwc that builds a record edit for dynamically for case closure, to replace the classic functionality of the Case Close Page. I have a simple APEX class that I can pass a ...
user avatar
  • 83
0 votes
0 answers
34 views

Placeholder in html dynamically

Hello MY requirement to change the placeholder of an html dynamically to change its height and width in lwc this is my above code how can i change dynamically its height and width the placeholder ...
user avatar
4 votes
1 answer
129 views

How can I hide the header with navigation menu on just certain Digital Experience pages?

I have an existing Digital Experience site that, for most pages, needs the header that includes the navigation menu and profile access. However, there are certain pages that are intended to be only ...
user avatar
  • 26.7k
0 votes
1 answer
368 views

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

I need your help. I have 2 setters in my LWC component, where I am setting up input field value for time in one and other I am setting up output format. But set value setter is called first before set ...
user avatar
1 vote
1 answer
180 views

How to restrict window.addEventListener to a particular record in LWC

I am using an iframe inside lwc component and implemented window.addEventListener(“message”, handleListener) to catch the response from iframe. I have added the lwc component to multiple record page. ...
user avatar
0 votes
0 answers
35 views

RefreshApex is not working with data table infinite loading [duplicate]

I've created a data table and used infinite scrolling & used an offset to get a set of value from backend. but refresh apex is not working with it as the wire data reference changes once new value ...
user avatar
  • 1
0 votes
0 answers
23 views

Need to get row value from datatable in JS in LWC, but unable to get it [duplicate]

I have simple datattable where i am displaying couple of columns ,on click of any row in datatable i need to get the value from Name column to JS for further processing <template> <lightning-...
user avatar
  • 7
1 vote
0 answers
159 views

DOMException: Failed to execute 'insertBefore' on 'Node' [closed]

Getting Below error in the console Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. at ...
user avatar
-1 votes
1 answer
169 views

Conditionally add slds-is-selected on multi select dropdown

I have created a multi-select combobox in LWC, passing list of columns to it from the parent components. Its a json which is being passed from parent to child. JSON : [{"align":"left&...
user avatar
  • 3
1 vote
0 answers
63 views

Problem on Winter '22 org - div with lwc:dom="manual", DOM access not honored when calling document.elementsFromPoint(x,y)

Have an existing application with lwc:dom="manual" div. Prior to Winter '22, issuing document.elementsFromPoint(x,y) returned expected "local" document elements (in our case - ...
user avatar
2 votes
1 answer
133 views

Reload child chartJS component onchange of slider value from parent component in LWC

It is working after I refresh the entire page but I need the child component to reload. Parent Component : <template if:true={chartConfigurationSubjective}> <c-acc-child-...
user avatar
0 votes
1 answer
32 views

How to notify the user not to make any changes if other user is making changes to the same data

I have an LWC component in which I'm displaying list of records in table format. I've implemented auto save functionality as well. If some user is making changes to a row and at the same time the ...
user avatar
  • 29
0 votes
1 answer
403 views

Is it possible to use Query Selector from custom child component? [closed]

I have such case. In ParentComponent I need to pick input field. I am using this.template.QuerySelector('inputChildClass') but it keeps returning nothing. Is it even possible to querySelector child ...
user avatar
  • 35