calvellido / focus-options-polyfill Goto Github PK

As suggested in #6, we could be checking if the code is being executed in browser or a node.js/server side environment.

Hi, nice polyfill! Is this available through NPM? I can't seem to find it from looking around

We've recently run into a bug related to patchedFocus() behaving differently than native focus(), where focusing an element is not executed synchronously, and document.activeElement is not immediately the element focused. Is there a reason setTimeout(..., 0) is used here? Given the typeof setTimeout === 'function' check, and subsequent fallback, it would seem that dropping the asynchronous method should probably be the default.

Thanks for this polyfill, and let me know if you'd like me to make a PR for this!

I have not been able to make this polyfill work in iOS Safari - has it been tested there?

Many thanks.

I'm having an annoying issue where this all works locally but running with js-dom in travisCI, it can't find document (it's null), so this package breaks the tests, unfortunately.

Error: Uncaught [TypeError: Cannot read property 'scrollingElement' of null]

at calcScrollableElements (/home/travis/build/rpearce/react-medium-image-zoom/node_modules/focus-options-polyfill/index.js:41:18)

https://github.com/calvellido/focus-options-polyfill/blob/master/index.js#L3-L9

It might be a good idea to change those to be != null instead of typeof ... === "undefined". Using != null covers both undefined and null use cases. Another option would be simply to use the ! operator in front of each one.

What do you think?

This seems to only be an issue for Safari on macOS, not iOS.

Does it make sense to evaluate the creation of an index.ts typescript polyfill?

Current published versions aren't minified, and while current workflows might minify the code in the end, it would be a good option to publish the polyfill minified so when used through services like unpkg, the weight is a bit less.

scroll happens when element isn't in viewport, so let's check if it's in viewport or not

function isElementInViewport (el) {
    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

this should work for all browsers, i think this polyfill is doing too much work even if nothing has scrolled

If document.scrollingElement doesn't exist, this will throw an error. Example would be in Internet Explorer or when testing with jest or anything that uses jsdom.

@calvellido As document.scrollingElement is document.documentElement by default (https://developer.mozilla.org/en-US/docs/Web/API/document/scrollingElement), would it make sense to fall back to documentElement when scrollingElement is not found?

parent = document.scrollingElement || document.documentElement

For jest users, place this in your test setup file:

document.scrollingElement = document.documentElement

Originally posted by @rpearce in #11

The repo README file can be improved by adding some bits about how the polyfill can be used, being that through an npm stack, or on a HTML document directly.

Nice library! Adding if (args && args.preventScroll) {} will help, right now it fails if we use .focus().

I implemented something in a very old project. Here is a snippet:

    var calcScrollableElements = function(){
            var parent = element.parentNode;
            while(parent){
                if(parent.offsetHeight < parent.scrollHeight || parent.offsetWidth < parent.scrollWidth){
                    scrollableElements.push([parent, parent.scrollTop, parent.scrollLeft]);
                }
                parent = parent.parentNode;
            }
            parent = document.scrollingElement;
            scrollableElements.push([parent, parent.scrollTop, parent.scrollLeft]);
        };

        var restoreScrollPosition = function(){
            var i;

            for(i = 0; i < scrollableElements.length; i++){
                scrollableElements[i][0].scrollTop = scrollableElements[i][1];
                scrollableElements[i][0].scrollLeft = scrollableElements[i][2];
            }
            scrollableElements = [];
        };