Amphtml: Pre-gesture mismatch INPUT[value] issue

[AcidRaZor]

I have an amp-list that checks if a user has registered before, if they have, the results to the form they're filling in is prepopulated for them.

Consider the below input-box, which brings up a Google Places result in the form of "unique ID^street address, here, your city, postal code"

When populating the "value" of the input box by using the amp-list, I get a "Pre-gesture mismatch: INPUT[value]:address, goes, here, postalcode" error

when I remove [value]="acForm.mapResult.split('^')[1] || ''", the error stops displaying. The amp-state is blank because the user did not type anything into the input box to bring up the Google Places API result-set yet, and for all intent and purpose, don't need to, since I populate the address that was saved previously already.

<input
    id="employerAddress"
    class="contactField"
    [class]="acForm.showDropdown ? 'contactField has-dropdown' : 'contactField'"
    name="employerAddress"                                  
    autocomplete="off"
    on="
        input-debounced:
            AMP.setState({acForm: {
                query: event.value,
                showDropdown: true,
                type: 'maps'
            }});
        tap:
            AMP.setState({acForm: {
                showDropdown: true,
                type: 'maps',
                query: ''
            }})"
    value="{{employerAddress}}"
    [value]="acForm.mapResult.split('^')[1] || ''"
    required    
    >

Can anyone explain to me why I get the "pre-gesture mismatch" error when no action is fired on the input box? Even if the {{employerAddress}} in it's value, triggers tap/input-debounced, surely it should only follow the logic in place for when a user interacts?

Any help regarding this matter would be great, thanks!

[aghassemi]

/to @choumx related to faster-amp-list

[choumx]

Thanks for filing this issue. This is a temporary metric for us to gauge the future direction of an amp-list API. It can be safely ignored and will be removed shortly.

[AcidRaZor]

@aghassemi @choumx Thank you for the reply. I don't understand it unfortunately.

When using:

value="{{employerAddress}}"
[value]="acForm.mapResult.split('^')[1] || ''"

This error happens:

Pre-gesture mismatch: INPUT[value]:6 Hood Avenue, Ro

And the input field is left blank

This means that the form / input field is essentially useless and won't pre-populate even if there is data.

The only way for me to show anything in that field is to remove:

[value]="acForm.mapResult.split('^')[1] || ''"

But this then means I lose the autocomplete functionality on the Google Places API I have going, which is unacceptable at this moment as it's a key feature of the form.

Could you please clarify how the pre-gesture mismatch error can be ignored if it's breaking functionality?

[AcidRaZor]

Okay, so I have to put on my dunce hat. It turns out:

[value]="acForm.mapResult.split('^')[1] || ''"

Fires after page load. As soon as it does, it defaults to blank/null (because of the OR statement and seeing as thought the state is null at the time since no lookup was done yet through tap/input-debounced) and this overrides whatever is in the current value. I was under the impression that [value] will only fire on tap/input-debounced and not on page load.

I added {{employerAddress}} in the [value] section instead, and even though I still get the error, at least I'm seeing the address and can do a lookup/update as intended.

[choumx]

For some more detail, what the error means is that the input[value] attribute doesn't match the first evaluated result of the expression. amp-bind currently evaluates bindings in amp-list on page load, but we've noticed that this slows down the first render for amp-list substantially. So we're thinking about how best keep amp-list fast for users that don't need that functionality without breaking existing use cases.