Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
simple focus-within polyfill
(function(window, document){
'use strict';
var slice = [].slice;
var removeClass = function(elem){
elem.classList.remove('focus-within');
};
var update = (function(){
var running, last;
var action = function(){
var element = document.activeElement;
running = false;
if(last !== element){
last = element;
slice.call(document.getElementsByClassName('focus-within')).forEach(removeClass);
while(element && element.classList){
element.classList.add('focus-within');
element = element.parentNode;
}
}
};
return function(){
if(!running){
requestAnimationFrame(action);
running = true;
}
};
})();
document.addEventListener('focus', update, true);
document.addEventListener('blur', update, true);
update();
})(window, document);
@nikiedev

This comment has been minimized.

Copy link

@nikiedev nikiedev commented Aug 26, 2018

Does it work in Edge and IE ? Please, make an example of use for menu with such a structure:

Or all I need is just to include this file to the html ?
@dudewad

This comment has been minimized.

Copy link

@dudewad dudewad commented Oct 1, 2018

Did you test this? Focus events don't bubble, are you sure this will work?

@shendrick

This comment has been minimized.

Copy link

@shendrick shendrick commented Oct 24, 2018

Did you test this? Focus events don't bubble, are you sure this will work?

The true in as the third argument means that it listens for it in the capture phase. https://javascript.info/bubbling-and-capturing

@hamsterbacke23

This comment has been minimized.

Copy link

@hamsterbacke23 hamsterbacke23 commented Jan 22, 2019

would it be possible to make a repo with a license out of this?

@ahmedabdelaziz1992

This comment has been minimized.

Copy link

@ahmedabdelaziz1992 ahmedabdelaziz1992 commented Apr 8, 2019

I tried it and It works fine in all browsers. Thanks a lot :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment