I have an issue with my implementation of a Lightning Web Component. When I override the “New”-button on any object and change the content source to a Lightning component, the entire page gets disrupted as soon as you click on a element.

If I click on any rendered element, no matter if it’s an input or just a simple div, the entire page scrolls automatically. This behaviour is not even consistent on other browsers. On Chrome, the page scrolls downwards a bit. Whilst on Firefox and Safari, the page scrolls up.

However, if I use exactly the same component and override the “Edit”-button instead – it works as expected.

I've attached an gif to illustrate the issue.

Here's some example code (also shown briefly in the gif).

// ProjectCreateContainer.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,lightning:actionOverride,flexipage:availableForRecordHome"
  <c:mockup />

// mockup.html

    <lightning-input label="click me"></lightning-input>

enter image description here

  • 2
    It would help if you can post the code which is problematic. – salesforce-sas Aug 21 '19 at 13:29
  • I've updated the original post with some example code. – Dinco Aug 27 '19 at 13:20
  • Unable to reproduce it. – salesforce-sas Aug 27 '19 at 13:28
  • We've been able to reproduce it in multiple (three, to be exact) sandbox environments. All independent from each other. Also, it's very clear that Salesforce is loading entirely different assets (css, js) in the background in comparison to the "Edit"-override (even the background image is changing). – Dinco Aug 28 '19 at 13:47
  • have you named the components same in all orgs like mockup, ProjectCreateContainer, etc ? – salesforce-sas Aug 28 '19 at 13:54

I've contacted Salesforce support and they've confirmed that this indeed is a bug. They were able to reproduce the same exact problem and they provided an alternative solution:


<aura:component implements="lightning:actionOverride,lightning:isUrlAddressable">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>


  myAction : function(component, event, helper) {

  doInit: function(component, event, helper) {
    var evt = $A.get("e.force:navigateToComponent");
      componentDef : "c:lwcBugTest",
      componentAttributes: {
        parentRecordId : component.get("v.parentRecordId")

I've implemented the solution above and it worked for me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.