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

JavaScript error in masthead #3934

Closed
asudoh opened this issue Sep 14, 2020 · 2 comments · Fixed by #3936
Closed

JavaScript error in masthead #3934

asudoh opened this issue Sep 14, 2020 · 2 comments · Fixed by #3936
Assignees
@asudoh
Labels
bug Something isn't working dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package

Comments

@asudoh
Copy link
Contributor

asudoh commented Sep 14, 2020

Detailed description

Describe in detail the issue you're having.

Saw JavaScript error working with masthead:

image

Is this a feature request (new component, new icon), a bug, or a general
issue?

A bug.

Is this issue related to a specific component?

Yes, <dds-masthead-logo>, <dds-masthead-button> and <dds-masthead-global-bar>.

What did you expect to happen? What happened instead? What would you like to
see changed?

Expected the error doesn't happen.

What browser are you working in?

Safari 13.1.2

What version of the IBM.com Library are you using?

Latest master
@asudoh asudoh added bug Something isn't working dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package labels Sep 14, 2020
@asudoh asudoh self-assigned this Sep 14, 2020
asudoh added a commit to asudoh/ibm-dotcom-library that referenced this issue Sep 14, 2020
@asudoh
fix(masthead): cope with missing MediaQueryList.addEventListener
75b1bc7 
Found that Safari 13 does not have `.addEventListener()` method in
`MediaQueryList` class, causing JavaScript error in that browser.

This change fixes the issue, by using the right method in
`<footer-nav-group>`, and by moving from `MediaQueryList` to a
CSS-based approach in other components.

Fixes carbon-design-system#3934.
@asudoh asudoh mentioned this issue Sep 14, 2020
Merged
@jeffchew
Copy link
Member

@asudoh how do I replicate the issue?

@asudoh
Copy link
Contributor Author

asudoh commented Sep 15, 2020

@jeffchew Simply accessing masthead with the specific browser reproduced the issue. If you see otherwise probably some other factor is in play.

@kodiakhq kodiakhq bot closed this as completed in #3936 Sep 16, 2020
kodiakhq bot pushed a commit that referenced this issue Sep 16, 2020
@asudoh
fix(masthead): cope with missing MediaQueryList.addEventListener (#3936)
72104f1 
### Related Ticket(s)

Fixes #3934.

### Description

Found that Safari 13 does not have `.addEventListener()` method in `MediaQueryList` class, causing JavaScript error in that browser.

This change fixes the issue, by using the right method in `<footer-nav-group>`, and by moving from `MediaQueryList` to a
CSS-based approach in other components.

### Changelog

**Changed**

- Use `.addListener()` instead of `.addEventListener()` in `MediaQueryList` in `<dds-footer-nav-group>`.
- Move to CSS-based approach to hide content when search bar is active, in `<dds-masthead-logo>`, `<dds-masthead-menu-button>` and `<dds-masthead-global-bar>`.
@jeffchew jeffchew mentioned this issue Sep 24, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@asudoh asudoh

Labels
bug Something isn't working dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(masthead): cope with missing MediaQueryList.addEventListener asudoh/ibm-dotcom-library
2 participants
@asudoh @jeffchew