TypeError: Cannot set property focus of [object HTMLElement] which has only a getter

[denchen]

I want to file a bug report, but I need to figure out how to create a minimal reproducible CodeSandBox. However, at this point, I don't know exactly where the error is coming from.

It definitely started with the latest version (14.6.0) -- I rolled back to 14.5.2, and the errors went away -- and these are the errors I get in my tests:

TypeError: Cannot set property focus of [object HTMLElement] which has only a getter

I guess it's related to #1252 somehow? But I need help in trying to track down exactly where in my codebase this error is being triggered from. The subsequent stack traces aren't really helpful. Also, I'm not entirely sure what the error means, or how the problem manifests, or even how to fix it.

If anyone can give me some debugging tips, that'll be great!

[ph-fritsche]

This is most likely a bug in your code which tries to assign a value to HTMLElement.focus which is a read-only method on that object.

[denchen]

Thanks for the reply. So I don't disagree that there may be a bug in my code, but I'm not sure how to actually see this bug. My app works fine, and previous versions of the user-event work fine. Like I can interact with all the elements and so forth. How would a user see this error?

I think it may be due to a library I'm using -- @floating-ui/react -- but I'm not 100% sure yet, and I need to further debug to see exactly where this error is located. Can I get an example of how a read-only method for an HTMLElement is created?

[hamzaabamboo]

Hello, I am facing the exact same problem with different library so I would like to add on to this.

Here is the error on my case

 {
      stack: 'TypeError: Cannot set property focus of [object HTMLElement] which has only a getter\n' +
        '    at setupGlobalFocusEvents (file:///home/runner/work/the-sorter/the-sorter/node_modules/@zag-js/focus-visible/dist/index.mjs:75:35)\n' +
        '    at trackFocusVisible (file:///home/runner/work/the-sorter/the-sorter/node_modules/@zag-js/focus-visible/dist/index.mjs:149:3)\n' +
        '    at trackFocusVisible (file:///home/runner/work/the-sorter/the-sorter/node_modules/@zag-js/checkbox/dist/index.mjs:198:18)\n' +
        '    at Machine.executeActivities (file:///home/runner/work/the-sorter/the-sorter/node_modules/@zag-js/core/dist/index.mjs:477:25)\n' +
        '    at Machine.start (file:///home/runner/work/the-sorter/the-sorter/node_modules/@zag-js/core/dist/index.mjs:221:12)\n' +
        '    at file:///home/runner/work/the-sorter/the-sorter/node_modules/@zag-js/react/dist/index.mjs:163:13\n' +
        '    at Object.react-stack-bottom-frame (/home/runner/work/the-sorter/the-sorter/node_modules/react-dom/cjs/react-dom-client.development.js:22509:20)\n' +
        '    at runWithFiberInDEV (/home/runner/work/the-sorter/the-sorter/node_modules/react-dom/cjs/react-dom-client.development.js:543:16)\n' +
        '    at commitHookEffectListMount (/home/runner/work/the-sorter/the-sorter/node_modules/react-dom/cjs/react-dom-client.development.js:10758:29)\n' +
        '    at commitHookLayoutEffects (/home/runner/work/the-sorter/the-sorter/node_modules/react-dom/cjs/react-dom-client.development.js:10710:11)',
      message: 'Cannot set property focus of [object HTMLElement] which has only a getter',
      ...
    }

The root cause I found is that the new feature introduced in version 14.6.1 patched HTMLElement.prototype (#1252) but it didn't include a setter, which prevents @zag-js/focus-visible from also patching the object.
code from the @testing-library/user-events

  Object.defineProperties(HTMLElement.prototype, {
    focus: {
      configurable: true,
      get: () => patchedFocus,
      // no setter here
    },
    ...
  })

code from @zag/focus-visible

 let focus = win.HTMLElement.prototype.focus
  win.HTMLElement.prototype.focus = function () {
    currentModality = "virtual"
    triggerChangeHandlers("virtual", null)

    hasEventBeforeFocus = true
    focus.apply(this, arguments as unknown as [options?: FocusOptions | undefined])
  }

For now I keep @testing-library/user-event at 14.5.2 so that I could run my test. I'm not really sure how to fix this as the two library is trying to patch the same object, but I believe when setting Object.prototype it is somehow inherited so there is a chance it might work together.

[ph-fritsche]

HTMLElement.focus() is implemented on HTMLElement.prototype as {"writable": true, "enumerable": true, "configurable": true, "value": function focus() {} } in Chrome.
#1252 overrides it as readonly property. While assigning a method to a prototype is probably not the cleanest implementation, it's reasonable for the other libraries to assume the property is writable.
We should fix that.