@finos/legend-query-builder 4.14.55 → 4.14.56

package/src/components/fetch-structure/QueryBuilderPostFilterPanel.tsx

@@ -20,12 +20,9 @@ import {
   type TreeNodeViewProps,
   BlankPanelPlaceholder,
   CaretDownIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
   clsx,
   ContextMenu,
-  DropdownMenu,
-  FilledTriangleIcon,
+  ControlledDropdownMenu,
   MenuContent,
   MenuContentItem,
   TimesIcon,
@@ -65,6 +62,7 @@ import { observer } from 'mobx-react-lite';
 import React, {
   forwardRef,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
   useState,
@@ -96,8 +94,8 @@ import { QUERY_BUILDER_GROUP_OPERATION } from '../../stores/QueryBuilderGroupOpe
 import { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import {
   type QueryBuilderVariableDragSource,
-  BasicValueSpecificationEditor,
   QUERY_BUILDER_VARIABLE_DND_TYPE,
+  EditableBasicValueSpecificationEditor,
 } from '../shared/BasicValueSpecificationEditor.js';
 import {
   QueryBuilderColumnInfoTooltip,
@@ -114,6 +112,8 @@ import {
   QueryBuilderPostFilterOperator_In,
   QueryBuilderPostFilterOperator_NotIn,
 } from '../../stores/fetch-structure/tds/post-filter/operators/QueryBuilderPostFilterOperator_In.js';
+import { QueryBuilderPropertyNameDisplay } from '../QueryBuilderPropertyExpressionEditor.js';
+import { convertTextToPrimitiveInstanceValue } from '../../stores/shared/ValueSpecificationEditorHelper.js';
 
 const QueryBuilderPostFilterConditionContextMenu = observer(
   forwardRef<
@@ -185,28 +185,21 @@ const QueryBuilderPostFilterGroupConditionEditor = observer(
       node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.AND ? 'AND' : 'OR';
 
     return (
-      <div className="query-builder-post-filter-tree__node__label__content dnd__entry__container">
+      <div className="dnd__entry__container">
         <PanelEntryDropZonePlaceholder
           isDragOver={isDragOver}
           isDroppable={isDroppable}
-          label={`Add to Logical Group '${operationName}'`}
+          label={operationName}
+          className="query-builder-post-filter-tree__group-node__drop-zone"
         >
           <div
-            className={clsx('query-builder-post-filter-tree__group-node', {
-              'query-builder-post-filter-tree__group-node--and':
-                node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.AND,
-              'query-builder-post-filter-tree__group-node--or':
-                node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.OR,
-            })}
+            className="query-builder-post-filter-tree__group-node"
             title="Switch Operation"
             onClick={switchOperation}
           >
-            <div className="query-builder-post-filter-tree__group-node__label">
+            <div className="query-builder-post-filter-tree__group-node__label editable-value">
               {node.groupOperation}
             </div>
-            <button className="query-builder-post-filter-tree__group-node__action">
-              <FilledTriangleIcon />
-            </button>
           </div>
         </PanelEntryDropZonePlaceholder>
       </div>
@@ -217,10 +210,10 @@ const QueryBuilderPostFilterGroupConditionEditor = observer(
 export const QueryBuilderColumnBadge = observer(
   (props: {
     colState: QueryBuilderTDSColumnState;
+    removeColumn: () => void;
     onColumnChange?:
       | ((columnState: QueryBuilderProjectionColumnState) => Promise<void>)
       | undefined;
-    removeColumn?: () => void;
   }) => {
     const { colState, onColumnChange, removeColumn } = props;
     const applicationStore = useApplicationStore();
@@ -283,16 +276,14 @@ export const QueryBuilderColumnBadge = observer(
             <InfoCircleIcon />
           </div>
         </QueryBuilderColumnInfoTooltip>
-        {removeColumn && (
-          <button
-            className="query-builder-column-badge__action"
-            name="Reset"
-            title="Reset"
-            onClick={removeColumn}
-          >
-            <RefreshIcon />
-          </button>
-        )}
+        <button
+          className="query-builder-column-badge__action"
+          name="Reset"
+          title="Reset"
+          onClick={removeColumn}
+        >
+          <RefreshIcon />
+        </button>
       </div>
     );
 
@@ -419,11 +410,17 @@ const QueryBuilderPostFilterConditionEditor = observer(
     };
     const debouncedTypeaheadSearch = useMemo(
       () =>
-        debounce(
-          (inputVal: string) => node.condition.handleTypeaheadSearch(),
-          1000,
-        ),
-      [node],
+        debounce((inputValue: string) => {
+          const inputValueSpec = convertTextToPrimitiveInstanceValue(
+            PrimitiveType.STRING,
+            inputValue,
+            queryBuilderState.observerContext,
+          );
+          return node.condition.handleTypeaheadSearch(
+            inputValueSpec ?? undefined,
+          );
+        }, 1000),
+      [node, queryBuilderState.observerContext],
     );
     const cleanUpReloadValues = (): void => {
       node.condition.typeaheadSearchState.complete();
@@ -458,7 +455,7 @@ const QueryBuilderPostFilterConditionEditor = observer(
               isDroppable={isFilterValueDroppable}
               label="Change Filter Value"
             >
-              <BasicValueSpecificationEditor
+              <EditableBasicValueSpecificationEditor
                 valueSpecification={rightConditionValue.value}
                 setValueSpecification={changeValueSpecification}
                 graph={graph}
@@ -473,6 +470,7 @@ const QueryBuilderPostFilterConditionEditor = observer(
                 isConstant={queryBuilderState.constantState.isValueSpecConstant(
                   rightConditionValue.value,
                 )}
+                initializeAsEditable={node.isNewlyAdded}
               />
             </PanelEntryDropZonePlaceholder>
           </div>
@@ -496,15 +494,13 @@ const QueryBuilderPostFilterConditionEditor = observer(
               isDroppable={isFilterValueDroppable}
               label="Change Filter Value"
             >
-              <div className="query-builder-post-filter-tree__condition-node__property">
-                <QueryBuilderColumnBadge
-                  colState={rightConditionValue.tdsColumn}
-                  onColumnChange={
-                    isFilterValueDroppable ? changeRightCol : undefined
-                  }
-                  removeColumn={removeTDSColumnValue}
-                />
-              </div>
+              <QueryBuilderColumnBadge
+                colState={rightConditionValue.tdsColumn}
+                onColumnChange={
+                  isFilterValueDroppable ? changeRightCol : undefined
+                }
+                removeColumn={removeTDSColumnValue}
+              />
             </PanelEntryDropZonePlaceholder>
           </div>
         );
@@ -512,8 +508,12 @@ const QueryBuilderPostFilterConditionEditor = observer(
       return null;
     };
 
+    useEffect(() => {
+      node.setIsNewlyAdded(false);
+    }, [node]);
+
     return (
-      <div className="query-builder-post-filter-tree__node__label__content dnd__entry__container">
+      <div className="dnd__entry__container">
         <PanelEntryDropZonePlaceholder
           isDragOver={isDragOver && !isFilterValueDragOver}
           alwaysShowChildren={true}
@@ -521,11 +521,12 @@ const QueryBuilderPostFilterConditionEditor = observer(
         >
           <div className="query-builder-post-filter-tree__condition-node">
             <div className="query-builder-post-filter-tree__condition-node__property">
-              <QueryBuilderColumnBadge
-                colState={node.condition.leftConditionValue}
+              <QueryBuilderPropertyNameDisplay
+                columnName={node.condition.leftConditionValue.columnName}
+                title={node.condition.leftConditionValue.columnName}
               />
             </div>
-            <DropdownMenu
+            <ControlledDropdownMenu
               className="query-builder-post-filter-tree__condition-node__operator"
               title="Choose Operator..."
               content={
@@ -553,7 +554,7 @@ const QueryBuilderPostFilterConditionEditor = observer(
               <div className="query-builder-post-filter-tree__condition-node__operator__dropdown__trigger">
                 <CaretDownIcon />
               </div>
-            </DropdownMenu>
+            </ControlledDropdownMenu>
             {renderRightVal()}
           </div>
         </PanelEntryDropZonePlaceholder>
@@ -594,19 +595,18 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
       }
     >,
   ) => {
-    const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
+    const { node, onNodeSelect, innerProps } = props;
     const { tdsState } = innerProps;
-    const ref = useRef<HTMLDivElement>(null);
+    const dragRef = useRef<HTMLDivElement>(null);
     const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] =
       useState(false);
     const applicationStore = useApplicationStore();
     const postFilterState = tdsState.postFilterState;
-    const isExpandable =
-      node instanceof QueryBuilderPostFilterTreeGroupNodeData;
     const selectNode = (): void => onNodeSelect?.(node);
-    const toggleExpandNode = (): void => node.setIsOpen(!node.isOpen);
     const removeNode = (): void =>
       postFilterState.removeNodeAndPruneBranch(node);
+
+    // Drag and Drop
     const handleDrop = useCallback(
       (item: QueryBuilderPostFilterDropTarget, type: string): void => {
         if (QUERY_BUILDER_POST_FILTER_DND_TYPE.CONDITION === type) {
@@ -622,6 +622,7 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
                   nodeBeingDragged.id,
                 ) as QueryBuilderPostFilterTreeConditionNodeData
               ).condition,
+              true,
             );
 
           if (node instanceof QueryBuilderPostFilterTreeConditionNodeData) {
@@ -667,6 +668,7 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
               new QueryBuilderPostFilterTreeConditionNodeData(
                 undefined,
                 conditionState,
+                true,
               ),
               node,
             );
@@ -730,16 +732,15 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
                 : QUERY_BUILDER_POST_FILTER_DND_TYPE.BLANK_CONDITION,
           item: () => ({ node }),
           end: (): void => postFilterState.setRearrangingConditions(false),
+          canDrag: () =>
+            node instanceof QueryBuilderPostFilterTreeConditionNodeData ||
+            node instanceof QueryBuilderPostFilterTreeBlankConditionNodeData,
         }),
         [node, postFilterState],
       );
-    dragConnector(dropConnector(ref));
+    dragConnector(dropConnector(dragRef));
     useDragPreviewLayer(dragPreviewConnector);
 
-    // context menu
-    const onContextMenuOpen = (): void => setIsSelectedFromContextMenu(true);
-    const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false);
-
     const { isDroppable } = useDragLayer((monitor) => ({
       isDroppable:
         monitor.isDragging() &&
@@ -747,95 +748,94 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
           monitor.getItemType() === QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE),
     }));
 
+    // context menu
+    const onContextMenuOpen = (): void => setIsSelectedFromContextMenu(true);
+    const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false);
+
+    const showRemoveButton =
+      node instanceof QueryBuilderPostFilterTreeConditionNodeData ||
+      node instanceof QueryBuilderPostFilterTreeBlankConditionNodeData;
+
     return (
-      <ContextMenu
-        content={
-          <QueryBuilderPostFilterConditionContextMenu
-            tdsState={tdsState}
-            node={node}
-          />
+      <div
+        data-testid={
+          QUERY_BUILDER_TEST_ID.QUERY_BUILDER_POST_FILTER_TREE_NODE_CONTAINER
+        }
+        onClick={
+          node instanceof QueryBuilderPostFilterTreeConditionNodeData ||
+          node instanceof QueryBuilderPostFilterTreeBlankConditionNodeData
+            ? selectNode
+            : undefined
         }
-        menuProps={{ elevation: 7 }}
-        onOpen={onContextMenuOpen}
-        onClose={onContextMenuClose}
+        className={clsx('query-builder-post-filter-tree__node__container', {
+          'query-builder-post-filter-tree__node__container--group':
+            node instanceof QueryBuilderPostFilterTreeGroupNodeData,
+          'query-builder-post-filter-tree__node__container--condition':
+            node instanceof QueryBuilderPostFilterTreeConditionNodeData ||
+            node instanceof QueryBuilderPostFilterTreeBlankConditionNodeData,
+          'query-builder-post-filter-tree__node__container--no-hover':
+            postFilterState.isRearrangingConditions,
+          'query-builder-post-filter-tree__node__container--selected':
+            node === postFilterState.selectedNode,
+          'query-builder-post-filter-tree__node__container--selected-from-context-menu':
+            isSelectedFromContextMenu,
+        })}
       >
-        <div
-          ref={ref}
-          data-testid={
-            QUERY_BUILDER_TEST_ID.QUERY_BUILDER_POST_FILTER_TREE_NODE_CONTENT
+        <ContextMenu
+          content={
+            <QueryBuilderPostFilterConditionContextMenu
+              tdsState={tdsState}
+              node={node}
+            />
           }
-          className={clsx(
-            'tree-view__node__container query-builder-post-filter-tree__node__container',
-            {
-              'query-builder-post-filter-tree__node__container--no-hover':
-                postFilterState.isRearrangingConditions,
-              'query-builder-post-filter-tree__node__container--selected':
-                node === postFilterState.selectedNode,
-              'query-builder-post-filter-tree__node__container--selected-from-context-menu':
-                isSelectedFromContextMenu,
-            },
-          )}
+          menuProps={{ elevation: 7 }}
+          onOpen={onContextMenuOpen}
+          onClose={onContextMenuClose}
+          className="query-builder-post-filter-tree__node__context-menu"
         >
           <div
+            data-testid={
+              QUERY_BUILDER_TEST_ID.QUERY_BUILDER_POST_FILTER_TREE_NODE_CONTENT
+            }
             className="query-builder-post-filter-tree__node__content"
-            style={{
-              paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 2) + 1.5}rem`,
-              display: 'flex',
-            }}
-            onClick={selectNode}
+            ref={dragRef}
           >
-            {isExpandable && (
-              <div
-                className="query-builder-post-filter-tree__expand-icon"
-                onClick={toggleExpandNode}
-              >
-                {node.isOpen ? <ChevronDownIcon /> : <ChevronRightIcon />}
-              </div>
+            {node instanceof QueryBuilderPostFilterTreeGroupNodeData && (
+              <QueryBuilderPostFilterGroupConditionEditor
+                node={node}
+                isDroppable={isDroppable}
+                isDragOver={isDragOver}
+              />
+            )}
+            {node instanceof QueryBuilderPostFilterTreeConditionNodeData && (
+              <QueryBuilderPostFilterConditionEditor
+                node={node}
+                isDragOver={deepIsDragOver}
+              />
+            )}
+            {node instanceof
+              QueryBuilderPostFilterTreeBlankConditionNodeData && (
+              <QueryBuilderPostFilterBlankConditionEditor
+                node={node}
+                isDragOver={isDragOver}
+                isDroppable={isDroppable}
+              />
             )}
-            <div
-              className={clsx(
-                'tree-view__node__label query-builder-post-filter-tree__node__label',
-                {
-                  'query-builder-post-filter-tree__node__label--expandable':
-                    isExpandable,
-                },
-              )}
-            >
-              {node instanceof QueryBuilderPostFilterTreeGroupNodeData && (
-                <QueryBuilderPostFilterGroupConditionEditor
-                  node={node}
-                  isDroppable={isDroppable}
-                  isDragOver={isDragOver}
-                />
-              )}
-              {node instanceof QueryBuilderPostFilterTreeConditionNodeData && (
-                <QueryBuilderPostFilterConditionEditor
-                  node={node}
-                  isDragOver={deepIsDragOver}
-                />
-              )}
-              {node instanceof
-                QueryBuilderPostFilterTreeBlankConditionNodeData && (
-                <QueryBuilderPostFilterBlankConditionEditor
-                  node={node}
-                  isDragOver={isDragOver}
-                  isDroppable={isDroppable}
-                />
-              )}
-            </div>
-          </div>
-          <div className="query-builder-post-filter-tree__node__actions">
-            <button
-              className="query-builder-post-filter-tree__node__action"
-              tabIndex={-1}
-              title="Remove"
-              onClick={removeNode}
-            >
-              <TimesIcon />
-            </button>
           </div>
-        </div>
-      </ContextMenu>
+          {showRemoveButton && (
+            <div className="query-builder-post-filter-tree__node__actions">
+              <button
+                className="query-builder-post-filter-tree__node__action"
+                tabIndex={-1}
+                title="Remove"
+                onClick={removeNode}
+              >
+                <TimesIcon />
+              </button>
+            </div>
+          )}
+        </ContextMenu>
+      </div>
     );
   },
 );
@@ -858,7 +858,15 @@ const QueryBuilderPostFilterTreeNodeView = observer(
       innerProps,
     } = props;
     return (
-      <div className="tree-view__node__block">
+      <div
+        data-testid={
+          QUERY_BUILDER_TEST_ID.QUERY_BUILDER_POST_FILTER_TREE_NODE_BLOCK
+        }
+        className={clsx('query-builder-post-filter-tree__node__block', {
+          'query-builder-post-filter-tree__node__block--group':
+            node instanceof QueryBuilderPostFilterTreeGroupNodeData,
+        })}
+      >
         <QueryBuilderPostFilterTreeNodeContainer
           node={node}
           level={level + 1}
@@ -866,17 +874,25 @@ const QueryBuilderPostFilterTreeNodeView = observer(
           onNodeSelect={onNodeSelect}
           innerProps={innerProps}
         />
-        {node.isOpen &&
-          getChildNodes(node).map((childNode) => (
-            <QueryBuilderPostFilterTreeNodeView
-              key={childNode.id}
-              node={childNode}
-              level={level + 1}
-              onNodeSelect={onNodeSelect}
-              getChildNodes={getChildNodes}
-              innerProps={innerProps}
-            />
-          ))}
+        {node.isOpen && getChildNodes(node).length > 0 && (
+          <div
+            data-testid={
+              QUERY_BUILDER_TEST_ID.QUERY_BUILDER_POST_FILTER_TREE_NODE_CHILDREN
+            }
+            className="query-builder-post-filter-tree__node__children"
+          >
+            {getChildNodes(node).map((childNode) => (
+              <QueryBuilderPostFilterTreeNodeView
+                key={childNode.id}
+                node={childNode}
+                level={level + 1}
+                onNodeSelect={onNodeSelect}
+                getChildNodes={getChildNodes}
+                innerProps={innerProps}
+              />
+            ))}
+          </div>
+        )}
       </div>
     );
   },
@@ -900,7 +916,10 @@ const QueryBuilderPostFilterTree = observer(
         ? node.childrenIds.map((id) => postFilterState.getNode(id))
         : [];
     return (
-      <div className="tree-view__node__root query-builder-post-filter-tree__root">
+      <div
+        data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_POST_FILTER_TREE}
+        className="tree-view__node__root query-builder-post-filter-tree__root"
+      >
         {rootNodes.map((node) => (
           <QueryBuilderPostFilterTreeNodeView
             key={node.id}
@@ -990,6 +1009,14 @@ const QueryBuilderPostFilterPanelContent = observer(
         );
       }
     };
+
+    const { isDroppable } = useDragLayer((monitor) => ({
+      isDroppable:
+        monitor.isDragging() &&
+        (monitor.getItemType() === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE ||
+          monitor.getItemType() === QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE),
+    }));
+
     // Drag and Drop
     const handleDrop = useCallback(
       async (item: QueryBuilderPostFilterDropTarget): Promise<void> => {
@@ -1031,6 +1058,7 @@ const QueryBuilderPostFilterPanelContent = observer(
           new QueryBuilderPostFilterTreeConditionNodeData(
             undefined,
             postFilterConditionState,
+            true,
           ),
           undefined,
         );
@@ -1062,13 +1090,6 @@ const QueryBuilderPostFilterPanelContent = observer(
     const addPostFilterRef = useRef<HTMLInputElement>(null);
     dropTargetConnector(addPostFilterRef);
 
-    const { isDroppable } = useDragLayer((monitor) => ({
-      isDroppable:
-        monitor.isDragging() &&
-        (monitor.getItemType() === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE ||
-          monitor.getItemType() === QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE),
-    }));
-
     return (
       <>
         <div className="panel__header">
@@ -1081,7 +1102,7 @@ const QueryBuilderPostFilterPanelContent = observer(
             )}
           </div>
           <div className="panel__header__actions">
-            <DropdownMenu
+            <ControlledDropdownMenu
               className="panel__header__action"
               title="Show Post-Filter Options Menu..."
               content={
@@ -1154,7 +1175,7 @@ const QueryBuilderPostFilterPanelContent = observer(
               }
             >
               <MoreVerticalIcon className="query-builder__icon__more-options" />
-            </DropdownMenu>
+            </ControlledDropdownMenu>
           </div>
         </div>
         <PanelContent>
@@ -1196,7 +1217,7 @@ const QueryBuilderPostFilterPanelContent = observer(
                   className="query-builder-post-filter-tree__free-drop-zone"
                   label="Add post-filter to main group"
                 >
-                  <></>{' '}
+                  <></>
                 </PanelEntryDropZonePlaceholder>
               </div>
             )}

package/src/components/fetch-structure/QueryBuilderTDSPanel.tsx

@@ -21,7 +21,7 @@ import {
   BlankPanelPlaceholder,
   CalculatorIcon,
   TimesIcon,
-  DropdownMenu,
+  ControlledDropdownMenu,
   MenuContent,
   MenuContentItem,
   CaretDownIcon,
@@ -1044,7 +1044,7 @@ const QueryBuilderProjectionColumnEditor = observer(
                       <CalendarClockIcon />
                     </div>
                   )}
-                <DropdownMenu
+                <ControlledDropdownMenu
                   className="query-builder__projection__column__aggregate__operator__dropdown"
                   title="Choose Aggregate Operator..."
                   disabled={!aggreateOperators.length}
@@ -1089,7 +1089,7 @@ const QueryBuilderProjectionColumnEditor = observer(
                   <div className="query-builder__projection__column__aggregate__operator__dropdown__trigger">
                     <CaretDownIcon />
                   </div>
-                </DropdownMenu>
+                </ControlledDropdownMenu>
               </div>
             </div>
             <div className="query-builder__projection__column__actions">

package/src/components/fetch-structure/QueryBuilderTDSWindowPanel.tsx

@@ -20,7 +20,7 @@ import {
   PanelContent,
   PanelDropZone,
   BlankPanelPlaceholder,
-  DropdownMenu,
+  ControlledDropdownMenu,
   InputWithInlineValidation,
   MenuContent,
   MenuContentItem,
@@ -439,7 +439,7 @@ const QueryBuilderWindowColumnModalEditor = observer(
                     >
                       {selectedOperatorState.operator.getLabel()}
                     </div>
-                    <DropdownMenu
+                    <ControlledDropdownMenu
                       className="query-builder__olap__column__operation__operator__dropdown"
                       title="Choose Window Function Operator..."
                       disabled={!operators.length}
@@ -474,7 +474,7 @@ const QueryBuilderWindowColumnModalEditor = observer(
                       <div className="query-builder__olap__column__operation__operator__dropdown__trigger">
                         <CaretDownIcon />
                       </div>
-                    </DropdownMenu>
+                    </ControlledDropdownMenu>
                   </div>
                 </div>
               </div>
@@ -553,7 +553,7 @@ const QueryBuilderWindowColumnModalEditor = observer(
                       {selectedSortBy.sortType.toLowerCase()}
                     </div>
                   )}
-                  <DropdownMenu
+                  <ControlledDropdownMenu
                     className="query-builder__olap__column__sortby__operator__dropdown"
                     title="Choose Window Function SortBy Operator..."
                     content={
@@ -601,7 +601,7 @@ const QueryBuilderWindowColumnModalEditor = observer(
                     >
                       <CaretDownIcon />
                     </div>
-                  </DropdownMenu>
+                  </ControlledDropdownMenu>
                 </div>
               </div>
             </PanelFormSection>
@@ -1007,7 +1007,7 @@ const QueryBuilderWindowColumnEditor = observer(
               >
                 {operationState.operator.getLabel()}
               </div>
-              <DropdownMenu
+              <ControlledDropdownMenu
                 className="query-builder__olap__column__operation__operator__dropdown"
                 disabled={!operators.length}
                 title="Choose Window Function Operator..."
@@ -1036,7 +1036,7 @@ const QueryBuilderWindowColumnEditor = observer(
                 <div className="query-builder__olap__column__operation__operator__dropdown__trigger">
                   <CaretDownIcon />
                 </div>
-              </DropdownMenu>
+              </ControlledDropdownMenu>
             </div>
           </div>
           <div className="query-builder__olap__column__window">
@@ -1132,7 +1132,7 @@ const QueryBuilderWindowColumnEditor = observer(
                   {sortByState.sortType.toLowerCase()}
                 </div>
               )}
-              <DropdownMenu
+              <ControlledDropdownMenu
                 className="query-builder__olap__column__sortby__operator__dropdown"
                 title="Choose Window Function SortBy Operator..."
                 content={
@@ -1176,7 +1176,7 @@ const QueryBuilderWindowColumnEditor = observer(
                 <div className="query-builder__olap__column__sortby__operator__dropdown__trigger">
                   <CaretDownIcon />
                 </div>
-              </DropdownMenu>
+              </ControlledDropdownMenu>
             </div>
           </div>
           <div className="query-builder__olap__column__name">