From c8c4a953c2f8306bbdee46644dc3a7e2f36eac6e Mon Sep 17 00:00:00 2001
From: Lucas Bordeau <bordeau.lucas@gmail.com>
Date: Mon, 19 Jun 2023 15:51:35 +0200
Subject: [PATCH] 309 have comment relation picker show up above the relation
 field (#332)

* Added a floating ui manual offset to have the dropdown on top of the relation box

* Autofocus on dropdown search
---
 .../comments/components/CommentThreadRelationPicker.tsx   | 8 +++++++-
 .../modules/comments/components/MultipleEntitySelect.tsx  | 6 +++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/front/src/modules/comments/components/CommentThreadRelationPicker.tsx b/front/src/modules/comments/components/CommentThreadRelationPicker.tsx
index 2f9f2cf68..093912c34 100644
--- a/front/src/modules/comments/components/CommentThreadRelationPicker.tsx
+++ b/front/src/modules/comments/components/CommentThreadRelationPicker.tsx
@@ -168,7 +168,13 @@ export function CommentThreadRelationPicker({ commentThread }: OwnProps) {
 
   const { refs, floatingStyles } = useFloating({
     strategy: 'absolute',
-    middleware: [offset(), flip(), size()],
+    middleware: [
+      offset(({ rects }) => {
+        return -rects.reference.height;
+      }),
+      flip(),
+      size(),
+    ],
     whileElementsMounted: autoUpdate,
     open: isMenuOpen,
     placement: 'bottom-start',
diff --git a/front/src/modules/comments/components/MultipleEntitySelect.tsx b/front/src/modules/comments/components/MultipleEntitySelect.tsx
index 92874452a..5a4a4e5a8 100644
--- a/front/src/modules/comments/components/MultipleEntitySelect.tsx
+++ b/front/src/modules/comments/components/MultipleEntitySelect.tsx
@@ -55,7 +55,11 @@ export function MultipleEntitySelect({
 
   return (
     <DropdownMenu>
-      <DropdownMenuSearch value={searchFilter} onChange={handleFilterChange} />
+      <DropdownMenuSearch
+        value={searchFilter}
+        onChange={handleFilterChange}
+        autoFocus
+      />
       <DropdownMenuSeparator />
       <DropdownMenuItemContainer>
         {entitiesInDropdown?.map((entity) => (