Repository: wagtail/wagtail
File: client/src/components/CommentApp/components/Comment/index.tsx (TypeScript)

Code before:

    const top = this.props.layout.getCommentPosition(
      this.props.comment.localId,
    );

    return (
      <FocusTrap
        focusTrapOptions={
          {
            preventScroll: true,
            clickOutsideDeactivates: true,
            onDeactivate: () => {
              this.props.store.dispatch(
                setFocusedComment(null, {
                  updatePinnedComment: true,
                  forceFocus: false,
                }),
              );
            },
            // Allow delay for side panel to open and comment card to fade in with animations
            checkCanFocusTrap: () =>
              new Promise((resolve) => {
                setTimeout(resolve, 250);
              }),
            initialFocus: '[data-focus-target="true"]',
            delayFocus: false,
          } as any
        } // For some reason, the types for FocusTrap props don't yet include preventScroll.
        active={this.props.isFocused && this.props.forceFocus}
      >
        <li
          tabIndex={-1}
          data-focus-target={
            this.props.isFocused &&
            !['creating', 'editing'].includes(this.props.comment.mode)
          }
          key={this.props.comment.localId}
          className={`comment comment--mode-${this.props.comment.mode} ${
            this.props.isFocused ? 'comment--focused' : ''
          }`}
          style={{
            position: 'absolute',
            top: `${top}px`,
            display: this.props.isVisible ? 'block' : 'none',
          }}
          data-comment-id={this.props.comment.localId}
          onClick={onClick}
          onDoubleClick={onDoubleClick}
        >
          {inner}
        </li>

Review comment (refactor):
Let's remove this `delayFocus`, as noted, it's not in the API for focus-trap any more and the default is probably what we want.

```suggestion
```

Alternatively, be explicit that we do want the default.

```suggestion
            delayInitialFocus: true,
```


> delayInitialFocus {boolean}: Default: true. Delays the autofocus to the next execution frame when the focus trap is activated. This prevents elements within the focusable element from capturing the event that triggered the focus trap activation.

Code after:

    const top = this.props.layout.getCommentPosition(
      this.props.comment.localId,
    );

    return (
      <FocusTrap
        focusTrapOptions={{
          preventScroll: true,
          clickOutsideDeactivates: true,
          onDeactivate: () => {
            this.props.store.dispatch(
              setFocusedComment(null, {
                updatePinnedComment: true,
                forceFocus: false,
              }),
            );
          },
          /** Allow delay for side panel to open and comment card to fade in with animations. */
          checkCanFocusTrap: (containers: (HTMLElement | SVGElement)[]) => {
            const hasFocusTargetWithSidePanelOpen = containers.some(
              (container) =>
                container.matches(
                  '[data-form-side="comments"].form-side--comments [data-focus-target="true"]',
                ),
            );

            if (hasFocusTargetWithSidePanelOpen) return Promise.resolve();

            return new Promise((resolve) => {
              setTimeout(resolve, 250);
            });
          },
          initialFocus: '[data-focus-target="true"]',
          delayInitialFocus: true,
        }}
        active={this.props.isFocused && this.props.forceFocus}
      >
        <li
          tabIndex={-1}
          data-focus-target={
            this.props.isFocused &&
            !['creating', 'editing'].includes(this.props.comment.mode)
          }
          key={this.props.comment.localId}
          className={`comment comment--mode-${this.props.comment.mode} ${
            this.props.isFocused ? 'comment--focused' : ''
          }`}
          style={{
            position: 'absolute',
            top: `${top}px`,