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.

Sign up for GitHub

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

Jump to bottom

MOJ - Add another functionality doesn't work when input wrapper for suffix is in use #185

Closed
owen-bennett123 opened this issue Jun 25, 2021 · 0 comments · Fixed by #186
Closed

MOJ - Add another functionality doesn't work when input wrapper for suffix is in use #185

owen-bennett123 opened this issue Jun 25, 2021 · 0 comments · Fixed by #186
Labels
bug A task that fixes something that isn't working

Comments

@owen-bennett123
Copy link

Prerequisites

  • [x ] Put an X between the brackets on this line if you have done all of the following:
    • Reproduced the problem
    • Followed all applicable steps in the debugging guide
    • Checked the FAQs on the message board for common solutions
    • Checked that your issue doesn't exist: https://github.com/ministryofjustice/moj-frontend/issues
    • Checked that there is not already a package that provides the described functionality

Description

Currently we are looking at the moj-add-another (https://moj-design-system.herokuapp.com/components/add-another) design pattern and we have managed to get it working fine. However, when we wrap our input in a gov-uk wrapper (suffix) the add another button decides it no longer wants to work, interestingly it actually works when javascript is turned off.

Steps to Reproduce

https://github.com/dwp/atw-payment-claims-service - link to prototype code in github. Specific folder structure is alpha>support-worker>hours-for-day.

Expected behaviour: [We expect that the add another functionality should still work when a govuk - suffix is added to the pattern for one of the fields as it would without]

Actual behaviour: [the grey add another button now is unresponsive and doesn't auto generate when the wrapper is in the code.]

Reproduces how often: [100%]

Versions

You can get this information from the CHANGELOG. Also, please include details of the browser and OS version you're running.

Additional Information

Apologies if this is not detailed enough, this is my first time leaving a bug issue on github and i'm a UX designer not a Developer, if you require any more information feel free to reach out to me on - [email protected]
@gregtyler gregtyler added the bug A task that fixes something that isn't working label Jun 25, 2021
gregtyler added a commit that referenced this issue Jun 25, 2021
@gregtyler
fix(add-another): find labels of affixed text inputs
31b0370 
When a text input has affixes, it is wrapped in a `.govuk-input__wrapper` div, meaning its label is
no longer adjacent. This caused the Add anotehr component to fail, because it couldn't find the
input's label and update its for/id link.

I've added a new strategy for finding the label: if it's not the parent or adjacent, then JavaScript
identifies it by searching for a label whose `for` attribute is the ID of the original input.

This should not introduce any regressions because the previous strategies are still in place and
prioritised: the new strategy will only be used if nothing was found, which would have previously
resulted in the application crashing.

fixes #185
@gregtyler gregtyler mentioned this issue Jun 25, 2021
Merged
gregtyler added a commit that referenced this issue Jun 25, 2021
@gregtyler
fix(add-another): find labels of affixed text inputs
65736d8 
When a text input has affixes, it is wrapped in a `.govuk-input__wrapper` div, meaning its label is
no longer adjacent. This caused the Add anotehr component to fail, because it couldn't find the
input's label and update its for/id link.

I've added a new strategy for finding the label: if it's not the parent or adjacent, then JavaScript
identifies it by searching for a label whose `for` attribute is the ID of the original input.

This should not introduce any regressions because the previous strategies are still in place and
prioritised: the new strategy will only be used if nothing was found, which would have previously
resulted in the application crashing.

fixes #185
gregtyler added a commit that referenced this issue Jun 28, 2021
@gregtyler
fix(add-another): find labels of affixed text inputs (#186)
f211937 
When a text input has affixes, it is wrapped in a `.govuk-input__wrapper` div, meaning its label is
no longer adjacent. This caused the Add anotehr component to fail, because it couldn't find the
input's label and update its for/id link.

I've added a new strategy for finding the label: if it's not the parent or adjacent, then JavaScript
identifies it by searching for a label whose `for` attribute is the ID of the original input.

This should not introduce any regressions because the previous strategies are still in place and
prioritised: the new strategy will only be used if nothing was found, which would have previously
resulted in the application crashing.

fixes #185
johnnolan pushed a commit that referenced this issue Jun 28, 2021
@semantic-release-bot
chore(release): 0.2.5 [skip ci]
dc05448 
## [0.2.5](v0.2.4-alpha...v0.2.5-alpha) (2021-06-28)

### Bug Fixes

* **add-another:** find labels of affixed text inputs ([#186](#186)) ([f211937](f211937)), closes [#185](#185)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug A task that fixes something that isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(add-another): find labels of affixed text inputs ministryofjustice/moj-frontend
2 participants
@gregtyler @owen-bennett123