fix: allow reassignment of focus and blur methods on `HTMLElement…

[jakeboone02]

What

Reinstates the ability to reassign HTMLElement.prototype.focus and HTMLElement.prototype.blur that was removed in #1252.

Why

Some UI libraries (Chakra UI, for example) override the focus and/or blur methods on the HTMLElement prototype. #1252 introduced a patched focus implementation that only included a getter, which means these libraries error when run with @testing-library/user-event because there is no setter.

How

This adds a setter to the patched focus and blur methods.

Checklist

• Tests
• Ready to be merged

I'm not super confident that this is the correct or preferred way to resolve the issue, but it works for my use cases.

This line from @zag-js/radio-group (a dependency of @chakra-ui/react) was the operative code in my case: https://github.com/chakra-ui/zag/blob/c1ffbfe1eb09028c837b305942f34bb77b9ac4fc/packages/utilities/focus-visible/src/index.ts#L143

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[mwdiaz]

I ran into the same issue when trying to upgrade @testing-library/user-event in a project that uses React Aria: https://github.com/adobe/react-spectrum/blob/fd7075c5f0e06998ea8ac6a341dee165919fb6c1/packages/%40react-aria/interactions/src/useFocusVisible.ts#L133-L141

[ph-fritsche]

Thanks for contributing to this library.

Replacing the accessor descriptor with a data descriptor removes the extra logic.
IMHO this also makes the test redundant.

Supporting the reassignment would also require us to expose proper setup and teardown, as the linked teardown function in Chakra-UI would break our implementation if their setup function runs before our setup.
But this is out of scope here – I will tackle this in a separate PR.

[jakeboone02]

Thanks for the comments, @ph-fritsche. I made the requested changes and removed the test.

[Averethel]

@ph-fritsche can this fix get released soon?

[ph-fritsche]

@Averethel

Supporting the reassignment would also require us to expose proper setup and teardown, as the linked teardown function in Chakra-UI would break our implementation if their setup function runs before our setup.

#1270 should fix that but I didn't have time to check yet

[craigkovatch]

Some UI libraries (Chakra UI, for example) override the focus and/or blur methods on the HTMLElement prototype.

Just for posterity, I want to mention that the Jasmine spyOn method also relies on this fix to work if spying on focus or blur on an element.

[gabgagnon]

Hey there, thanks for solving the issue! Any idea when there will be a new release?

[nikolaTodorovski]

Hi @ph-fritsche , could this fix be released soon please? Thank you

[csantos1113]

Could we release this soon please?! 🙏

[alexkrautmann]

Would be much appreciated if this change can release soon 🙏

This fixes an issue when testing code that uses react-aria: #1277

The app I am working on uses react-aria via headless-ui.

[jordan-cutler]

Hi all, any update on a release? This is blocking v14 upgrades :/

[craigkovatch]

It’s been over four months since the maintainer had meaningful activity. Perhaps this repo has been effectively abandoned. (I mean nothing snide; could be a medical emergency etc)