diff --git a/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts b/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts
index f5803afdf2e..f2d5ca7de20 100644
--- a/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts
+++ b/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts
@@ -1,4 +1,4 @@
-import { autoUpdate, flip, size, useFloating } from '@floating-ui/react';
+import { autoUpdate, autoPlacement, size, useFloating } from '@floating-ui/react';
 import { useMemo, useRef, useState } from 'react';
 
 import { measureText } from '../../utils';
@@ -31,10 +31,11 @@ export const useComboboxFloat = (items: Array<ComboboxOption<string | number>>,
 
   // the order of middleware is important!
   const middleware = [
-    flip({
-      // see https://floating-ui.com/docs/flip#combining-with-shift
-      crossAxis: true,
+    autoPlacement({
+      // see https://floating-ui.com/docs/autoplacement
+      allowedPlacements: ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
       boundary: document.body,
+      crossAxis: true,
     }),
     size({
       apply({ availableWidth, availableHeight }) {