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

ASSIGNED
Assigned to

Status

()

defect
ASSIGNED
9 years ago
6 years ago

People

(Reporter: mounir, Assigned: mounir)

Tracking

Trunk
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(blocking2.0 .x+, status2.0 wontfix)

Details

(Whiteboard: [passed-try][needs-review])

Attachments

(3 attachments, 1 obsolete attachment)

Assignee

Description

9 years ago
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.
Assignee

Comment 1

9 years ago
Posted patch WIP Patch (obsolete) — Splinter Review
This is a WIP patch. I will try to tweak the animation speed a bit and check edge cases + write tests.
Assignee

Comment 2

9 years ago
Posted patch Patch v1Splinter Review
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.
Assignee: nobody → mounir.lamouri
Attachment #492364 - Attachment is obsolete: true
Status: NEW → ASSIGNED
Attachment #493258 - Flags: ui-review?(limi)
Attachment #493258 - Flags: review?(dao)
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 ;)
Assignee

Comment 5

9 years ago
(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.
Assignee

Comment 7

9 years ago
Posted file 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
Assignee

Updated

9 years ago
Whiteboard: [passed-try][needs-review]
blocking2.0: --- → .x
status2.0: --- → wontfix

Comment 9

9 years ago
Posted file Testcase
We shouldn't scroll so that invalid input is on the top of window.

Comment 10

9 years ago
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

Updated

9 years ago
Depends on: 620150
Assignee

Updated

9 years ago
No longer depends on: 620150
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?
Attachment #493258 - Flags: review?(dao) → review-
You need to log in before you can comment on or make changes to this bug.