When using FloatingOverlay tabbing within a floating does not bring element into view about floating-ui HOT 2 CLOSED

This is a CSS issue, not related to the library. The fixed overlay element contains the floating element when it's out of view but goes outside its bounds, causing scroll and positioning issues. To fix it, make it a sibling:

  {isOpen && (
        <>
          <FloatingOverlay
            className="Popover-overlay"
          />
          <FloatingFocusManager context={context}>
            <div
              className="Popover"
              ref={refs.setFloating}
              style={floatingStyles}
              aria-labelledby={headingId}
              {...getFloatingProps()}
            >
              <h2 id={headingId}>Review balloon</h2>
              <textarea placeholder="Write your review..." />
              <br />
              <button
                style={{ float: "right" }}
                onClick={() => {
                  console.log("Added review.");
                  setIsOpen(false);
                }}
              >
                Add
              </button>
            </div>
          </FloatingFocusManager>
        </>
      )}

I also found anther issue with the tabbing and focus but not sure if I should create a new issue for it?
If I click outside the application main window (such as the browse link) and then use the tab key to get back in to the application where a floating element is open, the focus is not kept in the floating element, the focus goes to elements in the body.

The focus management uses simple guards, so this can happen; but with regular keyboard usage, focus will not escape. It doesn't happen if you use guards={false}, which is recommended for dialogs in particular.

from floating-ui.

May be worth adding into FloatingOverlay the documentation about making it a sibling. I took the sample page and documentation to set up the structure.

Thanks!

from floating-ui.