@instructure/ui-modal 11.7.6 → 11.7.7-snapshot-1

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.7.7-snapshot-1](https://github.com/instructure/instructure-ui/compare/v11.7.6...v11.7.7-snapshot-1) (2026-09-18)
+
+### Bug Fixes
+
+* **ui-modal:** avoid redundant Modal.Body re-renders from its observers ([bccca5c](https://github.com/instructure/instructure-ui/commit/bccca5cc1f4bc10001a344b9142d2122a265a573))
+
+
 ## [11.7.6](https://github.com/instructure/instructure-ui/compare/v11.7.5...v11.7.6) (2026-09-14)
 
 **Note:** Version bump only for package @instructure/ui-modal

package/es/Modal/v1/ModalBody/index.js

@@ -49,6 +49,13 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
     as: 'div',
     variant: 'default'
   };
+  state = {
+    isFirefox: false,
+    needsTabIndex: false
+  };
+  // mirrors state.needsTabIndex, but readable synchronously in the observer
+  // callbacks below, where a pending setState would make this.state stale
+  lastNeedsTabIndex = false;
   ref = null;
   resizeObserver;
   mutationObserver;
@@ -77,9 +84,10 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
     }
     const finalRef = this.getFinalRef(this.ref);
     if (finalRef && typeof ResizeObserver !== 'undefined') {
-      this.resizeObserver = new ResizeObserver(() => this.forceUpdate());
+      this.syncTabIndex();
+      this.resizeObserver = new ResizeObserver(this.syncTabIndex);
       this.resizeObserver.observe(finalRef);
-      this.mutationObserver = new MutationObserver(() => this.forceUpdate());
+      this.mutationObserver = new MutationObserver(this.syncTabIndex);
       this.mutationObserver.observe(finalRef, {
         childList: true,
         subtree: true,
@@ -90,11 +98,32 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
   }
   componentDidUpdate() {
     this.props.makeStyles?.();
+    // The observers miss some changes, e.g. a text-only edit that makes the
+    // body overflow without resizing it. syncTabIndex returns early if
+    // nothing changed.
+    this.syncTabIndex();
   }
   componentWillUnmount() {
     this.resizeObserver?.disconnect();
     this.mutationObserver?.disconnect();
   }
+
+  // The body is a tab stop only while it can be scrolled but holds nothing
+  // focusable.
+  syncTabIndex = () => {
+    const finalRef = this.getFinalRef(this.ref);
+    const hasScrollbar = !!finalRef && Math.abs((finalRef.scrollHeight ?? 0) - (finalRef.getBoundingClientRect()?.height ?? 0)) > 1;
+    const needsTabIndex = hasScrollbar && findTabbable(finalRef).length === 0;
+    if (needsTabIndex === this.lastNeedsTabIndex) return;
+    this.lastNeedsTabIndex = needsTabIndex;
+    this.setState({
+      needsTabIndex
+    });
+  };
+
+  // this recursive function is needed because `ref` can be a React component.
+  // TODO rethink, the 'as' prop, likely its not a good idea to allow React
+  // components. See INSTUI-4674
   getFinalRef(el) {
     if (!el) {
       return undefined;
@@ -119,13 +148,9 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
     } = this.props;
     const passthroughProps = View.omitViewProps(omitProps(rest, ModalBody.allowedProps), ModalBody);
     const isFit = overflow === 'fit';
-    // this recursive function is needed because `ref` can be a React component.
-    // TODO rethink, the 'as' prop, likely its not a good idea to allow React
-    // components. See INSTUI-4674
-    const finalRef = this.getFinalRef(this.ref);
-    const hasScrollbar = finalRef && Math.abs((finalRef.scrollHeight ?? 0) - (finalRef.getBoundingClientRect()?.height ?? 0)) > 1;
-    const hasTabbableChildren = !!finalRef && findTabbable(finalRef).length > 0;
-    const needsTabIndex = hasScrollbar && !hasTabbableChildren;
+    const {
+      needsTabIndex
+    } = this.state;
     return _jsx(ModalContext.Consumer, {
       children: value => _jsx(View, {
         ...passthroughProps,

package/es/Modal/v2/ModalBody/index.js

@@ -49,6 +49,13 @@ let ModalBody = (_dec = withStyleNew(generateStyle, 'ModalBody'), _dec(_class =
     as: 'div',
     variant: 'default'
   };
+  state = {
+    isFirefox: false,
+    needsTabIndex: false
+  };
+  // mirrors state.needsTabIndex, but readable synchronously in the observer
+  // callbacks below, where a pending setState would make this.state stale
+  lastNeedsTabIndex = false;
   ref = null;
   resizeObserver;
   mutationObserver;
@@ -77,9 +84,10 @@ let ModalBody = (_dec = withStyleNew(generateStyle, 'ModalBody'), _dec(_class =
     }
     const finalRef = this.getFinalRef(this.ref);
     if (finalRef && typeof ResizeObserver !== 'undefined') {
-      this.resizeObserver = new ResizeObserver(() => this.forceUpdate());
+      this.syncTabIndex();
+      this.resizeObserver = new ResizeObserver(this.syncTabIndex);
       this.resizeObserver.observe(finalRef);
-      this.mutationObserver = new MutationObserver(() => this.forceUpdate());
+      this.mutationObserver = new MutationObserver(this.syncTabIndex);
       this.mutationObserver.observe(finalRef, {
         childList: true,
         subtree: true,
@@ -90,11 +98,32 @@ let ModalBody = (_dec = withStyleNew(generateStyle, 'ModalBody'), _dec(_class =
   }
   componentDidUpdate() {
     this.props.makeStyles?.();
+    // The observers miss some changes, e.g. a text-only edit that makes the
+    // body overflow without resizing it. syncTabIndex returns early if
+    // nothing changed.
+    this.syncTabIndex();
   }
   componentWillUnmount() {
     this.resizeObserver?.disconnect();
     this.mutationObserver?.disconnect();
   }
+
+  // The body is a tab stop only while it can be scrolled but holds nothing
+  // focusable.
+  syncTabIndex = () => {
+    const finalRef = this.getFinalRef(this.ref);
+    const hasScrollbar = !!finalRef && Math.abs((finalRef.scrollHeight ?? 0) - (finalRef.getBoundingClientRect()?.height ?? 0)) > 1;
+    const needsTabIndex = hasScrollbar && findTabbable(finalRef).length === 0;
+    if (needsTabIndex === this.lastNeedsTabIndex) return;
+    this.lastNeedsTabIndex = needsTabIndex;
+    this.setState({
+      needsTabIndex
+    });
+  };
+
+  // this recursive function is needed because `ref` can be a React component.
+  // TODO rethink, the 'as' prop, likely its not a good idea to allow React
+  // components. See INSTUI-4674
   getFinalRef(el) {
     if (!el) {
       return undefined;
@@ -120,13 +149,9 @@ let ModalBody = (_dec = withStyleNew(generateStyle, 'ModalBody'), _dec(_class =
     } = this.props;
     const passthroughProps = View.omitViewProps(omitProps(rest, ModalBody.allowedProps), ModalBody);
     const isFit = overflow === 'fit';
-    // this recursive function is needed because `ref` can be a React component.
-    // TODO rethink, the 'as' prop, likely its not a good idea to allow React
-    // components. See INSTUI-4674
-    const finalRef = this.getFinalRef(this.ref);
-    const hasScrollbar = finalRef && Math.abs((finalRef.scrollHeight ?? 0) - (finalRef.getBoundingClientRect()?.height ?? 0)) > 1;
-    const hasTabbableChildren = !!finalRef && findTabbable(finalRef).length > 0;
-    const needsTabIndex = hasScrollbar && !hasTabbableChildren;
+    const {
+      needsTabIndex
+    } = this.state;
     return _jsx(ModalContext.Consumer, {
       children: value => _jsx(View, {
         ...passthroughProps,

package/lib/Modal/v1/ModalBody/index.js

@@ -55,6 +55,13 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.defa
     as: 'div',
     variant: 'default'
   };
+  state = {
+    isFirefox: false,
+    needsTabIndex: false
+  };
+  // mirrors state.needsTabIndex, but readable synchronously in the observer
+  // callbacks below, where a pending setState would make this.state stale
+  lastNeedsTabIndex = false;
   ref = null;
   resizeObserver;
   mutationObserver;
@@ -83,9 +90,10 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.defa
     }
     const finalRef = this.getFinalRef(this.ref);
     if (finalRef && typeof ResizeObserver !== 'undefined') {
-      this.resizeObserver = new ResizeObserver(() => this.forceUpdate());
+      this.syncTabIndex();
+      this.resizeObserver = new ResizeObserver(this.syncTabIndex);
       this.resizeObserver.observe(finalRef);
-      this.mutationObserver = new MutationObserver(() => this.forceUpdate());
+      this.mutationObserver = new MutationObserver(this.syncTabIndex);
       this.mutationObserver.observe(finalRef, {
         childList: true,
         subtree: true,
@@ -96,11 +104,32 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.defa
   }
   componentDidUpdate() {
     this.props.makeStyles?.();
+    // The observers miss some changes, e.g. a text-only edit that makes the
+    // body overflow without resizing it. syncTabIndex returns early if
+    // nothing changed.
+    this.syncTabIndex();
   }
   componentWillUnmount() {
     this.resizeObserver?.disconnect();
     this.mutationObserver?.disconnect();
   }
+
+  // The body is a tab stop only while it can be scrolled but holds nothing
+  // focusable.
+  syncTabIndex = () => {
+    const finalRef = this.getFinalRef(this.ref);
+    const hasScrollbar = !!finalRef && Math.abs((finalRef.scrollHeight ?? 0) - (finalRef.getBoundingClientRect()?.height ?? 0)) > 1;
+    const needsTabIndex = hasScrollbar && (0, _findTabbable.findTabbable)(finalRef).length === 0;
+    if (needsTabIndex === this.lastNeedsTabIndex) return;
+    this.lastNeedsTabIndex = needsTabIndex;
+    this.setState({
+      needsTabIndex
+    });
+  };
+
+  // this recursive function is needed because `ref` can be a React component.
+  // TODO rethink, the 'as' prop, likely its not a good idea to allow React
+  // components. See INSTUI-4674
   getFinalRef(el) {
     if (!el) {
       return undefined;
@@ -125,13 +154,9 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.defa
     } = this.props;
     const passthroughProps = _v11_.View.omitViewProps((0, _omitProps.omitProps)(rest, ModalBody.allowedProps), ModalBody);
     const isFit = overflow === 'fit';
-    // this recursive function is needed because `ref` can be a React component.
-    // TODO rethink, the 'as' prop, likely its not a good idea to allow React
-    // components. See INSTUI-4674
-    const finalRef = this.getFinalRef(this.ref);
-    const hasScrollbar = finalRef && Math.abs((finalRef.scrollHeight ?? 0) - (finalRef.getBoundingClientRect()?.height ?? 0)) > 1;
-    const hasTabbableChildren = !!finalRef && (0, _findTabbable.findTabbable)(finalRef).length > 0;
-    const needsTabIndex = hasScrollbar && !hasTabbableChildren;
+    const {
+      needsTabIndex
+    } = this.state;
     return (0, _jsxRuntime.jsx)(_ModalContext.default.Consumer, {
       children: value => (0, _jsxRuntime.jsx)(_v11_.View, {
         ...passthroughProps,

package/lib/Modal/v2/ModalBody/index.js

@@ -55,6 +55,13 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyleNew)(_styles.d
     as: 'div',
     variant: 'default'
   };
+  state = {
+    isFirefox: false,
+    needsTabIndex: false
+  };
+  // mirrors state.needsTabIndex, but readable synchronously in the observer
+  // callbacks below, where a pending setState would make this.state stale
+  lastNeedsTabIndex = false;
   ref = null;
   resizeObserver;
   mutationObserver;
@@ -83,9 +90,10 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyleNew)(_styles.d
     }
     const finalRef = this.getFinalRef(this.ref);
     if (finalRef && typeof ResizeObserver !== 'undefined') {
-      this.resizeObserver = new ResizeObserver(() => this.forceUpdate());
+      this.syncTabIndex();
+      this.resizeObserver = new ResizeObserver(this.syncTabIndex);
       this.resizeObserver.observe(finalRef);
-      this.mutationObserver = new MutationObserver(() => this.forceUpdate());
+      this.mutationObserver = new MutationObserver(this.syncTabIndex);
       this.mutationObserver.observe(finalRef, {
         childList: true,
         subtree: true,
@@ -96,11 +104,32 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyleNew)(_styles.d
   }
   componentDidUpdate() {
     this.props.makeStyles?.();
+    // The observers miss some changes, e.g. a text-only edit that makes the
+    // body overflow without resizing it. syncTabIndex returns early if
+    // nothing changed.
+    this.syncTabIndex();
   }
   componentWillUnmount() {
     this.resizeObserver?.disconnect();
     this.mutationObserver?.disconnect();
   }
+
+  // The body is a tab stop only while it can be scrolled but holds nothing
+  // focusable.
+  syncTabIndex = () => {
+    const finalRef = this.getFinalRef(this.ref);
+    const hasScrollbar = !!finalRef && Math.abs((finalRef.scrollHeight ?? 0) - (finalRef.getBoundingClientRect()?.height ?? 0)) > 1;
+    const needsTabIndex = hasScrollbar && (0, _findTabbable.findTabbable)(finalRef).length === 0;
+    if (needsTabIndex === this.lastNeedsTabIndex) return;
+    this.lastNeedsTabIndex = needsTabIndex;
+    this.setState({
+      needsTabIndex
+    });
+  };
+
+  // this recursive function is needed because `ref` can be a React component.
+  // TODO rethink, the 'as' prop, likely its not a good idea to allow React
+  // components. See INSTUI-4674
   getFinalRef(el) {
     if (!el) {
       return undefined;
@@ -126,13 +155,9 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyleNew)(_styles.d
     } = this.props;
     const passthroughProps = _latest.View.omitViewProps((0, _omitProps.omitProps)(rest, ModalBody.allowedProps), ModalBody);
     const isFit = overflow === 'fit';
-    // this recursive function is needed because `ref` can be a React component.
-    // TODO rethink, the 'as' prop, likely its not a good idea to allow React
-    // components. See INSTUI-4674
-    const finalRef = this.getFinalRef(this.ref);
-    const hasScrollbar = finalRef && Math.abs((finalRef.scrollHeight ?? 0) - (finalRef.getBoundingClientRect()?.height ?? 0)) > 1;
-    const hasTabbableChildren = !!finalRef && (0, _findTabbable.findTabbable)(finalRef).length > 0;
-    const needsTabIndex = hasScrollbar && !hasTabbableChildren;
+    const {
+      needsTabIndex
+    } = this.state;
     return (0, _jsxRuntime.jsx)(_ModalContext.default.Consumer, {
       children: value => (0, _jsxRuntime.jsx)(_latest.View, {
         ...passthroughProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-modal",
-  "version": "11.7.6",
+  "version": "11.7.7-snapshot-1",
   "description": "A component for displaying content in a dialog overlay",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,26 +15,26 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/console": "11.7.6",
-    "@instructure/emotion": "11.7.6",
-    "@instructure/ui-buttons": "11.7.6",
-    "@instructure/ui-dialog": "11.7.6",
-    "@instructure/shared-types": "11.7.6",
-    "@instructure/ui-dom-utils": "11.7.6",
-    "@instructure/ui-motion": "11.7.6",
-    "@instructure/ui-overlays": "11.7.6",
-    "@instructure/ui-portal": "11.7.6",
-    "@instructure/ui-react-utils": "11.7.6",
-    "@instructure/ui-themes": "11.7.6",
-    "@instructure/ui-view": "11.7.6",
-    "@instructure/ui-utils": "11.7.6"
+    "@instructure/console": "11.7.7-snapshot-1",
+    "@instructure/emotion": "11.7.7-snapshot-1",
+    "@instructure/shared-types": "11.7.7-snapshot-1",
+    "@instructure/ui-buttons": "11.7.7-snapshot-1",
+    "@instructure/ui-dialog": "11.7.7-snapshot-1",
+    "@instructure/ui-dom-utils": "11.7.7-snapshot-1",
+    "@instructure/ui-motion": "11.7.7-snapshot-1",
+    "@instructure/ui-overlays": "11.7.7-snapshot-1",
+    "@instructure/ui-portal": "11.7.7-snapshot-1",
+    "@instructure/ui-view": "11.7.7-snapshot-1",
+    "@instructure/ui-themes": "11.7.7-snapshot-1",
+    "@instructure/ui-utils": "11.7.7-snapshot-1",
+    "@instructure/ui-react-utils": "11.7.7-snapshot-1"
   },
   "devDependencies": {
     "vitest": "^5.0.0",
-    "@instructure/ui-position": "11.7.6",
-    "@instructure/ui-babel-preset": "11.7.6",
-    "@instructure/ui-color-utils": "11.7.6",
-    "@instructure/ui-tooltip": "11.7.6"
+    "@instructure/ui-position": "11.7.7-snapshot-1",
+    "@instructure/ui-babel-preset": "11.7.7-snapshot-1",
+    "@instructure/ui-tooltip": "11.7.7-snapshot-1",
+    "@instructure/ui-color-utils": "11.7.7-snapshot-1"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Modal/v1/ModalBody/index.tsx

@@ -33,7 +33,7 @@ import generateStyle from './styles.js'
 import generateComponentTheme from './theme.js'
 
 import { allowedProps } from './props.js'
-import type { ModalBodyProps } from './props'
+import type { ModalBodyProps, ModalBodyState } from './props'
 import { UIElement } from '@instructure/shared-types'
 import ModalContext from '../ModalContext.js'
 
@@ -44,7 +44,7 @@ id: Modal.Body
 ---
 **/
 @withStyle(generateStyle, generateComponentTheme)
-class ModalBody extends Component<ModalBodyProps> {
+class ModalBody extends Component<ModalBodyProps, ModalBodyState> {
   static displayName = 'ModalBody'
   static readonly componentId = 'Modal.Body'
 
@@ -55,6 +55,11 @@ class ModalBody extends Component<ModalBodyProps> {
     variant: 'default'
   }
 
+  state: ModalBodyState = { isFirefox: false, needsTabIndex: false }
+  // mirrors state.needsTabIndex, but readable synchronously in the observer
+  // callbacks below, where a pending setState would make this.state stale
+  private lastNeedsTabIndex = false
+
   ref: UIElement | null = null
   private resizeObserver?: ResizeObserver
   private mutationObserver?: MutationObserver
@@ -92,9 +97,10 @@ class ModalBody extends Component<ModalBodyProps> {
 
     const finalRef = this.getFinalRef(this.ref)
     if (finalRef && typeof ResizeObserver !== 'undefined') {
-      this.resizeObserver = new ResizeObserver(() => this.forceUpdate())
+      this.syncTabIndex()
+      this.resizeObserver = new ResizeObserver(this.syncTabIndex)
       this.resizeObserver.observe(finalRef)
-      this.mutationObserver = new MutationObserver(() => this.forceUpdate())
+      this.mutationObserver = new MutationObserver(this.syncTabIndex)
       this.mutationObserver.observe(finalRef, {
         childList: true,
         subtree: true,
@@ -115,6 +121,10 @@ class ModalBody extends Component<ModalBodyProps> {
 
   componentDidUpdate() {
     this.props.makeStyles?.()
+    // The observers miss some changes, e.g. a text-only edit that makes the
+    // body overflow without resizing it. syncTabIndex returns early if
+    // nothing changed.
+    this.syncTabIndex()
   }
 
   componentWillUnmount() {
@@ -122,6 +132,26 @@ class ModalBody extends Component<ModalBodyProps> {
     this.mutationObserver?.disconnect()
   }
 
+  // The body is a tab stop only while it can be scrolled but holds nothing
+  // focusable.
+  syncTabIndex = () => {
+    const finalRef = this.getFinalRef(this.ref)
+    const hasScrollbar =
+      !!finalRef &&
+      Math.abs(
+        (finalRef.scrollHeight ?? 0) -
+          (finalRef.getBoundingClientRect()?.height ?? 0)
+      ) > 1
+    const needsTabIndex = hasScrollbar && findTabbable(finalRef).length === 0
+
+    if (needsTabIndex === this.lastNeedsTabIndex) return
+    this.lastNeedsTabIndex = needsTabIndex
+    this.setState({ needsTabIndex })
+  }
+
+  // this recursive function is needed because `ref` can be a React component.
+  // TODO rethink, the 'as' prop, likely its not a good idea to allow React
+  // components. See INSTUI-4674
   getFinalRef(el: UIElement): Element | undefined {
     if (!el) {
       return undefined
@@ -144,18 +174,7 @@ class ModalBody extends Component<ModalBodyProps> {
       ModalBody
     )
     const isFit = overflow === 'fit'
-    // this recursive function is needed because `ref` can be a React component.
-    // TODO rethink, the 'as' prop, likely its not a good idea to allow React
-    // components. See INSTUI-4674
-    const finalRef = this.getFinalRef(this.ref)
-    const hasScrollbar =
-      finalRef &&
-      Math.abs(
-        (finalRef.scrollHeight ?? 0) -
-          (finalRef.getBoundingClientRect()?.height ?? 0)
-      ) > 1
-    const hasTabbableChildren = !!finalRef && findTabbable(finalRef).length > 0
-    const needsTabIndex = hasScrollbar && !hasTabbableChildren
+    const { needsTabIndex } = this.state
     return (
       <ModalContext.Consumer>
         {(value) => (

package/src/Modal/v1/ModalBody/props.ts

@@ -56,6 +56,7 @@ type ModalBodyStyle = ComponentStyle<'modalBody'>
 
 type ModalBodyState = {
   isFirefox: boolean
+  needsTabIndex: boolean
 }
 const allowedProps: AllowedPropKeys = [
   'children',

package/src/Modal/v2/ModalBody/index.tsx

@@ -32,7 +32,7 @@ import { withStyleNew } from '@instructure/emotion'
 import generateStyle from './styles.js'
 
 import { allowedProps } from './props.js'
-import type { ModalBodyProps } from './props'
+import type { ModalBodyProps, ModalBodyState } from './props'
 import { UIElement } from '@instructure/shared-types'
 import ModalContext from '../ModalContext.js'
 
@@ -43,7 +43,7 @@ id: Modal.Body
 ---
 **/
 @withStyleNew(generateStyle, 'ModalBody')
-class ModalBody extends Component<ModalBodyProps> {
+class ModalBody extends Component<ModalBodyProps, ModalBodyState> {
   static displayName = 'ModalBody'
   static readonly componentId = 'Modal.Body'
   static readonly themeId = 'ModalBody'
@@ -55,6 +55,11 @@ class ModalBody extends Component<ModalBodyProps> {
     variant: 'default'
   }
 
+  state: ModalBodyState = { isFirefox: false, needsTabIndex: false }
+  // mirrors state.needsTabIndex, but readable synchronously in the observer
+  // callbacks below, where a pending setState would make this.state stale
+  private lastNeedsTabIndex = false
+
   ref: UIElement | null = null
   private resizeObserver?: ResizeObserver
   private mutationObserver?: MutationObserver
@@ -92,9 +97,10 @@ class ModalBody extends Component<ModalBodyProps> {
 
     const finalRef = this.getFinalRef(this.ref)
     if (finalRef && typeof ResizeObserver !== 'undefined') {
-      this.resizeObserver = new ResizeObserver(() => this.forceUpdate())
+      this.syncTabIndex()
+      this.resizeObserver = new ResizeObserver(this.syncTabIndex)
       this.resizeObserver.observe(finalRef)
-      this.mutationObserver = new MutationObserver(() => this.forceUpdate())
+      this.mutationObserver = new MutationObserver(this.syncTabIndex)
       this.mutationObserver.observe(finalRef, {
         childList: true,
         subtree: true,
@@ -115,6 +121,10 @@ class ModalBody extends Component<ModalBodyProps> {
 
   componentDidUpdate() {
     this.props.makeStyles?.()
+    // The observers miss some changes, e.g. a text-only edit that makes the
+    // body overflow without resizing it. syncTabIndex returns early if
+    // nothing changed.
+    this.syncTabIndex()
   }
 
   componentWillUnmount() {
@@ -122,6 +132,26 @@ class ModalBody extends Component<ModalBodyProps> {
     this.mutationObserver?.disconnect()
   }
 
+  // The body is a tab stop only while it can be scrolled but holds nothing
+  // focusable.
+  syncTabIndex = () => {
+    const finalRef = this.getFinalRef(this.ref)
+    const hasScrollbar =
+      !!finalRef &&
+      Math.abs(
+        (finalRef.scrollHeight ?? 0) -
+          (finalRef.getBoundingClientRect()?.height ?? 0)
+      ) > 1
+    const needsTabIndex = hasScrollbar && findTabbable(finalRef).length === 0
+
+    if (needsTabIndex === this.lastNeedsTabIndex) return
+    this.lastNeedsTabIndex = needsTabIndex
+    this.setState({ needsTabIndex })
+  }
+
+  // this recursive function is needed because `ref` can be a React component.
+  // TODO rethink, the 'as' prop, likely its not a good idea to allow React
+  // components. See INSTUI-4674
   getFinalRef(el: UIElement): Element | undefined {
     if (!el) {
       return undefined
@@ -152,18 +182,7 @@ class ModalBody extends Component<ModalBodyProps> {
       ModalBody
     )
     const isFit = overflow === 'fit'
-    // this recursive function is needed because `ref` can be a React component.
-    // TODO rethink, the 'as' prop, likely its not a good idea to allow React
-    // components. See INSTUI-4674
-    const finalRef = this.getFinalRef(this.ref)
-    const hasScrollbar =
-      finalRef &&
-      Math.abs(
-        (finalRef.scrollHeight ?? 0) -
-          (finalRef.getBoundingClientRect()?.height ?? 0)
-      ) > 1
-    const hasTabbableChildren = !!finalRef && findTabbable(finalRef).length > 0
-    const needsTabIndex = hasScrollbar && !hasTabbableChildren
+    const { needsTabIndex } = this.state
     return (
       <ModalContext.Consumer>
         {(value) => (

package/src/Modal/v2/ModalBody/props.ts

@@ -62,6 +62,7 @@ type ModalBodyStyle = ComponentStyle<'modalBody'>
 
 type ModalBodyState = {
   isFirefox: boolean
+  needsTabIndex: boolean
 }
 const allowedProps: AllowedPropKeys = [
   'children',