600154 - When submitting an invalid form, scroll to the first invalid element instead of jumping (with focus)

Status: NEW

(Toolkit :: Form Manager, defect)

Description

[Mounir Lamouri (:mounir)]

When an invalid form is submitted, the first invalid element is focused. For the moment, .focus() is directly call which make the focus jumping. It would be better to have the page scrolling to the invalid element so it would be clear to the users that they did not move to a new page.

Comment 1

[Mounir Lamouri (:mounir)]

Attachment: WIP Patch

This is a WIP patch. I will try to tweak the animation speed a bit and check edge cases + write tests.

Comment 2

[Mounir Lamouri (:mounir)]

Attachment: Patch v1

So, the idea is to have the viewport moving to the invalid element instead of jumping to it so the user will not think the form has been submitted or a new page has been loaded.

Limi, I'm going to push that to try so you will be able to test.

Comment 3

[Mounir Lamouri (:mounir)]

Builds will be available here:
http://ftp.mozilla.org/pub/mozilla.org/firefox/tryserver-builds/[e-mail]-f791551a81ea

Comment 4

[Alex Limi (:limi) — Firefox UX Team]

No tryserver builds yet :(

(also, a link to a test page would be great, I'm sure I can find one online, but I'm also sure you have one handy ;)

Comment 5

[Mounir Lamouri (:mounir)]

(In reply to comment #4)
> No tryserver builds yet :(

I think it has been deleted. I thought it was saved for 14 days :-/
I'm going to push another one.
 
> (also, a link to a test page would be great, I'm sure I can find one online,
> but I'm also sure you have one handy ;)

Indeed, I should have attached one.

Comment 6

[Mounir Lamouri (:mounir)]

Builds should be available here in 2 or 3 hours:
http://ftp.mozilla.org/pub/mozilla.org/firefox/tryserver-builds/[e-mail]-f1d9acddbbcd

Comment 7

[Mounir Lamouri (:mounir)]

Attachment: Testcase

There are 4 input fields in the page, all required. When you click on 'submit', the field on top will be focused, fill it. Then the field on the bottom, the left and finally the right one.

The screen shouldn't move for the first field then it should move for the two next ones. The last one should make the screen move a little bit to make it more visible.

This has been tested with a window of this size (it will probably behave differently depending of the size of the screen given that elements are placed absolutely):
width/height: 942/751

Comment 8

[Mounir Lamouri (:mounir)]

Actually, the previous builds are still available here:
http://ftp.mozilla.org/pub/mozilla.org/firefox/tryserver-builds/old/[e-mail]-f791551a81ea

and if the new ones aren't available when you try, have a look here:
http://ftp.mozilla.org/pub/mozilla.org/firefox/tryserver-builds/old/[e-mail]-f1d9acddbbcd

Comment 9

[gadjo]

Attachment: Testcase

We shouldn't scroll so that invalid input is on the top of window.

Comment 10

[gadjo]

Of course I didn't mean that we shouldn't scroll at all, but there should be some space left above the invalid input. Labels above the inputs are very common case, fixed menu is maybe not so often used, but also happens

Comment 11

[Dão Gottwald [:dao]]

Comment on attachment 493258 [details] [diff] [review]
Patch v1

I don't think we should take large chunks of chrome code messing with content any longer. Can this be written as a content script using the message manager?

Comment 12

[BugBot [:suhaib / :marco/ :calixte]]

The bug assignee didn't login in Bugzilla in the last 7 months.
:tgiles, could you have a look please?
For more information, please visit auto_nag documentation.