Amphtml: amp-inputmask breaks when interacting with amp-state

[crisfran01]

What's the issue?

When we submit a form where their fields are filled with a state through amp-bind, mask fields stop working.

How do we reproduce the issue?

1- Create a form with fields that use masks and their values are saved in a state.

2- Create an event in the submit-success of the form to clear these states.

` class='units-form container'
action-xhr='ACTION'
method="POST"
custom-validation-reporting="show-all-on-submit"
on='submit-success:AMP.setState({inputs:{mail:"", cel: ""}});'
>

  <input type="email"  on='input-debounced:AMP.setState({inputs:{mail : event.value}})' [value]="inputs.mail"  name="email" id="email"  placeholder="E-mail" required>

  <input  on='input-debounced:AMP.setState({inputs:{cel : event.value}})' placeholder="Celular" [value]="inputs.cel" mask="(00)0000-00000" type="tel" name="cel"  pattern="(^(\()?[0-9]{2}(\))?-?(\s)?([0-9]{8}|[0-9]{9}))|(^([0-9]{8}|[0-9]{9}))|(^(\()?[0-9]{2}(\))?-?(\s)?([0-9]{4}|[0-9]{5}|[0-9]{9})-?([0-9]{4}|[0-9]{5}))" required>

  <input type="submit" class="form-submit" value="Agendar">

`

3- Create a backend to successfully return form submission.

4- Fill in the form and submit.

5- Try to fill the field that has the mask. You will not be able to type in it.

What browsers are affected?

All

Which AMP version is affected?

All

[caroqliu]

Hi, thank you for filing this bug! Quick update: I was able to reproduce the problem and am looking into what is causing this.

[azinod]

I am facing the same issue... so, adding to @crisfran01 comments, I noticed 2 weird behaviors:

• if you type a value in the masked input that fills all mask slots, you won't be able to type in it again, _unless_ you type backspace/delete first;
• if you type a value in the maskedinput that _does not_ fill all the mask slots, then type on it again, unless you pressed backspace/delete it will remove the value that was set with AMP.setState and restore the value that was typed in the input... the same will happen if you just focus on the input and then remove focus without typing any new data;

I created this gist to help reproduce the bug:
https://gist.github.com/azinod/9b601b44964c42cf5a9cf89fed3610a8.

You can copy + paste it to AMP Playground for a quick test.

[caroqliu]

Thanks for the helpful markup, and for your patience here while we resolve this. :)