Polyfill reportValidation calls and bubble UI for webkit. #3734
Conversation
|
Test this out on any webkit-based browser at the demo here. |
|
Want to get some feedback on this before writing tests. Let me know if this looks good! |
|
@mkhatib Can't get demo to work. |
|
|
||
|
|
||
| .-amp-validation-bubble { | ||
| background-color: white; |
There was a problem hiding this comment.
Is this a 3-space indent?
There was a problem hiding this comment.
4 Just noticed my editor has 4-space indent for css, will fix that to 2 instead.
|
Updated! Thanks for all the great comments! PTAL. |
| e.preventDefault(); | ||
| this.vsync_.run({mutate: reportValidity}, {form: this.form_}); |
There was a problem hiding this comment.
You'll need to use the same {measure: undefined, mutate: reportValidity} hidden class. 😞
I'll file an issue to add state to #measure and #mutate.
There was a problem hiding this comment.
Will do. This is for type matching of the Task def, right?
| @@ -111,7 +111,10 @@ export class AmpForm { | |||
| if (shouldValidate && | |||
| this.form_.checkValidity && !this.form_.checkValidity()) { | |||
| e.preventDefault(); | |||
| this.vsync_.run({mutate: reportValidity}, {form: this.form_}); | |||
| this.vsync_.run({ | |||
| measure: undefined, | |||
There was a problem hiding this comment.
Add a TODO #3776, please.
| * @private | ||
| */ | ||
| function measureTargetElement(state) { | ||
| state.targetRect = state.viewport.getLayoutRect(state.targetElement); |
There was a problem hiding this comment.
Will it ever calculate with display: none?
There was a problem hiding this comment.
targetElement is not display:none that is the bubbleElement.
mkhatib
changed the title
|
Added tests and addressed all comments. PTAL. |
|
LGTM. |
Test this out on any webkit-based browser at the demo here.
This polyfill the bubble UI for validation reporting in webkit browsers. This matches browsers implementation of one invalid bubble at a time, focusing the invalid input, hide bubble on blur and continuous revalidation as the user types in an active invalid reported input.
ITI: #3343