Repository: storybookjs/storybook
File: code/core/src/test/preview.ts (TypeScript)

Code before:
  // userEvent.setup() cannot be called in non browser environment and will attempt to access window.navigator.clipboard
  // which will throw an error in react native for example.
  const clipboard = globalThis.window?.navigator?.clipboard;
  if (clipboard) {
    context.userEvent = instrument(
      { userEvent: uninstrumentedUserEvent.setup() },
      {
        intercept: true,
        getKeys: (obj) => Object.keys(obj).filter((key) => key !== 'eventWrapper'),
      }
    ).userEvent;

    // Restore original clipboard, which was replaced with a stub by userEvent.setup()
    Object.defineProperty(globalThis.window.navigator, 'clipboard', {
      get: () => clipboard,
      configurable: true,
    });

    // Must save a real, original `focus` method outside of the patch beforehand
    const originalFocus = HTMLElement.prototype.focus;
    let currentFocus = HTMLElement.prototype.focus;

    // Use a Set to track elements that are currently undergoing a focus operation
    const focusingElements = new Set<HTMLElement>();

    if (!patchedFocus) {
      Object.defineProperties(HTMLElement.prototype, {
        focus: {
          configurable: true,
          set: (newFocus: () => void) => {
            currentFocus = newFocus;
            patchedFocus = true;
          },
          get() {
            // 'this' here refers to the DOM element being operated on
            if (focusingElements.has(this)) {
              // Recursive call detected; to break the loop, return the original focus method.
              return originalFocus;
            }

            // Add protection marker
            focusingElements.add(this);

            // Use setTimeout(..., 0) to defer the "remove marker" operation to the next event loop.
            // This ensures the marker persists for the entire synchronous call chain (including all recursive calls).
            setTimeout(() => focusingElements.delete(this), 0);

            // Return the focus method that should currently be used
            return currentFocus;
          },
        },

Review comment (suggestion):
The change looks good to me! What do you think of scoping the declarations to the if statement so that there's no chance for the Set to be reinstantiated?
```suggestion
    if (!patchedFocus) {
      // Must save a real, original `focus` method outside of the patch beforehand
      const originalFocus = HTMLElement.prototype.focus;
let currentFocus = HTMLElement.prototype.focus;

      // Use a Set to track elements that are currently undergoing a focus operation
      const focusingElements = new Set<HTMLElement>();
```

Code after:
  // userEvent.setup() cannot be called in non browser environment and will attempt to access window.navigator.clipboard
  // which will throw an error in react native for example.
  const clipboard = globalThis.window?.navigator?.clipboard;
  if (clipboard) {
    context.userEvent = instrument(
      { userEvent: uninstrumentedUserEvent.setup() },
      {
        intercept: true,
        getKeys: (obj) => Object.keys(obj).filter((key) => key !== 'eventWrapper'),
      }
    ).userEvent;

    // Restore original clipboard, which was replaced with a stub by userEvent.setup()
    Object.defineProperty(globalThis.window.navigator, 'clipboard', {
      get: () => clipboard,
      configurable: true,
    });

    if (!patchedFocus) {
      // Must save a real, original `focus` method outside of the patch beforehand
      const originalFocus = HTMLElement.prototype.focus;
      let currentFocus = HTMLElement.prototype.focus;

      // Use a Set to track elements that are currently undergoing a focus operation
      const focusingElements = new Set<HTMLElement>();

      Object.defineProperties(HTMLElement.prototype, {
        focus: {
          configurable: true,
          set: (newFocus: () => void) => {
            currentFocus = newFocus;
          },
          get() {
            // 'this' here refers to the DOM element being operated on
            if (focusingElements.has(this)) {
              // Recursive call detected; to break the loop, return the original focus method.
              return originalFocus;
            }

            // Add protection marker
            focusingElements.add(this);

            // Use setTimeout(..., 0) to defer the "remove marker" operation to the next event loop.
            // This ensures the marker persists for the entire synchronous call chain (including all recursive calls).
            setTimeout(() => focusingElements.delete(this), 0);

            // Return the focus method that should currently be used
            return currentFocus;
          },
        },
      });