function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Alejandro BraunschweigAlejandro Braunschweig 

lightning-input-field

Hello everyone, good day.

I have an issue I have not been able to resolve; it involves the "lightning-input-field component", which according to the specification supports the "focus()" method.

I have been unable to achieve such simple thing under the following scenario: LWC comprised of: modal window -> lightning-record-edit-form -> list of lightning-input-field

Said list is dynamically creaed by:

<template for:each={newFields} for:item="field">
    <div class="half-view" key={field.name}>
        <lightning-input-field field-name={field.name} name={field.name}></lightning-input-field>
        <span class="fieldMessageStyle">{field.message}</span>
    </div>
</template>

My attempt to invoke the method simply does nothing; I mean it, no errors, no warnings, the focus stays where it is, i.e. it does not get sent anywhere else.

this.template.querySelector('lightning-input-field.slds-form-element.slds-form-element_stacked[c-lwc-lwc]').focus();

(I just want to target the first item in the list).

I have place a static lightning-combobox in the same modal using the same html node structure, and it does recieve the focus when invoked:

this.template.querySelector('lightning-combobox[c-lwc-lwc]').focus(); 

I could find in the documentation anything pointing to this "control" ignoring its focus method if dynamically created. Anyone know how to get around this?

Thank you all for your time and interest.

ShirishaShirisha (Salesforce Developers) 
Hi Alejandro,

Greetings!

Unfortunately lightning-input-field doesn't have @api method focus. You can use lightning-input instead.

Kindly mark it as best answer if it helps so that it can help others in the future.

Warm Regards,
Shirisha Pathuri
Alejandro BraunschweigAlejandro Braunschweig

Hello Shirisha;

Thank you for your input; however, accoding to SF documentation: "https://developer.salesforce.com/docs/component-library/bundle/lightning-input-field/specification", lightning-input-field do support the "focus" method; or least that's what it says.

The entire construct relies on the "lightning-record-edit-form" out-of-the-box capacity to lock on the given object type and record in order to "manage" its fields, i.e. load its pickslist options behind scenes, etc., and its ability to create/edit a record. Switching to "lightning-input", not only would immediately sacrifice all that functionality, but would also require a complete refactor of its HTML and underlying JS to manually handle/recreate the lost/desored functionality, which time, unfortunately, does not allow.

Perhaps, under different cicumstances your suggestion may be applicable. anyhow, thanks again.

Cheers!