Issue With Lightning-Button Click Action (Outside the button) In LWC

Issue:

If your using <lightning-button> in your component and this button is invoking the action even if you clicked outside of the button(it means the horizontally anywhere on the screen).

Route Cause:

This is because by default if your not setting any width to the button it will considers the entire width as the scope of the button.So,if you click anywhere on the screen horizontally to this,it will invokes the action automatically.

If you look at the below image the blue line has occupied entire width of the screen ,it means the scope of the button is spread like blue line.So,if you click anywhere it's get invoked automatically.

Sample button code:

 <template if:true={showIsCheck} class="slds-is-relative">
     <lightning-button label="Check ?" title="Check" 

          variant="success" onclick={checkIsCan} 

          class="slds-align_absolute-center slds-m-top_medium ">

     </lightning-button>
    
        <div if:true={isLoading}>
            <lightning-spinner alternative-text="Loading..." variant="brand" size="large" class="slds-is-absolute"></lightning-spinner>
        </div>
 </template>

Workaround:

Please set the width of the button so that the scope of the button will automatically bounds within the button.If you look at the below code snippets and image you can clearly undertsraynd that as soon as I sets the width the blue line is becoming small(Scope of the button).

 <template if:true={showIsCheck} class="slds-is-relative">
        <lightning-button label="Check ?" title="Check" 

            variant="success" onclick={checkIsCan} 

          class="slds-align_absolute-center slds-m-top_medium slds-size_medium"></lightning-button>
    
        <div if:true={isLoading}>
            <lightning-spinner alternative-text="Loading..." variant="brand" size="large" class="slds-is-absolute"></lightning-spinner>
        </div>
 </template>

a)when size as small

b)when size as medium

Thanks for visiting..hope this helps you!

Hyperlinks in Lightning-DataTable To Open The Record Detail Page In Classic(Non-Console) Or Lightning(Non-Console)

If your using <lightning-datatable> in html file to show the list of records and you want to provide an hyper link to open the record from the same table.

This can be done easily easing the  typeAttributes of lightning-datatable. Please use the below code snippet to display list of accounts with an option to open the account with hyperlink.This below code works only in Lightning(Console or Non-Console) and in Classic Non-Console applications.

Note: If you want the same thing in classic console as well please refer my previous post

GetAllAccountsCntrl.cls

public with sharing class GetAllAccountsCntrl {
   @AuraEnabled(cacheable=true)
    public static List<Account> getAllAccounts() {
        return [SELECT Id, Name,AccountSource,Website, Createddate FROM Account Limit 10];
    }

}

AccountListTable.js

import { LightningElement ,wire,track} from 'lwc';
import getAllOpps from '@salesforce/apex/GetAllAccountsCntrl.getAllAccounts';

export default class AccountListTable extends LightningElement {
    @track columns = [
        {
            label: 'Account Name',
            fieldName: 'nameUrl',
            type: 'url',
            typeAttributes: {label: { fieldName: 'Name'}, 
            target: '_blank'},
            sortable: true
        },
        {
            label: 'Account Source',
            fieldName: 'AccountSource',
            type: 'text',
       
        },
  {
            label: 'Website',
            fieldName: 'Website',
            type: 'text',
        },
        {
            label: 'Close date',
            fieldName: 'closeDate',
            type: 'date',
        }

    ];

    @track error;
    @track listAccsData = [];


    @wire(getAllAccounts)
 wiredAllAccounts({ error, data }) {
        if (data) {
         
            this.listAccsData = data.map(record => Object.assign(
                { "nameUrl": '/'+record.Id},
                record
            ));
        
        }
        else if (error) {
            this.error = error;
            this.listAccsData = null;
          
        }
 }
}

AccountListTable.html

<template>
    <lightning-card  title="Account Details">
        <lightning-datatable data={listAccsData} columns={columns} key-field="Id"></lightning-datatable>        
    </lightning-card> 
</template>

Output

Note: If you want the same thing in classic console please refer my previous post

Hope this helps you..Enjoy..!