matteobad / focus-within-polyfill Goto Github PK

Describe the bug
The method used to remove a class using the setAttribute breaks all class names that contains the 'focus-within' string in them. For example 'js-focus-within' beacames 'js-' when focus is lost

To Reproduce
Steps to reproduce the behavior:

1. Go to any page
2. Lose focus
3. See the class on the body element

Expected behavior
Only the exact class name should be affected

Desktop (please complete the following information):

• OS: Windows
• Browser IE
• Version 11

It says:

focus-within-polyfill: focus-within not supported
focus-within-polyfill: loaded.

But it doesn't seem to be working. Perhaps you need to do more than load it? Do you have to transform your style sheets or something?

The devDependency rollup was updated from 1.18.0 to 1.19.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The devDependency rollup was updated from 1.27.6 to 1.27.7.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Describe the bug
Usage of this library with next.js causes a ReferenceError: document is not defined in the server.

Expected behavior
The code should check the running environment and do nothing when at the server side.

Describe the bug
The addClass function will not add a class if the element it is targeting either does not have a class attribute or if it is falsy (e.g. a blank string ""). Therefore, neither the js-focus-within class or focus-within classes will be added.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://jsbin.com/fahodibuge/1/edit?html,css,output on IE11
2. Focus the first input (the background doesn't turn red)
3. Focus the second input (the background does turn red)
4. Also if you inspect the page js-focus-within is never added to the body.

Expected behavior
If either of the inputs were focused in the repro above, I would expect the background to be red. I would also have expected the js-focus-within class to be added to the body.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: IE
• Version: 11

The devDependency rollup was updated from 1.14.2 to 1.14.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Describe the bug
A clear and concise description of what the bug is.

When an element has focus the focus-within class is applied to its parent elements. In order to match the :focus-within pseudo selector, the focused element should also have the class applied.

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

To Reproduce
Steps to reproduce the behavior:

1. Go to focusable-divs demo (https://matteobad.github.io/focus-within-polyfill/demos/focusable-divs.html) in a browser that supports pseudo selector
2. In debugger add a selector:
   .focusable-divs:focus-within {
   background-color: blue;
   }
3. In a browser that doesn't support pseudo selector do the same except add the following:
   .focusable-divs.focus-within {
   background-color: blue;
   }
4. Highlight the "Focusable
   s" title

Expected behavior
Background color of parent div should turn blue.

Actual behavior
Background color turns blue in browsers that support pseudo selector but not those that do not.

Describe the bug
All applications that got the 5.2.0 update broke with error like this:

Uncaught ReferenceError: applyFocusVisiblePolyfill is not defined
    at focus-within-polyfill.js:formatted:1
    at Object../node_modules/focus-within-polyfill/dist/focus-within-polyfill.js (focus-within-polyfill.js:formatted:1)
    at __webpack_require__ (focus-within-polyfill.js:formatted:1)
    at fn (focus-within-polyfill.js:formatted:1)

To Reproduce
Steps to reproduce the behavior:

1. Upgrade focus-within-polyfill to 5.2.0
2. Build your web app
3. Open it in the browser
4. See error in the console, and probably nothing in the page

Additional context
1531ce7
I think references to applyFocusVisiblePolyfill were supposed to be named applyFocusWithinPolyfill.

Issue
Installed the package in my application for using :focus-within for IE and Edge but it doesn't seem to work whereas the code works as expected in Chrome and Firefox

To Reproduce
Here is my code

import 'focus-within-polyfill'
.
.
.
.
<div className="content-overlay-details fadeIn-right">
  <DocumentActions
      doc={attachment}
      previewResult={previewResult}
      cardIsExpanded={cardIsExpanded}
   />
</div>

CSS:

.attachmentsBodyRow:hover .content-overlay-details {
    opacity: 1;
    @media (max-width: map-get($grid-breakpoints, lg)) {
      opacity: 1;
    }
  }

  .attachmentsBodyRow:focus-within .content-overlay-details {
    opacity: 1;
    @media (max-width: map-get($grid-breakpoints, lg)) {
      opacity: 1;
    }
  }

DocumentActions consists of 4 button icons out of which one has a popup with two other button icons
On hovering, the button icons are displayed.

Expected behavior
On click of the button with a popup - the content-overlay-details should be visible along with the open popup

Screenshot
Chrome & Firefox
On hover:

Popup open :

IE & Edge
On hover:

Popup open:

Desktop:

• OS: Windows
• Browser: IE and Edge
• Version: IE 11, Edge 41.16299.1004.0

Describe the bug
When using webpack to insert javascript into the head tag, I get the error focus-within-polyfill.js: 1 Uncaught TypeError: Cannot read property'getAttribute' of null

Expected behavior
DOMContentLoaded is required before executing addClass
https://github.com/matteobad/focus-within-polyfill/blob/master/src/focus-within.js#L121

In my VM's version of Edge (EdgeHTML 18), using focus-within-polyfill properly adds the "focus-within" attributes to elements.

However, let's say I have a CSS rule like this:

&:hover, &[focus-within], &:focus-within {
	& > .dropdown-menu { opacity: 1; visibility: visible; }
}

Edge will drop the whole thing, and neither the [focus-within], nor the :hover part applies.

For this to work, I'll need duplicate rules:

&:hover, &[focus-within] {
	& > .dropdown-menu { opacity: 1; visibility: visible; }
}

&:focus-within {
	& > .dropdown-menu { opacity: 1; visibility: visible; }
}

Of course, none of this is your fault. But I thought it might be useful tell you, so you could put this information in the Readme, since people might be scratching their heads as to why the polyfill "doesn't work" on Edge Legacy (and probably IE).

Hello -
I'm relatively new to polyfills, so I'm wondering if there's any way you can add to the readme how to use this in a Gulp file? The project I'm working on uses a Gulp file, and I would love to use this polyfill, but I'm not sure where to begin. I've searched for information, but I think maybe due to my level of familiarity, I'm having trouble figuring out how to wire this in.
Thank you!

Describe the bug
On IE the SVG Element does not have a definition for the classList property. When the script loops upward in the DOM and finds an SVG the following error occurs: Unable to get property 'add' of undefined or null reference

To Reproduce
Steps to reproduce the behavior:

1. Go to 'IE'
2. Focus on any SVG or any child of an SVG
3. See error

Expected behavior
Apply class polyfill even to SVG Elements.

Desktop (please complete the following information):

• OS: Windowss
• Browser IE
• Version All

Additional context
Check for SVG child supported elements.