When the component is used more than once, the lookup.setDefaultResults call doesn't work

[stephenpstanley]

I've managed to get the first instance of the call to work by making the following changes as when running synchronously, the call to querySelector was returning null, but I think you may need to use a querySelectorAll if the component is used more then one within a parent component. I'm not sure I'm skilled enough to sort this out, but will give it a try and let you know

async initLookupDefaultResults() {
    // Allow the DOM to update.
    await Promise.resolve();
    // Make sure that the lookup is present and if so, set its default results
    const lookup = this.template.querySelector('c-lookup');
    if (lookup) {
        console.log('Calling setDefaultResults');
        lookup.setDefaultResults(this.recentlyViewed);
    }
}

[pozil]

Hi @stephenpstanley, yes, the provided example only works for a single lookup because of the way CSS selectors work. You'll likely need distinct default values if you have several lookups. Instead of using a c-lookup tag selector which is common to all lookup instances, you can use CSS class selectors like .myLookup1, .myLookup2...

[stephenpstanley]

I thought might be the way to do it but for some reason I can’t pick up the CSS selectors. I’ve had to resort to cloning the lookup component and calling the two copies separately

Stephen Stanley

On 22/05/2023, at 18:27, Philippe Ozil @.***> wrote:



Hi @stephenpstanleyhttps://github.com/stephenpstanley, yes, the provided example only works for a single lookup because of the way CSS selectors work. You'll likely need distinct default values if you have several lookups. Instead of using a c-lookup tag selector which is common to all lookup instances, you can use CSS class selectors like .myLookup1, .myLookup2...

— Reply to this email directly, view it on GitHubhttps://github.com/pozil/sfdc-ui-lookup-lwc/issues/136#issuecomment-1556612191, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AGFJDKDOOQNY2I2XBCLBHXLXHMBMZANCNFSM6AAAAAAYJUV5LE. You are receiving this because you were mentioned.Message ID: @.***>

[pozil]

It does work like this. You probably missed something in your code. For example you can modify the sample lookup app to introduce a second lookup with specific focus controls:

<c-lookup
    class="myLookup1"
    selection={initialSelection}
    errors={errors}
    onsearch={handleLookupSearch}
    onselectionchange={handleLookupSelectionChange}
    label="Search"
    placeholder="Search Salesforce"
    is-multi-entry={isMultiEntry}
    new-record-options={newRecordOptions}
    required
>
</c-lookup>

<c-lookup
    class="myLookup2"
    selection={initialSelection}
    errors={errors}
    onsearch={handleLookupSearch}
    onselectionchange={handleLookupSelectionChange}
    label="Search"
    placeholder="Search Salesforce"
    is-multi-entry={isMultiEntry}
    new-record-options={newRecordOptions}
    required
>
</c-lookup>

<div class="slds-var-m-top_large">
    <lightning-button label="Focus 1" onclick={handleFocus1}></lightning-button>&nbsp;
    <lightning-button label="Focus 2" onclick={handleFocus2}></lightning-button>&nbsp;
    <lightning-button label="Clear" onclick={handleClear}></lightning-button>&nbsp;
    <lightning-button variant="brand" label="Submit" onclick={handleSubmit}></lightning-button>
</div>

handleFocus1() {
   this.template.querySelector('.myLookup1').focus();
}

handleFocus2() {
    this.template.querySelector('.myLookup2').focus();
}

[stephenpstanley]

Thanks - I’ll take a look in the morning. If I use that approach, when the components lookup field is updated, how do I identify which instance of the component has been updated?

Stephen Stanley

On 22/05/2023, at 20:08, Philippe Ozil @.***> wrote:



It does work like this. You probably missed something in your code. For example you can modify the sample lookup app to introduce a second lookup with specific focus controls:

<c-lookup class="myLookup1" selection={initialSelection} errors={errors} onsearch={handleLookupSearch} onselectionchange={handleLookupSelectionChange} label="Search" placeholder="Search Salesforce" is-multi-entry={isMultiEntry} new-record-options={newRecordOptions} required

<c-lookup class="myLookup2" selection={initialSelection} errors={errors} onsearch={handleLookupSearch} onselectionchange={handleLookupSelectionChange} label="Search" placeholder="Search Salesforce" is-multi-entry={isMultiEntry} new-record-options={newRecordOptions} required

     

handleFocus1() { this.template.querySelector('.myLookup1').focus(); }

handleFocus2() { this.template.querySelector('.myLookup2').focus(); }

— Reply to this email directly, view it on GitHubhttps://github.com/pozil/sfdc-ui-lookup-lwc/issues/136#issuecomment-1556738826, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AGFJDKEXIYKRLWNJAFSKDJ3XHMNGVANCNFSM6AAAAAAYJUV5LE. You are receiving this because you were mentioned.Message ID: @.***>

[pozil]

If you want to share a handler, you can retrieve the value of a dataset attribute like this is done here: https://github.com/pozil/sfdc-ui-lookup-lwc#passing-custom-data-to-javascript-and-apex-optional