0

I am trying to populate the field that is nested within an aura component using DOM elements.

I am able to access the parent with document.getElementsByTagName; however, I cannot access the child component that is nested in the parent lightning-input. After looking into the documentation, it mentions that we cannot use document or window properties to query these nested DOM elements, but instead, we need to use the template as the root target.

Reference
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_dom_work

Is it possible to view the nested input tags and modify the text within it?

Example Format

<div>
    <lightning-input>
        <input id="input-0">
    </lightning-input>
</div>

For more context, the input tag acts as a login field, where I am looking to populate the field when a button is pressed externally (within a mobile app).

2
  • From parent component, you need to call a method on child who has the components in its own DOM, in child's method you can get the fields and return back to parent. I haven't seen inputs nested inside lightning-input tag, base input component is an alternative to regular HTML inputs with LWC related features. If you want to use input, use it instead.
    – Raul
    Jun 23 at 10:39
  • Thank you for your response Raul. I am currently using a custom-built lightning page which uses the nested input fields. I also haven't seen input fields nested in the lightning-input but I will connect with my team to see if we can work around this issue. I am mostly looking to modify the nested input rather than fetching it's value, but we will look into modifying the lightning page in that case.
    – KChelvan
    Jun 23 at 14:58

1 Answer 1

1

You can't nest input fields, neither in LWC or even normal HTML. The reason why this doesn't work is because lightning-input doesn't have a default slot. Even getting the input element wouldn't set the lightning-input value, as that's a separate input field.

All that said, you can just set the value directly:

handleClick(event) {
  this.template.querySelector('lightning-input').value = 'Hello World!';
}

You can give the element some unique attribute if you need to retrieve it amongst several such fields on the page, such as:

<lightning-input name="username"></lightning-input>

...

const input = this.template.querySelector('lightning-input[name=username]');
input.value = 'Hello World!';
2
  • Thank you for your detailed response. I am currently using a custom-built lightning page which uses the nested input fields. I also haven't seen input fields nested in the lightning-input but I will connect with my team to see if we can work around this issue. I have applied the same solution you suggested; however, the validations do not detect the injected text, which is why I was looking into injecting this information into the nested input field as well.
    – KChelvan
    Jun 23 at 14:56
  • @KChelvan you can call reportValidity on the element afterwards to report any errors.
    – sfdcfox
    Jun 23 at 15:14

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.