Salute!

I have a problem whose solution I can’t find in any way.

On the account page there are a couple of drop-down lists implemented through "lightning combobox". In one list there are contacts, in the other there are accounts, and both of them are needed to create a new relation (ACR) using JS code. Because to create an ACR-object Id of contacts and accounts is required (not names), from the drop-down lists I take the value ("event.target.value") which equals either contact.Id or account.Id. And it works fine with contacts - the user selects the name of the contact, the program catches the Id value.

But the strange thing happens with the list of accounts - if you select an account by name, then no ACR is created, the error 'An error occurred while trying to update the record. Please try again.'

But if you add strings with account's Ids to the drop-down list of accounts, not just names - when Id is selected by user, the record is created correctly. Moreover, it’s enough to create one new record using the Id field, and all subsequent records can be created simply by selecting the names of contacts and accounts. That is, somewhere there is a variable whose value is enough to be determined once to make it all work. I can't found her.

I would be happy to check the values ​​of all variables in JS using console.log(), but this command is not available in my environment, giving an error 'Unexpected console statement.eslint(no-console)', which is fixed by adding a file ".eslintrc.js", which at the same time breaks imports in JS. So I’m checking everything almost blindly by updating the page on force.com.

First experience with JS, so apologize in advance if the question is incorrect or elementary.

Lists example:

List Code:

<select class="slds-select" name = "contactSelect" onchange={changeHandler} > 
       <template for:each={allContacts.data} for:item="contact">
              <option key={contact.Id} value={contact.Id}>{contact.Name}</option>  
       </template>
 </select> 
 
 <select class="slds-select" name = "accountSelect" onchange={changeHandler} >
       <template for:each={allAccounts.data} for:item="account">
              <option key={account.Id} value={account.Id}>{account.Name}</option>
              <option key={account.Id} value={account.Id}>{account.Id}</option>      
        </template>
</select>

JS part:

changeHandler(event) {
        const field = event.target.name;
        if (field === 'contactSelect') {
            this.contactId = event.target.value;
            }

        if (field === 'accountSelect') {
            this.accountId = event.target.value;
            }   
        }    

    createRelation() {
       const fields = {};
       fields[CON_FIELD.fieldApiName] = this.contactId;
       fields[ACC_FIELD.fieldApiName] = this.accountId;
       fields[ROLES_FIELD.fieldApiName] = this.roles;

       const recordInput = { apiName: ACCOUNT_CONTACT.objectApiName, fields };
       createRecord(recordInput)
           .then(acr => {
               this.contactId = acr.ContactId;
               this.accountId = acr.AccountId;
               this.roles = acr.Roles;
               this.dispatchEvent(
                   new ShowToastEvent({
                       title: 'Success',
                       message: 'Account created',
                       variant: 'success',
                   }),
               );
           })
           .catch(error => {
               this.dispatchEvent(
                   new ShowToastEvent({
                       title: 'Error creating record',
                       message: error.body.message,
                       variant: 'error',
                   }),
               );
           });
   }