Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set debounceFormSubmitTimer at instance level instead of global #1370

Merged
merged 2 commits into from
Jun 13, 2019
Merged

Set debounceFormSubmitTimer at instance level instead of global #1370

merged 2 commits into from
Jun 13, 2019

Conversation

alex-ju
Copy link
Contributor

@alex-ju alex-ju commented May 22, 2019

When there are multiple form submit buttons on the page with prevent-double-click enabled they will all reference to the same debounceFormSubmitTimer which means that in a sequence of actions only the first one will be called causing automated end-to-end tests to fail and potentially preventing 'quick' users to be efficient.

In this PR we're attaching the debounceFormSubmitTimer to each instance, so a specific action is stopped from being called multiple times without interfering with other submit buttons on the page.

This issue was found while implementing the prevent-double-click feature in govuk_publishing_components so we reverted the change hoping to fix this at the root.

P.S. I'm aware WCAG2.1 is a priority for the team now, but I want to add this to the backlog.

@NickColley NickColley added the 🐛 bug Something isn't working the way it should (including incorrect wording in documentation) label May 22, 2019
NickColley
NickColley previously approved these changes May 22, 2019
Copy link
Contributor

@NickColley NickColley left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for finding this issue and fixing it for us too! 💯 👍

I think if we make sure the use of bind is polyfilled for IE8 and you add a CHANGELOG entry we can get this merged.

@NickColley
Copy link
Contributor

NickColley commented May 22, 2019

Hmm actually on second thoughts because the button component is instantiated at the document level, does this actually fix the issue? @alex-ju 🤔

Right now there's only really one instance at a time right...

@alex-ju
Copy link
Contributor Author

alex-ju commented May 22, 2019

Good point, I forgot we're initialising it at the document level. I may need to change that as I don't see other options

src/all.js Outdated Show resolved Hide resolved
@NickColley
Copy link
Contributor

@alex-ju for reference I did explore this way of implementing the feature originally: https://github.com/alphagov/govuk-frontend/compare/debounce-button-refactored?expand=1

See the discussion in the original pull request: #1018 (review)

@NickColley NickColley dismissed their stale review May 22, 2019 11:37

Alex has changed the implementation based on feedback

CHANGELOG.md Outdated Show resolved Hide resolved
debounceFormSubmitTimer = setTimeout(function () {
debounceFormSubmitTimer = null
}, DEBOUNCE_TIMEOUT_IN_SECONDS * 1000)
this.debounceFormSubmitTimer = setTimeout(function () {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we write a test to cover the behaviour we want from this change?

Copy link
Contributor Author

@alex-ju alex-ju Jun 13, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Test added. Do let me know if you see a better/quicker way to test it.

@NickColley NickColley added this to the v3.0.0 milestone May 28, 2019
@NickColley
Copy link
Contributor

Just to update, we will be doing changes to namespacing as part of 3.0.0.

We met and discussed the implementation here, and we think we can do a safer implementation alongside the updates we'll have to make for namespacing the data-module syntax.

We're going to write up an architecture proposal with the full details.

@alex-ju
Copy link
Contributor Author

alex-ju commented May 29, 2019

Thanks for the update, @NickColley! Sounds like a sensible approach.

@NickColley
Copy link
Contributor

Now that #1443 is merged, this work will need to be adjusted and rebased.

@alex-ju would you like to do this? I am happy to pick this up and keep your existing work, to finish it off if you do not have time. :)

@alex-ju
Copy link
Contributor Author

alex-ju commented Jun 13, 2019

@NickColley thanks for the work on #1443. I'll update this one. Will need you around for a second review if that's ok with you.

@NickColley
Copy link
Contributor

@alex-ju of course :)

@aliuk2012 aliuk2012 changed the base branch from master to v3 June 13, 2019 12:57
When there are multiple form submit buttons on the page with prevent-double-click enabled they will all reference to the same debounceFormSubmitTimer which means that in a sequence of actions only the first one will called on causing automated end-to-end tests to fail and potentially preventing 'quick' users to be efficient. We're attaching the debounceFormSubmitTimer to each instance so a specific action is stopped from being called multiple times without interfering with other submit button on the page.
@alex-ju
Copy link
Contributor Author

alex-ju commented Jun 13, 2019

@NickColley I rebased this on v3 which minimised the number of changes after the prefix was merged. I think this is good for a second review.

Copy link
Contributor

@NickColley NickColley left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks really good to me Alex 👍

Thanks a lot for letting us know about this bug and helping us fix it too! 💯 💃

CHANGELOG.md Outdated Show resolved Hide resolved
@NickColley
Copy link
Contributor

Will need a second review too and we can get it merged.

@36degrees 36degrees merged commit 8c33386 into alphagov:v3 Jun 13, 2019
@alex-ju alex-ju deleted the update-button-debounce branch June 13, 2019 14:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking change 🐛 bug Something isn't working the way it should (including incorrect wording in documentation)
Projects
Development

Successfully merging this pull request may close these issues.

4 participants