Modal's keep in bounds unexpected behaviour

[martinowren]

Environment Information

• Package version(s): 8.2.2
• Browser and OS versions: Edge, Chrome, Firefox, MacOS, Windows. Tested on various versions of all OS'es and browsers.

Please provide a reproduction of the bug in a codepen:

I am not able to reproduce the bug in codepen. I will instead provide some code used to render the modal.

const getModalStyles = (
  data: PinnableTooltipData,
  hide: boolean
) => ({
  root: {
    display: hide ? "none" : "flex",
    alignItems: "start",
    justifyContent: "left",
  },
  main: {
    minHeight: 0,
    minWidth: 0,
    overflowY: "initial",
    top: data.tooltipAttributes.top,
    left: data.tooltipAttributes.left,
  },
});
<Modal
  isOpen={true}
  dragOptions={{
	    moveMenuItemText: "Move",
	    closeMenuItemText: "Close",
	    menu: ContextualMenu,
	    keepInBounds: true,
  }}
  isModeless={true}
  styles={getModalStyles(data, hide)}
>
	CONTENT
</>

Actual behavior:

The modal bounding is a lot smaller than the viewport.

Screen.Recording.2021-10-06.at.12.56.55.mov

Expected behavior:

The modal bounding box should fill the whole viewport.

Priorities and help requested:

Requested priority: Normal

Any help/advice in debugging would be greatly appreciated.

[mgamis-msft]

This unexpected bound behavior seems to be triggered when Modal styles prop main.top is assigned to a non-zero value.

[JamesBurnside]

Here's a pen for repro: https://codepen.io/jaburnsi/pen/ExoWgNK

Looking into the fluent modal code, this is because of how the min and max values for the clamping are calculated:

fluentui/packages/react/src/components/Modal/Modal.base.tsx

Lines 212 to 216 in b7f17e9

	if (keepInBounds) {
	// x/y are unavailable in IE, so use the equivalent left/top
	internalState.minPosition = { x: -modalRectangle.left, y: -modalRectangle.top };
	internalState.maxPosition = { x: modalRectangle.left, y: modalRectangle.top };
	}

Fluent assumes the modal is positioned in the center of the screen. Because of this the calculation of the minPosition and max position being +-top and +-left do not work when .top is changed.
Similarly the keepInBounds will show failures if any of .bottom, .left or .right is set (likely coupled with position: absolute to allow placement anywhere).

One fix could be for Fluent to use the bounds of the parent component that typically fills the draggable zone:

fluentui/packages/react/src/components/Modal/Modal.base.tsx

Line 472 in b7f17e9

<div className={classNames.root} role={!isModeless ? 'document' : undefined}>

However I do not have good insight to say this would work in all scenarios.

A less risky fix would be to extend the API to allow a developer using the modal to pass in the minPosition and maxPosition and use that as the internal state position if passed in:

internalState.minPosition = props.dragBounds?.keepInBoundProps?.minPosition ?? { x: -modalRectangle.left, y: -modalRectangle.top };
internalState.maxPosition = props.dragBounds?.keepInBoundProps?.minPosition ?? { x: modalRectangle.left, y: modalRectangle.top };

This issue only appears to result when a developer wants to position the modal somewhere other than the center of the screen. Perhaps there is a way to position the modal such that the keepInBounds check does not fail? (i.e. position by not using .top/.bottom/.left/.right on the main element in the modal) -- Fluent do you know if this is be possible?