Prevent focusing review panel entry on resolve/accept/reject (#23859)

GitOrigin-RevId: 91d6725d1ea2a27f1ff93871db745440486b7246

services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx

@@ -17,6 +17,7 @@ import { ReviewPanelEntry } from './review-panel-entry'
 import { useModalsContext } from '@/features/ide-react/context/modals-context'
 import { ExpandableContent } from './review-panel-expandable-content'
 import { useUserContext } from '@/shared/context/user-context'
+import { PreventSelectingEntry } from './review-panel-prevent-selecting'
 
 export const ReviewPanelChange = memo<{
   change: Change<EditOperation>
@@ -109,52 +110,56 @@ export const ReviewPanelChange = memo<{
             {editable && (
               <div className="review-panel-entry-actions">
                 {permissions.write && (
-                  <OLTooltip
-                    id="accept-change"
-                    overlayProps={{ placement: 'bottom' }}
-                    description={t('accept_change')}
-                    tooltipProps={{ className: 'review-panel-tooltip' }}
-                  >
-                    <button
-                      type="button"
-                      className="btn"
-                      onClick={acceptHandler}
-                      tabIndex={0}
+                  <PreventSelectingEntry>
+                    <OLTooltip
+                      id="accept-change"
+                      overlayProps={{ placement: 'bottom' }}
+                      description={t('accept_change')}
+                      tooltipProps={{ className: 'review-panel-tooltip' }}
                     >
-                      <MaterialIcon
-                        type="check"
-                        className="review-panel-entry-actions-icon"
-                        accessibilityLabel={t('accept_change')}
-                      />
-                    </button>
-                  </OLTooltip>
+                      <button
+                        type="button"
+                        className="btn"
+                        onClick={acceptHandler}
+                        tabIndex={0}
+                      >
+                        <MaterialIcon
+                          type="check"
+                          className="review-panel-entry-actions-icon"
+                          accessibilityLabel={t('accept_change')}
+                        />
+                      </button>
+                    </OLTooltip>
+                  </PreventSelectingEntry>
                 )}
 
                 {(permissions.write ||
                   (permissions.trackedWrite && isChangeAuthor)) && (
-                  <OLTooltip
-                    id="reject-change"
-                    description={t('reject_change')}
-                    overlayProps={{ placement: 'bottom' }}
-                    tooltipProps={{ className: 'review-panel-tooltip' }}
-                  >
-                    <button
-                      tabIndex={0}
-                      type="button"
-                      className="btn"
-                      onClick={() =>
-                        aggregate
-                          ? rejectChanges(change.id, aggregate.id)
-                          : rejectChanges(change.id)
-                      }
+                  <PreventSelectingEntry>
+                    <OLTooltip
+                      id="reject-change"
+                      description={t('reject_change')}
+                      overlayProps={{ placement: 'bottom' }}
+                      tooltipProps={{ className: 'review-panel-tooltip' }}
                     >
-                      <MaterialIcon
-                        className="review-panel-entry-actions-icon"
-                        accessibilityLabel={t('reject_change')}
-                        type="close"
-                      />
-                    </button>
-                  </OLTooltip>
+                      <button
+                        tabIndex={0}
+                        type="button"
+                        className="btn"
+                        onClick={() =>
+                          aggregate
+                            ? rejectChanges(change.id, aggregate.id)
+                            : rejectChanges(change.id)
+                        }
+                      >
+                        <MaterialIcon
+                          className="review-panel-entry-actions-icon"
+                          accessibilityLabel={t('reject_change')}
+                          type="close"
+                        />
+                      </button>
+                    </OLTooltip>
+                  </PreventSelectingEntry>
                 )}
               </div>
             )}

services/web/frontend/js/features/review-panel-new/components/review-panel-entry.tsx

@@ -48,7 +48,7 @@ export const ReviewPanelEntry: FC<{
   const [selected, setSelected] = useState(false)
   const [focused, setFocused] = useState(false)
   const [textareaFocused, setTextareaFocused] = useState(false)
-  const { setReviewPanelOpen, reviewPanelOpen } = useLayoutContext()
+  const { setReviewPanelOpen } = useLayoutContext()
   const highlighted = isSelectionWithinOp(op, state.selection.main)
   const entryRef = useRef<HTMLDivElement>(null)
   const mousePressedRef = useRef(false)
@@ -61,17 +61,6 @@ export const ReviewPanelEntry: FC<{
     event => {
       setFocused(true)
 
-      if (
-        event.target instanceof HTMLButtonElement ||
-        event.target instanceof HTMLLinkElement ||
-        event.target instanceof HTMLAnchorElement ||
-        (event.target instanceof HTMLTextAreaElement && !reviewPanelOpen)
-      ) {
-        // Ignore focus events on certain elements so as to not affect
-        // their behavior
-        return
-      }
-
       if (event.target instanceof HTMLTextAreaElement) {
         const entryBottom =
           (entryRef.current?.offsetTop || 0) +
@@ -120,7 +109,6 @@ export const ReviewPanelEntry: FC<{
       view,
       position,
       openDocWithId,
-      reviewPanelOpen,
     ]
   )
 

services/web/frontend/js/features/review-panel-new/components/review-panel-expandable-content.tsx

@@ -2,6 +2,7 @@ import { FC, useCallback, useRef, useState } from 'react'
 import OLButton from '@/features/ui/components/ol/ol-button'
 import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
+import { PreventSelectingEntry } from './review-panel-prevent-selecting'
 
 export const ExpandableContent: FC<{
   className?: string
@@ -58,25 +59,27 @@ export const ExpandableContent: FC<{
           'review-panel-expandable-inline': inline,
         })}
       >
-        {isExpanded ? (
-          <OLButton
-            variant="link"
-            className="btn-inline-link"
-            onClick={handleShowLess}
-          >
-            {t('show_less')}
-          </OLButton>
-        ) : (
-          isOverflowing && (
+        <PreventSelectingEntry>
+          {isExpanded ? (
             <OLButton
               variant="link"
               className="btn-inline-link"
-              onClick={handleShowMore}
+              onClick={handleShowLess}
             >
-              {t('show_more')}
+              {t('show_less')}
             </OLButton>
-          )
-        )}
+          ) : (
+            isOverflowing && (
+              <OLButton
+                variant="link"
+                className="btn-inline-link"
+                onClick={handleShowMore}
+              >
+                {t('show_more')}
+              </OLButton>
+            )
+          )}
+        </PreventSelectingEntry>
       </div>
     </>
   )

services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx

@@ -14,6 +14,7 @@ import ReviewPanelDeleteCommentModal from './review-panel-delete-comment-modal'
 import { useUserContext } from '@/shared/context/user-context'
 import ReviewPanelEntryUser from './review-panel-entry-user'
 import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
+import { PreventSelectingEntry } from './review-panel-prevent-selecting'
 
 export const ReviewPanelMessage: FC<{
   message: ReviewPanelCommentThreadMessage
@@ -72,35 +73,39 @@ export const ReviewPanelMessage: FC<{
 
         <div className="review-panel-entry-actions">
           {!editing && !isReply && !isThreadResolved && canResolve && (
-            <OLTooltip
-              id="resolve-thread"
-              overlayProps={{ placement: 'bottom' }}
-              description={t('resolve_comment')}
-              tooltipProps={{ className: 'review-panel-tooltip' }}
-            >
-              <button
-                type="button"
-                tabIndex={0}
-                className="btn"
-                onClick={onResolve}
+            <PreventSelectingEntry>
+              <OLTooltip
+                id="resolve-thread"
+                overlayProps={{ placement: 'bottom' }}
+                description={t('resolve_comment')}
+                tooltipProps={{ className: 'review-panel-tooltip' }}
               >
-                <MaterialIcon
-                  type="check"
-                  className="review-panel-entry-actions-icon"
-                  accessibilityLabel={t('resolve_comment')}
-                />
-              </button>
-            </OLTooltip>
+                <button
+                  type="button"
+                  tabIndex={0}
+                  className="btn"
+                  onClick={onResolve}
+                >
+                  <MaterialIcon
+                    type="check"
+                    className="review-panel-entry-actions-icon"
+                    accessibilityLabel={t('resolve_comment')}
+                  />
+                </button>
+              </OLTooltip>
+            </PreventSelectingEntry>
           )}
 
           {!editing && !isThreadResolved && (
-            <ReviewPanelCommentOptions
-              canDelete={canDelete}
-              canEdit={canEdit}
-              onEdit={handleEditOption}
-              onDelete={showDeleteModal}
-              id={message.id}
-            />
+            <PreventSelectingEntry>
+              <ReviewPanelCommentOptions
+                canDelete={canDelete}
+                canEdit={canEdit}
+                onEdit={handleEditOption}
+                onDelete={showDeleteModal}
+                id={message.id}
+              />
+            </PreventSelectingEntry>
           )}
         </div>
       </div>

services/web/frontend/js/features/review-panel-new/components/review-panel-prevent-selecting.tsx

@@ -0,0 +1,15 @@
+const stopPropagation = (e: React.FocusEvent | React.MouseEvent) =>
+  e.stopPropagation()
+
+export const PreventSelectingEntry = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div onFocus={stopPropagation} onMouseUp={stopPropagation}>
+      {children}
+    </div>
+  )
+}