`:focus-within` is not implemented the same as browsers

[snowystinger]

It appears that :focus-within is not working for parent containers like it does in browsers.

See this reproduction for more information https://github.com/snowystinger/nwsapi-bug-focus-within

I attempted to contribute to this repo, but I've no idea how to run the tests locally, it doesn't seem to work on modern macs :(

[snowystinger]

I think this would work, it works in our repo, though I wrote a non-shadow dom aware version first and that worked too, so I don't have an example with a shadow dom

                case 'focus-within':
                  // Shadow DOM safe: drill down through shadowRoot.activeElement, then walk up including shadow boundaries
                  source = 'if(s.doc.hasFocus()){' +
                    'n=s.doc.activeElement;' +
                    // Drill down through shadow roots to find the actual focused element
                    'while(n&&n.shadowRoot&&n.shadowRoot.activeElement){n=n.shadowRoot.activeElement;}' +
                    // Walk up the tree, crossing shadow boundaries via getRootNode().host
                    'while(n){' +
                      'if(n===e){' + source + 'break;}' +
                      'n=n.parentElement||(n.getRootNode&&n.getRootNode().host);' +
                    '}}';
                  break;

Otherwise, this was my original patch:

                 case 'focus-within':
-                  source = 'if(n=s.isFocusable(e)){' +
-                    'if(n!==e){while(n){n=n.parentElement;if(n===e)break;}}}' +
-                    'if((n===e||n.autofocus)){' + source + '}';
+                  // Check if e contains the activeElement by walking up from activeElement
+                  source = 'if(s.doc.hasFocus()){' +
+                    'n=s.doc.activeElement;' +
+                    'while(n){if(n===e){' + source + 'break;}n=n.parentElement;}}';
                   break;

[snowystinger]

I added shadow dom tests to my reproduction repo, the first one I suggested seems to be correct based on that. If I patch my node_modules, all tests pass

[dperini]

@snowystinger
thank you for the bug report, for the review and for your suggestions on the :fix-within pseudo-class, I will consider including the fix in next release.