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. Commented Aug 21, 2019 at 13:29
  • I've updated the original post with some example code.
    – Dinco
    Commented Aug 27, 2019 at 13:20
  • Unable to reproduce it. Commented Aug 27, 2019 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
    Commented Aug 28, 2019 at 13:47
  • have you named the components same in all orgs like mockup, ProjectCreateContainer, etc ? Commented Aug 28, 2019 at 13:54

1 Answer 1


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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .