diff --git a/webapp/packages/core-blocks/src/FormControls/InputAutocompletionMenu.tsx b/webapp/packages/core-blocks/src/FormControls/InputAutocompletionMenu.tsx index 650804cd118..d4a7619f1ef 100644 --- a/webapp/packages/core-blocks/src/FormControls/InputAutocompletionMenu.tsx +++ b/webapp/packages/core-blocks/src/FormControls/InputAutocompletionMenu.tsx @@ -10,22 +10,45 @@ import { observer } from 'mobx-react-lite'; import { Composite, CompositeItem, Popover } from '@dbeaver/ui-kit'; import { type InputAutocompleteProposal } from './useInputAutocomplete.js'; +import type { IContextMenuPositionCoords } from '../Menu/useContextMenuPosition.js'; import { useS } from '../useS.js'; import { BaseDropdownStyles, IconOrImage, s, Text } from '../index.js'; import { forwardRef } from 'react'; interface AutocompletionProps { proposals: InputAutocompleteProposal[]; + position: IContextMenuPositionCoords; className?: string; onSelect?: (proposal: InputAutocompleteProposal) => void; } export const InputAutocompletionMenu = observer( - forwardRef(function InputAutocompletionMenu({ proposals, onSelect }, ref) { + forwardRef(function InputAutocompletionMenu({ proposals, position, onSelect }, ref) { const styles = useS(BaseDropdownStyles); + function getAnchorRect(anchor: HTMLElement | null) { + if (!anchor) { + return null; + } + + const rect = anchor.getBoundingClientRect(); + + return { + x: rect.left + position.x, + y: rect.top + position.y, + }; + } + return ( - + {proposals.map(proposal => ( onSelect?.(proposal)}> diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableWhereFilter.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableWhereFilter.tsx index da628777ee2..df27bd9d541 100644 --- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableWhereFilter.tsx +++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableWhereFilter.tsx @@ -82,6 +82,7 @@ export const TableWhereFilter: PlaceholderComponent