ampproject / ampproject/amp.dev
Multi Page Flow not working properly in combination with form
- Dominant language
- HTML
- Stars
- 600
- Forks
- 675
- PR merge metrics
- No merged PRs in 30d
Description
## 🐛 Bug Report
### Current behavior
1. When using tab (once or multiple times) it messes up the multi page flow, placing al slides on top of eachother.
2. When there is focus on an element in slide 1 and the enter key is used it submits the form even when validation requirements are not met.
3. After clicking the button in the first slide with the mouse, the enter key can be used to go trough every slide in multi page flow ignoring the validation requirements.
Please also provide:
- Page link: [Issue 1, 2 and 3](https://amp.dev/documentation/examples/interactivity-dynamic-content/multi_page_flow/?#stepper-with-sliding-animation)
- Page link: [Issue 3](https://www.verkoopmakelaaroffertes.nl/gratis-hypotheekgesprek-aanvragen)
### Expected behavior/code
Tab should not mess up the multi page flow. Tab and enter key should always respect the validaiton requirements.
### Reproduction procedure Issue 1
1. On the amp.dev page find the example form under Stepper with Sliding Animation
2. Click in a white area of the form
3. Press tab, the first time the input field will be focused, the second time all slide will be placed on top of eachother
### Reproduction procedure Issue 2
1. On the amp.dev page find the example form under Stepper with Sliding Animation
2. Fill in your e-mailaddress and click next with your mouse
3. In the next slide don't do anything, just click enter on your keyboard. You will go to a slide that says: Submitting...
### Reproduction procedure Issue 3
1. Click with the mouse on the button in the first slide
2. After this, press enter multiple times
- What browser are you using? Google Chrome 98.0.4758.82
- What O/S are you using? Windows 10 Home
Contributor guide
Assessment
This issue has not been assessed yet.