Repository: facebook/react
File: packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js (JavaScript)

Code before:

      await act(() => {
        root2.render(<Component />);
      });
      expect(container2.innerHTML).toBe('<div><input></div>');

      const inner = innerRef.current;
      const target = createEventTarget(inner);
      target.keydown({key: 'Tab'});
      target.focus();
      expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
      expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);

      suspend = true;
      await act(() => {
        root2.render(<Component />);
      });
      expect(container2.innerHTML).toBe(
        '<div><input style="display: none;">Loading...</div>',
      );
      expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
      expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
      await act(() => {
        suspend = false;
        resolve();
      });
    });

    // @gate www
    it('is called after a focused suspended element is hidden then shown', async () => {
      const Suspense = React.Suspense;
      let suspend = false;
      let resolve;
      const promise = new Promise(resolvePromise => (resolve = resolvePromise));
      const buttonRef = React.createRef();

      function Child() {
        if (suspend) {
          throw promise;
        } else {
          return <input ref={innerRef} />;
        }
      }

      const Component = ({show}) => {
        const focusWithinRef = useFocusWithin(ref, {
          onBeforeBlurWithin,
          onAfterBlurWithin,
        });

        return (

Review comment (bug):
Makes sense, the infinite loop error is because of the `root.render(null);` in the after each. If we flush here, it would be good to assert on the output:

```suggestion
      });
      expect(container2.innerHTML).toBe('<div><input style=""></div>');
```

Code after:

      await act(() => {
        root2.render(<Component />);
      });
      expect(container2.innerHTML).toBe('<div><input></div>');

      const inner = innerRef.current;
      const target = createEventTarget(inner);
      target.keydown({key: 'Tab'});
      target.focus();
      expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
      expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);

      suspend = true;
      await act(() => {
        root2.render(<Component />);
      });
      expect(container2.innerHTML).toBe(
        '<div><input style="display: none;">Loading...</div>',
      );
      expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
      expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
      await act(() => {
        suspend = false;
        resolve();
      });
      expect(container2.innerHTML).toBe('<div><input style=""></div>');
    });

    // @gate www
    it('is called after a focused suspended element is hidden then shown', async () => {
      const Suspense = React.Suspense;
      let suspend = false;
      let resolve;
      const promise = new Promise(resolvePromise => (resolve = resolvePromise));
      const buttonRef = React.createRef();

      function Child() {
        if (suspend) {
          throw promise;
        } else {
          return <input ref={innerRef} />;
        }
      }

      const Component = ({show}) => {
        const focusWithinRef = useFocusWithin(ref, {
          onBeforeBlurWithin,
          onAfterBlurWithin,
        });