Force a resize when limiting (or unlimiting). #59
Conversation
When limiting the height (for example because we are displaying a modal) we don't force the new size to be sent through the postMessage, but instead rely on the content changing to cause an update. But it's not always true that the content will changes (and trigger the mutation observer) so instead we always force a resize when changing the limit. This also updates the component so that it only pushes a resize if it's different to the last size we had.
buckett
requested review from
nicholaswilson100,
sebastianchristopher and
Copilot
|
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the LtiHeightLimit component to always trigger a resize when the height limit is updated, while preventing redundant resize messages if the height hasn't actually changed.
- Track the last sent height to skip duplicate
postMessagecalls. - Always call
resize()after updating thelimitstate. - Add debug logging around limit updates and resize operations.
| // scroll bar showing when the height being rounded down. Canvas appears to allow a float (it works), but | ||
| // we round up (ceil) so that we're complying with the API documentation in case they change in the future. | ||
| Math.ceil(document.documentElement.getBoundingClientRect().height) | ||
| if (height === this.lastHeight) { |
There was a problem hiding this comment.
Since limit changes should always force a resize, this guard can block the forced update when the new height equals the previous height. Consider adding a flag to bypass this check for limit-triggered resizes or clear lastHeight before calling resize.
Copilot uses AI. Check for mistakes.
| set: (limit) => { | ||
| this.setState({ limit }) | ||
| this.logDebug(`Updating limit: ${limit}`) | ||
| this.setState({ limit }, () => this.resize()) |
There was a problem hiding this comment.
To guarantee the forced resize always sends a message, reset this.lastHeight (e.g., this.lastHeight = -1) before invoking this.resize() in the limit setter callback.
| this.setState({ limit }, () => this.resize()) | |
| this.setState({ limit }, () => { | |
| this.lastHeight = -1; | |
| this.resize(); | |
| }) |
Copilot uses AI. Check for mistakes.
When limiting the height (for example because we are displaying a modal) we don't force the new size to be sent through the postMessage, but instead rely on the content changing to cause an update. But it's not always true that the content will changes (and trigger the mutation observer) so instead we always force a resize when changing the limit.
This also updates the component so that it only pushes a resize if it's different to the last size we had.