Refactor and fixes dropdown bugs (#8807)

Fixes https://github.com/twentyhq/twenty/issues/8788
Fixes https://github.com/twentyhq/twenty/issues/8793
Fixes https://github.com/twentyhq/twenty/issues/8791
Fixes https://github.com/twentyhq/twenty/issues/8890
Fixes https://github.com/twentyhq/twenty/issues/8893

- [x] Also : 

Icon buttons under dropdown are visible without blur : 

![Capture d’écran du 2024-11-29
15-09-53](https://github.com/user-attachments/assets/f563333d-4e43-4ded-acc7-62e116004ed9)

- [x] Also : 

<img width="237" alt="image"
src="https://github.com/user-attachments/assets/e4c70936-beff-4481-89cb-0a32a36e0ee2">

- [x] Also : 

<img width="335" alt="image"
src="https://github.com/user-attachments/assets/5be60395-6baf-49eb-8d40-197add049e20">

- [x] Also : 

<img width="287" alt="image"
src="https://github.com/user-attachments/assets/a317561f-7986-4d70-a1c0-deee4f4e268a">

- Button create new without padding
- Container is expanding

- [x] Also : 

<img width="303" alt="image"
src="https://github.com/user-attachments/assets/09f8a27f-91db-4191-acdc-aaaeedaf6da5">

- [x] Also : 

<img width="133" alt="image"
src="https://github.com/user-attachments/assets/fe17b32e-f7a4-46c4-8040-239eaf8198e8">

Font is cut at bottom ?

- [x] Also : 

<img width="385" alt="image"
src="https://github.com/user-attachments/assets/7bab2092-2936-4112-a2ee-d32d6737e304">

The component should flip and not resize in this situation

- [x] Also : 

<img width="244" alt="image"
src="https://github.com/user-attachments/assets/5384f49a-71f9-4638-a60c-158cc8c83f81">

- [x] Also : 


![image](https://github.com/user-attachments/assets/9cd1f43a-df59-401e-9a41-bdb8e93ebe58)

packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx

@@ -8,10 +8,11 @@ import { CountrySelect } from '@/ui/input/components/internal/country/components
 import { SELECT_COUNTRY_DROPDOWN_ID } from '@/ui/input/components/internal/country/constants/SelectCountryDropdownId';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
-import { MOBILE_VIEWPORT } from 'twenty-ui';
-import { isDefined } from '~/utils/isDefined';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { useRecoilValue } from 'recoil';
+import { isDefined, MOBILE_VIEWPORT } from 'twenty-ui';
 
 const StyledAddressContainer = styled.div`
   background: ${({ theme }) => theme.background.secondary};
@@ -190,18 +191,22 @@ export const AddressInput = ({
     [onEscape, internalValue],
   );
 
-  const { useListenClickOutside } = useClickOutsideListener('addressInput');
+  const activeDropdownFocusId = useRecoilValue(activeDropdownFocusIdState);
 
   useListenClickOutside({
     refs: [wrapperRef],
     callback: (event) => {
+      if (activeDropdownFocusId === SELECT_COUNTRY_DROPDOWN_ID) {
+        return;
+      }
+
       event.stopImmediatePropagation();
 
       closeCountryDropdown();
-
       onClickOutside?.(event, internalValue);
     },
     enabled: isDefined(onClickOutside),
+    listenerId: 'address-input',
   });
 
   useEffect(() => {

packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx

@@ -9,7 +9,7 @@ import {
   MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
 } from '@/ui/input/components/internal/date/components/InternalDatePicker';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { useListenClickOutsideV2 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
 const StyledCalendarContainer = styled.div`
   background: ${({ theme }) => theme.background.transparent.secondary};
@@ -72,7 +72,7 @@ export const DateInput = ({
     MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
   );
 
-  useListenClickOutsideV2({
+  useListenClickOutside({
     refs: [wrapperRef],
     listenerId: 'DateInput',
     callback: (event) => {

packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx

@@ -10,9 +10,9 @@ import { Key } from 'ts-key-enum';
 
 import { FieldDoubleText } from '@/object-record/record-field/types/FieldDoubleText';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from '~/utils/isDefined';
 
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { splitFullName } from '~/utils/format/spiltFullName';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 import { StyledTextInput } from './TextInput';
@@ -158,6 +158,7 @@ export const DoubleTextInput = ({
       });
     },
     enabled: isDefined(onClickOutside),
+    listenerId: 'double-text-input',
   });
 
   const handleOnPaste = (event: ClipboardEvent<HTMLInputElement>) => {

packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx

@@ -2,13 +2,13 @@ import styled from '@emotion/styled';
 import { OVERLAY_BACKGROUND } from 'twenty-ui';
 
 const StyledFieldTextAreaOverlay = styled.div`
+  align-items: center;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  display: flex;
+  margin: -1px;
+  max-height: 420px;
   position: absolute;
   top: 0;
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  align-items: center;
-  display: flex;
-  max-height: 420px;
-  margin: -1px;
   width: 100%;
   ${OVERLAY_BACKGROUND}
 `;

packages/twenty-front/src/modules/ui/field/input/components/SelectInput.tsx

@@ -1,14 +1,12 @@
 import { SelectOption } from '@/spreadsheet-import/types';
 import { SelectInput as SelectBaseInput } from '@/ui/input/components/SelectInput';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
-import { ReferenceType } from '@floating-ui/react';
 
 type SelectInputProps = {
   selectableListId: string;
   selectableItemIdArray: string[];
   hotkeyScope: string;
   onEnter: (itemId: string) => void;
-  selectWrapperRef?: ReferenceType | null | undefined;
   onOptionSelected: (selectedOption: SelectOption) => void;
   options: SelectOption[];
   onCancel?: () => void;
@@ -23,7 +21,6 @@ export const SelectInput = ({
   selectableItemIdArray,
   hotkeyScope,
   onEnter,
-  selectWrapperRef,
   onOptionSelected,
   options,
   onCancel,
@@ -40,7 +37,6 @@ export const SelectInput = ({
       onEnter={onEnter}
     >
       <SelectBaseInput
-        parentRef={selectWrapperRef}
         onOptionSelected={onOptionSelected}
         options={options}
         onCancel={onCancel}