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

Tweak tab clicks to use event.currentTarget #3248

Merged
merged 1 commit into from
Feb 8, 2023
Merged

Conversation

colinrotherham
Copy link
Contributor

@colinrotherham colinrotherham commented Feb 3, 2023

A few minor tweaks to Tabs to simplify our code in places

  1. Find the tab link using event.currentTarget
    Prevents us having to check for child elements getting the click

  2. Move Tab bound handlers to constructor
    We were recreating handlers multiple times per tab

Update: Commit for 2) has been merged via:

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3248 February 3, 2023 16:43 Inactive
*/
Tabs.prototype.onTabClick = function (event) {
if (!event.target.classList.contains('govuk-tabs__tab')) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

We've removed as event.currentTarget will be the tab link (not a child element)

We know the IE8 polyfill adds event.currentTarget support but just need to verify if it's clever enough to handle target vs currentTarget (might just alias them as the same thing)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yep from our polyfill

event.currentTarget = element;
event.relatedTarget = event.fromElement || null;
event.target = event.target || event.srcElement || element;

Where element is this (current target)

We can skip our checks for “child DOM elements” on `event.target` by getting the tab link from `event.currentTarget` instead
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3248 February 6, 2023 17:35 Inactive
@36degrees
Copy link
Contributor

Might be worth updating the PR title and description to avoid confusion.

@colinrotherham colinrotherham changed the title Tweak tab clicks to use event.currentTarget and share handlers Tweak tab clicks to use event.currentTarget Feb 7, 2023
@colinrotherham colinrotherham merged commit a6572a5 into main Feb 8, 2023
@colinrotherham colinrotherham deleted the tab-click-target branch February 8, 2023 09:31
@owenatgov owenatgov added this to the [NEXT] milestone Feb 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

Successfully merging this pull request may close these issues.

4 participants