Auto scrolling doesn't work well with objects/fieldsets

[felskov]

Describe the bug

When you first put focus into an object or a fieldset, then the auto scrolling will bring you to the top of that fieldset. This can be very annoying if you have large fieldsets, and the user has scrolled down to begin inputting text into a field near the bottom of the fieldset, as he will be scrolled back up when clicking the input.

To Reproduce

Steps to reproduce the behavior:

1. Create a new, empty project using sanity init
2. Copy in the schema defined below (see additional context)
3. Start studio using sanity start
4. Create a new document
5. Scroll down to the bottom of the form, and click "Input 10" at the bottom of the object
6. You'll be scrolled up to the top of the fieldset to see the "Object" heading

Expected behavior

I'd expect that "Input 10" was scrolled into view, not the fieldset itself.

Screenshots

Which versions of Sanity are you using?

> sanity versions
@sanity/cli             2.0.9 (up to date)
@sanity/base            2.0.9 (up to date)
@sanity/components      2.0.9 (up to date)
@sanity/core            2.0.9 (up to date)
@sanity/default-layout  2.0.9 (up to date)
@sanity/default-login   2.0.9 (up to date)
@sanity/desk-tool       2.0.9 (up to date)
@sanity/vision          2.0.9 (up to date)

What operating system are you using?

MacOS Catalina Version 10.15.7 (19H2)
Chrome Version 86.0.4240.183 (Official Build) (x86_64)

Which versions of Node.js / npm are you running?

Run npm -v && node -v in the terminal and copy-paste the result here.

> npm -v
6.14.8
> node -v
v14.15.0

Additional context

I've successfully reproduced the issue by using the following schema in an otherwise freshly created, empty Sanity project:

export const documentSchema = {
  name: "page",
  type: "document",

  fields: [
    {
      name: "input1",
      type: "string",
    },
    {
      name: "input2",
      type: "string",
    },
    {
      name: "input3",
      type: "string",
    },
    {
      name: "input4",
      type: "string",
    },
    {
      name: "input5",
      type: "string",
    },
    {
      name: "input6",
      type: "string",
    },
    {
      name: "input7",
      type: "string",
    },
    {
      name: "input8",
      type: "string",
    },
    {
      name: "input9",
      type: "string",
    },
    {
      name: "input10",
      type: "string",
    },
    {
      name: "object",
      type: "object",

      fields: [
        {
          name: "input1",
          type: "string",
        },
        {
          name: "input2",
          type: "string",
        },
        {
          name: "input3",
          type: "string",
        },
        {
          name: "input4",
          type: "string",
        },
        {
          name: "input5",
          type: "string",
        },
        {
          name: "input6",
          type: "string",
        },
        {
          name: "input7",
          type: "string",
        },
        {
          name: "input8",
          type: "string",
        },
        {
          name: "input9",
          type: "string",
        },
        {
          name: "input10",
          type: "string",
        },
      ],
    },
  ]
}

[felskov]

For anyone interested, we're no longer seeing this issue after upgrading to v2.1.4 :)

[RitaDias]

Hi @felskov 👋
I'm really glad to hear this 😄

Thank you so much for updating this thread and sorry for the long delay.
Have a wonderful day! ✨