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!