Buttons added after domready don't get button JS behaviour bound to them

[andymantell]

Bug Report

What is the issue?

On page load, the button component's javascript binds to all elements with data-module="button" in order to run the debouncing, and the spacebar activation for links as buttons.

There's a comment in the code which says:

/**
  * Initialise an event listener for keydown at document level
  * this will help listening for later inserted elements with a role="button"
  */

but this isn't true. The button code is invoked with individual button elements as follows:

export default () => {
  const buttons = document.querySelectorAll('[data-module="nhsuk-button"]')
  buttons.forEach((el) => {
    new Button(el).init()
  })
}

which means that $module inside the code corresponds to an individual button, not to the document element. And so the events are bound directly to the individual buttons.

This means that any buttons which are added after this JS has run will not have this behaviour.

I suspect the comment in the JS came across from govuk-frontend when it was ported over, but during refactoring to make it follow nhsuk-frontend JS patterns the bug has been introduced.

I think the fix should be as simple as removing that querySelectorAll / foreach combo, and just init the Button class on the document element.

What was the environment where this issue occurred?

• NHS.UK frontend package version: Anything 6.2.0 - 8.x has this issue.