Automattic / Automattic/jetpack

Form Block: On long forms, you can't use the inline block addition button at the end because of the jump in viewport on parent Form block focus

Open
#19,584 1 comment 0 reactions 0 assignees View on GitHub
[Block] Form [Feature] Forms [Pri] Low Enhancement
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

#### Steps to reproduce

1. Starting at URL: Wordpress.com editor (wordpress.com/post/)
2. Add a Form block
3. Add a lot of sub-blocks to that Form block, such that the top of the Form block is out of the viewport.
4. At the bottom of the Form block, click the inline add block button (the one in the Form block, not outside of it)
5. That will put focus on the parent Form block, which will jump the viewport up to the start of the Form block, which will then close the add block pop-up because it is no longer in the viewport

#### What I expected
For the viewport to stay where I could interact with the add block pop-up

#### What happened instead
The viewport jumped to the top of the Form block, closing the pop-up and blocking the addition

#### Why / User Impact
There are many other ways to add a block to the end of the form to get around this, but my user experience was that initially this was pretty confusing - it took me a second to figure out why the viewport was jumping and why I could use the inline adder

#### Browser / OS version
Chrome 90.0.4430.72
Windows 10 Home 19042.928

#### Screenshot / Video
![form_viewport_leap](https://user-images.githubusercontent.com/426388/115437111-1163ea00-a20c-11eb-8d80-18db0b334aaa.gif)

#### Context / Source
#exploratory-testing

Contributor guide

Open the contributing guide

Research direction

Start in the WordPress.com editor at wordpress.com/post/ and reproduce the issue with a long Form block using the inline add block button at its end. Compare the viewport and add-block pop-up behavior before and after focusing the parent Form block; done means the pop-up remains usable at the bottom of a long form.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, php, react
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.