Disruptive behaviour when overriding the "New"-button with a LWC

Question

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"
  access="global"
>
  <c:mockup />
</aura:component>

// mockup.html

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

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:

LWCvertical.cmp

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

LWCverticalController.js

({
  myAction : function(component, event, helper) {

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

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