Merge pull request #25587 from overleaf/dk-select-table-size-fix

Prevent "select size" popover in TableDropdown from closing when toolbar is collapsed

GitOrigin-RevId: 82f8226e0ff071dfea965c8c991141d90ff72197

services/web/frontend/js/features/source-editor/components/toolbar/button-menu.tsx

@@ -1,4 +1,4 @@
-import { FC, memo, useRef } from 'react'
+import { FC, memo, useEffect, useRef } from 'react'
 import useDropdown from '../../../../shared/hooks/use-dropdown'
 import OLListGroup from '@/features/ui/components/ol/ol-list-group'
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
@@ -13,13 +13,27 @@ export const ToolbarButtonMenu: FC<
     id: string
     label: string
     icon: React.ReactNode
+    disablePopover?: boolean
     altCommand?: (view: EditorView) => void
   }>
-> = memo(function ButtonMenu({ icon, id, label, altCommand, children }) {
+> = memo(function ButtonMenu({
+  icon,
+  id,
+  label,
+  altCommand,
+  disablePopover,
+  children,
+}) {
   const target = useRef<any>(null)
   const { open, onToggle, ref } = useDropdown()
   const view = useCodeMirrorViewContext()
 
+  useEffect(() => {
+    if (disablePopover && open) {
+      onToggle(false)
+    }
+  }, [open, disablePopover, onToggle])
+
   const button = (
     <button
       type="button"
@@ -47,7 +61,7 @@ export const ToolbarButtonMenu: FC<
 
   const overlay = (
     <OLOverlay
-      show={open}
+      show={open && !disablePopover}
       target={target.current}
       placement="bottom"
       container={view.dom}

services/web/frontend/js/features/source-editor/components/toolbar/table-dropdown.tsx

@@ -18,18 +18,18 @@ import { emitToolbarEvent } from '../../extensions/toolbar/utils/analytics'
 export const TableDropdown = memo(function TableDropdown() {
   const { t } = useTranslation()
   const { writefullInstance } = useEditorContext()
-  const { open, onToggle, ref } = useDropdown()
+  const selectSizeDropdown = useDropdown()
   const target = useRef<any>(null)
   const view = useCodeMirrorViewContext()
 
   const onSizeSelected = useCallback(
     (sizeX: number, sizeY: number) => {
-      onToggle(false)
+      selectSizeDropdown.onToggle(false)
       commands.insertTable(view, sizeX, sizeY)
       emitToolbarEvent(view, 'table-generator-insert-table')
       view.focus()
     },
-    [view, onToggle]
+    [selectSizeDropdown, view]
   )
 
   return (
@@ -38,6 +38,7 @@ export const TableDropdown = memo(function TableDropdown() {
         <ToolbarButtonMenu
           id="toolbar-table"
           label={t('toolbar_insert_table')}
+          disablePopover={selectSizeDropdown.open}
           icon={<MaterialIcon type="table_chart" />}
         >
           <DropdownHeader className="ol-cm-toolbar-header mx-2">
@@ -70,26 +71,28 @@ export const TableDropdown = memo(function TableDropdown() {
               event.preventDefault()
               event.stopPropagation()
             }}
-            onClick={() => {
-              onToggle(!open)
+            onClick={event => {
+              selectSizeDropdown.onToggle(!selectSizeDropdown.open)
+              // prevent click event from bubbling up to the toolbar overflow button causing it to close
+              event.stopPropagation()
             }}
           >
             <span>{t('select_size')}</span>
           </OLListGroupItem>
         </ToolbarButtonMenu>
         <OLOverlay
-          show={open}
+          show={selectSizeDropdown.open}
           target={target.current}
           placement="bottom"
           container={view.dom}
           containerPadding={0}
           transition
           rootClose
-          onHide={() => onToggle(false)}
+          onHide={() => selectSizeDropdown.onToggle(false)}
         >
           <OLPopover
             id="toolbar-table-menu"
-            ref={ref}
+            ref={selectSizeDropdown.ref}
             className="ol-cm-toolbar-button-menu-popover ol-cm-toolbar-button-menu-popover-unstyled"
           >
             <TableInserterDropdown onSizeSelected={onSizeSelected} />