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: (containers: (HTMLElement | SVGElement)[]) => {
              const hasFocusTarget = containers.some(
                (container) =>
                  container.getAttribute('data-focus-target') === 'true',
              );
              if (hasFocusTarget) {
                return Promise.resolve();
              }

              return new Promise((resolve) => {
                setTimeout(resolve, 250);
              });
            },
            initialFocus: '[data-focus-target="true"]',
            delayInitialFocus: true,
          } 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' : ''
          }`}

Review comment (suggestion):
This gets us pretty close, but it still does not focus when there is an existing comment AND the comment side panel is closed.

```suggestion
                  container.matches('[data-form-side="comments"].form-side--comments [data-focus-target="true"]')
```



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={{