From b95859cf52e94122b801f445470aac44e6f9bc39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zolt=C3=A1n=20Bedi?= <zoltan.bedi@gmail.com>
Date: Mon, 15 Sep 2025 20:12:36 +0200
Subject: [PATCH] Fix: Functions dropdown positioning (#2073)

Now it uses the position where it have enough space for it. Also removed
the input component as it didn't do anything.

<img width="2032" height="1167" alt="Screenshot 2025-09-05 at 14 29 00"
src="https://github.com/user-attachments/assets/0f75e4c3-ae7d-4200-b76c-e1f781f339ac"
/>

Fixes #2069
---
 .changeset/curvy-pianos-tell.md               |  5 ++
 .../FunctionEditor/AddZabbixFunction.tsx      | 49 ++++---------------
 2 files changed, 14 insertions(+), 40 deletions(-)
 create mode 100644 .changeset/curvy-pianos-tell.md

diff --git a/.changeset/curvy-pianos-tell.md b/.changeset/curvy-pianos-tell.md
new file mode 100644
index 0000000..279bd99
--- /dev/null
+++ b/.changeset/curvy-pianos-tell.md
@@ -0,0 +1,5 @@
+---
+'grafana-zabbix': patch
+---
+
+Fix: Functions dropdown positioning
diff --git a/src/datasource/components/FunctionEditor/AddZabbixFunction.tsx b/src/datasource/components/FunctionEditor/AddZabbixFunction.tsx
index 135a759..5efddb6 100644
--- a/src/datasource/components/FunctionEditor/AddZabbixFunction.tsx
+++ b/src/datasource/components/FunctionEditor/AddZabbixFunction.tsx
@@ -1,61 +1,30 @@
 import { css, cx } from '@emotion/css';
-import React, { useMemo, useState } from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
-import { Button, ClickOutsideWrapper, Icon, Input, Menu, useStyles2, useTheme2 } from '@grafana/ui';
-import { FuncDef } from '../../types/query';
+import { Button, Dropdown, Menu, useStyles2 } from '@grafana/ui';
+import React, { ReactNode, useMemo } from 'react';
 import { getCategories } from '../../metricFunctions';
-
-// import { mapFuncDefsToSelectables } from './helpers';
+import { FuncDef } from '../../types/query';
 
 type Props = {
-  // funcDefs: MetricFunc;
   onFuncAdd: (def: FuncDef) => void;
 };
 
 export function AddZabbixFunction({ onFuncAdd }: Props) {
-  const [showMenu, setShowMenu] = useState(false);
   const styles = useStyles2(getStyles);
-  const theme = useTheme2();
+  const menuItems = useMemo(() => buildMenuItems(onFuncAdd), [onFuncAdd]);
 
-  const onFuncAddInternal = (def: FuncDef) => {
-    onFuncAdd(def);
-    setShowMenu(false);
-  };
-
-  const onSearch = (e: React.FormEvent<HTMLInputElement>) => {
-    console.log(e.currentTarget.value);
-  };
-
-  const onClickOutside = () => {
-    setShowMenu(false);
-  };
-
-  const menuItems = useMemo(() => buildMenuItems(onFuncAddInternal), [onFuncAdd]);
+  const menuOverlay = useMemo(() => <Menu role="menu">{menuItems}</Menu>, [menuItems]);
 
   return (
-    <div>
-      {!showMenu && (
-        <Button
-          icon="plus"
-          variant="secondary"
-          className={cx(styles.button)}
-          aria-label="Add new function"
-          onClick={() => setShowMenu(!showMenu)}
-        />
-      )}
-      {showMenu && (
-        <ClickOutsideWrapper onClick={onClickOutside} useCapture>
-          <Input onChange={onSearch} suffix={<Icon name="search" />} />
-          <Menu style={{ position: 'absolute', zIndex: theme.zIndex.dropdown }}>{menuItems}</Menu>
-        </ClickOutsideWrapper>
-      )}
-    </div>
+    <Dropdown overlay={menuOverlay}>
+      <Button icon="plus" variant="secondary" className={cx(styles.button)} aria-label="Add new function" />
+    </Dropdown>
   );
 }
 
 function buildMenuItems(onClick: (func: FuncDef) => void) {
   const categories = getCategories();
-  const menuItems: JSX.Element[] = [];
+  const menuItems: ReactNode[] = [];
   for (const categoryName in categories) {
     const functions = categories[categoryName];
     const subItems = functions.map((f) => <Menu.Item label={f.name} key={f.name} onClick={() => onClick(f)} />);