Firefox - Gridfield AddExistingAutocompleter scrolls the page to the top (AJAX related?)

[mooror]

The Problem

After typing into the Gridfield's AddExistingAutocompleter component, a spinner is displayed while the AJAX request is sent to retrieve the list of existing items to display. Once the request completes and the list is displayed, the page jumps (or scrolls) to the very top leaving the displayed list floating.

Expected Behavior

After typing into the input the spinner should be displayed until the list is shown, but the browser should NOT scroll to the top of the page.

Background information

I originally discovered this issue while creating my own AJAX powered field and testing it using Silverstripe 4.7.1. I noticed that when my field completed it's AJAX request the page would jump to the top. At first I thought this was due to my implementation, so I decided to find a build in Silverstripe field that used AJAX to retrieve data, and thought of the GridFieldAddExistingAutocompleter component. After testing it I found it also had this AJAX request issue.

At this point in development, I had done multiple CMS modifications, so I assumed one of those had created the problem. So I installed a fresh install of Silverstripe 4.9.0 to see if I could reproduce the problem. And I could (see steps to reproduce below)

I also checked for errors in Firefox's developer console when the AJAX request is submitted, but none were created.

At some point in this process I also tested this using Opera (V.78.0.4093.184) and found that this was NOT reproducible using it, which is why I think this may be Firefox specific (I'm not 100% sure on that though).

Steps to Reproduce

1. Create a fresh silverstripe 4.9.0 using silverstripe's composer based install instructions (composer create-project silverstripe/installer my-project. then configuring the .env file, etc.).
2. Add the following code to the app/src/Page.php file:

<?php

namespace {

    use SilverStripe\Forms\TextField;
    use SilverStripe\Forms\GridField\GridField;
    use SilverStripe\Forms\GridField\GridFieldConfig_RelationEditor;
    
    use SilverStripe\CMS\Model\SiteTree;

    class Page extends SiteTree
    {
        // OPTIONAL - For making the page longer and the jump more noticeable
        private static $db = [
            'Example1' => 'Varchar',
            'Example2' => 'Varchar',
            'Example3' => 'Varchar',
            'Example4' => 'Varchar',
            'Example5' => 'Varchar',
            'Example6' => 'Varchar',
            'Example7' => 'Varchar',
        ];

        private static $has_one = [];
        
        private static $has_many = [
            'LinkedPages' => SiteTree::class,
        ];
        
        public function getCMSFields() 
        {
            $fields = parent::getCMSFields();
            // OPTIONAL - For making the page longer and the jump more noticeable
            $fields->addFieldToTab('Root.Main', TextField::create('Example1','Example 1'));
            $fields->addFieldToTab('Root.Main', TextField::create('Example2','Example 2'));
            $fields->addFieldToTab('Root.Main', TextField::create('Example3','Example 3'));
            $fields->addFieldToTab('Root.Main', TextField::create('Example4','Example 4'));
            $fields->addFieldToTab('Root.Main', TextField::create('Example5','Example 5'));
            $fields->addFieldToTab('Root.Main', TextField::create('Example6','Example 6'));
            $fields->addFieldToTab('Root.Main', TextField::create('Example7','Example 7'));

            $gridConfig = GridFieldConfig_RelationEditor::create();
            $fields->addFieldToTab('Root.Main', GridField::create(
                'LinkedPages',
                'Linked Pages',
                $this->LinkedPages(),
                $gridConfig
            ));
            
            
            
            
            return $fields;
        }
    }
}

3. Open Firefox and login to the CMS interface and view one of the pages
4. Scroll down and start typing in the AddExistingAutocompleter field
5. Wait till request complete's and watch the browser jump to the top of the page

Screenshots of issue

IMPORTANT NOTE: These screenshots were taken when I was using my other 4.7.1 installation. So some things may look different, but it illustrates the problem just as well (and I was lazy and didn't want to re-take and edit a bunch of screenshots)

Screenshot Note: I had to manually draw that list of existing items because my screenshot program kept making the browser loose focus (which in turn would hide the ajax results list)

System Information

Operating System: Windows 7 Home Premium 64-bit (SP 1)
Browser: Firefox (v.94.0.1)
Silverstripe Version(s): Tested on 4.7.1 and 4.9.0
Developer Console Errors: None
Other Information: I tested this using Opera (V.78.0.4093.184) and found that this was NOT reproducible using it