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)
2024-12-06 15:27:48 +01:00
parent 14b7bcf262
commit a9cb20f317
87 changed files with 1201 additions and 1192 deletions
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
@ -1,32 +1,26 @@
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
-import { HotkeyEffect } from '@/ui/utilities/hotkey/components/HotkeyEffect';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
 import {
  autoUpdate,
  flip,
-  FloatingPortal,
  offset,
  Placement,
  size,
  useFloating,
 } from '@floating-ui/react';
-import { MouseEvent, ReactNode, useEffect, useRef } from 'react';
-import { flushSync } from 'react-dom';
+import { MouseEvent, ReactNode } from 'react';
 import { Keys } from 'react-hotkeys-hook';
-import { Key } from 'ts-key-enum';
-import { isDefined } from '~/utils/isDefined';

 import { useDropdown } from '../hooks/useDropdown';
-import { useInternalHotkeyScopeManagement } from '../hooks/useInternalHotkeyScopeManagement';

+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownUnmountEffect } from '@/ui/layout/dropdown/components/DropdownUnmountEffect';
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponeInstanceContext';
 import { dropdownMaxHeightComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownMaxHeightComponentStateV2';
-import { useListenClickOutsideV2 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
-import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
-import { DropdownMenu } from './DropdownMenu';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { flushSync } from 'react-dom';
+import { isDefined } from 'twenty-ui';
 import { DropdownOnToggleEffect } from './DropdownOnToggleEffect';

 type DropdownProps = {
@ -62,24 +56,15 @@ export const Dropdown = ({
  dropdownStrategy = 'absolute',
  dropdownOffset = { x: 0, y: 0 },
  disableBlur = false,
-  usePortal = false,
  onClickOutside,
  onClose,
  onOpen,
 }: DropdownProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const {
-    isDropdownOpen,
-    toggleDropdown,
-    closeDropdown,
-    dropdownWidth,
-    setDropdownPlacement,
-  } = useDropdown(dropdownId);
+  const { isDropdownOpen, toggleDropdown } = useDropdown(dropdownId);

  const offsetMiddlewares = [];

-  const [dropdownMaxHeight, setDropdownMaxHeight] = useRecoilComponentStateV2(
+  const setDropdownMaxHeight = useSetRecoilComponentStateV2(
    dropdownMaxHeightComponentStateV2,
    dropdownId,
  );
@ -111,14 +96,6 @@ export const Dropdown = ({
    strategy: dropdownStrategy,
  });

-  useEffect(() => {
-    setDropdownPlacement(placement);
-  }, [placement, setDropdownPlacement]);
-
-  const handleHotkeyTriggered = () => {
-    toggleDropdown();
-  };
-
  const handleClickableComponentClick = (event: MouseEvent) => {
    event.stopPropagation();
    event.preventDefault();
@ -127,88 +104,41 @@ export const Dropdown = ({
    onClickOutside?.();
  };

-  useListenClickOutsideV2({
-    refs: [refs.floating, refs.domReference],
-    listenerId: dropdownId,
-    callback: () => {
-      onClickOutside?.();
-      if (isDropdownOpen) {
-        closeDropdown();
-      }
-    },
-  });
-
-  useInternalHotkeyScopeManagement({
-    dropdownScopeId: getScopeIdFromComponentId(dropdownId),
-    dropdownHotkeyScopeFromParent: dropdownHotkeyScope,
-  });
-
-  useScopedHotkeys(
-    [Key.Escape],
-    () => {
-      if (isDropdownOpen) {
-        closeDropdown();
-      }
-    },
-    dropdownHotkeyScope.scope,
-    [closeDropdown, isDropdownOpen],
-  );
-
-  const dropdownMenuStyles = {
-    ...floatingStyles,
-    maxHeight: dropdownMaxHeight,
-  };
-
  return (
    <DropdownComponentInstanceContext.Provider
      value={{ instanceId: dropdownId }}
    >
      <DropdownScope dropdownScopeId={getScopeIdFromComponentId(dropdownId)}>
-        <div ref={containerRef} className={className}>
+        <>
          {clickableComponent && (
            <div
              ref={refs.setReference}
              onClick={handleClickableComponentClick}
-              className={className}
            >
              {clickableComponent}
            </div>
          )}
-          {hotkey && (
-            <HotkeyEffect
-              hotkey={hotkey}
-              onHotkeyTriggered={handleHotkeyTriggered}
-            />
-          )}
-          {isDropdownOpen && usePortal && (
-            <FloatingPortal>
-              <DropdownMenu
-                disableBlur={disableBlur}
-                width={dropdownMenuWidth ?? dropdownWidth}
-                data-select-disable
-                ref={refs.setFloating}
-                style={dropdownMenuStyles}
-              >
-                {dropdownComponents}
-              </DropdownMenu>
-            </FloatingPortal>
-          )}
-          {isDropdownOpen && !usePortal && (
-            <DropdownMenu
+          {isDropdownOpen && (
+            <DropdownContent
+              className={className}
+              floatingStyles={floatingStyles}
              disableBlur={disableBlur}
-              width={dropdownMenuWidth ?? dropdownWidth}
-              data-select-disable
-              ref={refs.setFloating}
-              style={dropdownMenuStyles}
-            >
-              {dropdownComponents}
-            </DropdownMenu>
+              dropdownMenuWidth={dropdownMenuWidth}
+              dropdownComponents={dropdownComponents}
+              dropdownId={dropdownId}
+              dropdownPlacement={placement ?? 'bottom-end'}
+              floatingUiRefs={refs}
+              hotkeyScope={dropdownHotkeyScope}
+              hotkey={hotkey}
+              onClickOutside={onClickOutside}
+              onHotkeyTriggered={toggleDropdown}
+            />
          )}
          <DropdownOnToggleEffect
            onDropdownClose={onClose}
            onDropdownOpen={onOpen}
          />
-        </div>
+        </>
      </DropdownScope>
      <DropdownUnmountEffect dropdownId={dropdownId} />
    </DropdownComponentInstanceContext.Provider>
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownContent.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownContent.tsx
@ -0,0 +1,128 @@
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useInternalHotkeyScopeManagement } from '@/ui/layout/dropdown/hooks/useInternalHotkeyScopeManagement';
+import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
+import { dropdownMaxHeightComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownMaxHeightComponentStateV2';
+import { HotkeyEffect } from '@/ui/utilities/hotkey/components/HotkeyEffect';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import {
+  FloatingPortal,
+  Placement,
+  UseFloatingReturn,
+} from '@floating-ui/react';
+import { useEffect } from 'react';
+import { Keys } from 'react-hotkeys-hook';
+import { useRecoilValue } from 'recoil';
+import { Key } from 'ts-key-enum';
+
+export type DropdownContentProps = {
+  className?: string;
+  dropdownId: string;
+  dropdownPlacement: Placement;
+  floatingUiRefs: UseFloatingReturn['refs'];
+  onClickOutside?: () => void;
+  hotkeyScope: HotkeyScope;
+  floatingStyles: UseFloatingReturn['floatingStyles'];
+  hotkey?: {
+    key: Keys;
+    scope: string;
+  };
+  onHotkeyTriggered?: () => void;
+  disableBlur?: boolean;
+  dropdownMenuWidth?: `${string}px` | `${number}%` | 'auto' | number;
+  dropdownComponents: React.ReactNode;
+  parentDropdownId?: string;
+};
+
+export const DropdownContent = ({
+  className,
+  dropdownId,
+  dropdownPlacement,
+  floatingUiRefs,
+  onClickOutside,
+  hotkeyScope,
+  floatingStyles,
+  hotkey,
+  onHotkeyTriggered,
+  disableBlur,
+  dropdownMenuWidth,
+  dropdownComponents,
+}: DropdownContentProps) => {
+  const { isDropdownOpen, closeDropdown, dropdownWidth, setDropdownPlacement } =
+    useDropdown(dropdownId);
+
+  const activeDropdownFocusId = useRecoilValue(activeDropdownFocusIdState);
+
+  const [dropdownMaxHeight] = useRecoilComponentStateV2(
+    dropdownMaxHeightComponentStateV2,
+    dropdownId,
+  );
+
+  useEffect(() => {
+    setDropdownPlacement(dropdownPlacement);
+  }, [dropdownPlacement, setDropdownPlacement]);
+
+  useListenClickOutside({
+    refs: [floatingUiRefs.floating, floatingUiRefs.domReference],
+    listenerId: dropdownId,
+    callback: (event) => {
+      if (activeDropdownFocusId !== dropdownId) return;
+
+      if (isDropdownOpen) {
+        event.stopImmediatePropagation();
+        event.preventDefault();
+
+        closeDropdown();
+      }
+
+      onClickOutside?.();
+    },
+  });
+
+  useInternalHotkeyScopeManagement({
+    dropdownScopeId: getScopeIdFromComponentId(dropdownId),
+    dropdownHotkeyScopeFromParent: hotkeyScope,
+  });
+
+  useScopedHotkeys(
+    [Key.Escape],
+    () => {
+      if (activeDropdownFocusId !== dropdownId) return;
+
+      if (isDropdownOpen) {
+        closeDropdown();
+      }
+    },
+    hotkeyScope?.scope,
+    [closeDropdown, isDropdownOpen],
+  );
+
+  const dropdownMenuStyles = {
+    ...floatingStyles,
+    maxHeight: dropdownMaxHeight,
+  };
+
+  return (
+    <>
+      {hotkey && onHotkeyTriggered && (
+        <HotkeyEffect hotkey={hotkey} onHotkeyTriggered={onHotkeyTriggered} />
+      )}
+      <FloatingPortal>
+        <DropdownMenu
+          className={className}
+          disableBlur={disableBlur}
+          width={dropdownMenuWidth ?? dropdownWidth}
+          data-select-disable
+          ref={floatingUiRefs.setFloating}
+          style={dropdownMenuStyles}
+        >
+          {dropdownComponents}
+        </DropdownMenu>
+      </FloatingPortal>
+    </>
+  );
+};
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx
@ -18,7 +18,6 @@ const StyledHeader = styled.li`
  padding: ${({ theme }) => theme.spacing(1)};

  user-select: none;
-  width: inherit;

  &:hover {
    background: ${({ theme, onClick }) =>
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx
@ -44,7 +44,7 @@ const StyledInputContainer = styled.div`

 const StyledRightContainer = styled.div`
  position: absolute;
-  right: ${({ theme }) => theme.spacing(1)};
+  right: ${({ theme }) => theme.spacing(2)};
  top: 50%;
  transform: translateY(-50%);
 `;
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx
@ -37,12 +37,14 @@ export const DropdownMenuItemsContainer = ({
  children,
  hasMaxHeight,
  className,
+  withoutScrollWrapper,
 }: {
  children: React.ReactNode;
  hasMaxHeight?: boolean;
  className?: string;
+  withoutScrollWrapper?: boolean;
 }) => {
-  return (
+  return withoutScrollWrapper === true ? (
    <StyledDropdownMenuItemsExternalContainer
      hasMaxHeight={hasMaxHeight}
      className={className}
@ -59,5 +61,16 @@ export const DropdownMenuItemsContainer = ({
        </StyledDropdownMenuItemsInternalContainer>
      )}
    </StyledDropdownMenuItemsExternalContainer>
+  ) : (
+    <ScrollWrapper contextProviderName="dropdownMenuItemsContainer">
+      <StyledDropdownMenuItemsExternalContainer
+        hasMaxHeight={hasMaxHeight}
+        className={className}
+      >
+        <StyledDropdownMenuItemsInternalContainer>
+          {children}
+        </StyledDropdownMenuItemsInternalContainer>
+      </StyledDropdownMenuItemsExternalContainer>
+    </ScrollWrapper>
  );
 };
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts
@ -1,6 +1,8 @@
 import { useRecoilState } from 'recoil';

 import { useDropdownStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownStates';
+import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
+import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
 import { useCallback } from 'react';
@ -17,6 +19,12 @@ export const useDropdown = (dropdownId?: string) => {
    dropdownScopeId: getScopeIdOrUndefinedFromComponentId(dropdownId),
  });

+  const { setActiveDropdownFocusIdAndMemorizePrevious } =
+    useSetActiveDropdownFocusIdAndMemorizePrevious();
+
+  const { goBackToPreviousDropdownFocusId } =
+    useGoBackToPreviousDropdownFocusId();
+
  const {
    setHotkeyScopeAndMemorizePreviousScope,
    goBackToPreviousHotkeyScope,
@ -34,17 +42,28 @@ export const useDropdown = (dropdownId?: string) => {
    useRecoilState(isDropdownOpenState);

  const closeDropdown = useCallback(() => {
-    goBackToPreviousHotkeyScope();
-    setIsDropdownOpen(false);
-  }, [goBackToPreviousHotkeyScope, setIsDropdownOpen]);
+    if (isDropdownOpen) {
+      goBackToPreviousHotkeyScope();
+      setIsDropdownOpen(false);
+      goBackToPreviousDropdownFocusId();
+    }
+  }, [
+    isDropdownOpen,
+    goBackToPreviousHotkeyScope,
+    setIsDropdownOpen,
+    goBackToPreviousDropdownFocusId,
+  ]);

  const openDropdown = () => {
-    setIsDropdownOpen(true);
-    if (isDefined(dropdownHotkeyScope)) {
-      setHotkeyScopeAndMemorizePreviousScope(
-        dropdownHotkeyScope.scope,
-        dropdownHotkeyScope.customScopes,
-      );
+    if (!isDropdownOpen) {
+      setIsDropdownOpen(true);
+      setActiveDropdownFocusIdAndMemorizePrevious(dropdownId ?? scopeId);
+      if (isDefined(dropdownHotkeyScope)) {
+        setHotkeyScopeAndMemorizePreviousScope(
+          dropdownHotkeyScope.scope,
+          dropdownHotkeyScope.customScopes,
+        );
+      }
    }
  };

--- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId.ts
@ -0,0 +1,23 @@
+import { useRecoilCallback } from 'recoil';
+
+import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
+import { previousDropdownFocusIdState } from '@/ui/layout/dropdown/states/previousDropdownFocusIdState';
+
+export const useGoBackToPreviousDropdownFocusId = () => {
+  const goBackToPreviousDropdownFocusId = useRecoilCallback(
+    ({ snapshot, set }) =>
+      () => {
+        const previouslyFocusedDropdownId = snapshot
+          .getLoadable(previousDropdownFocusIdState)
+          .getValue();
+
+        set(activeDropdownFocusIdState, previouslyFocusedDropdownId);
+        set(previousDropdownFocusIdState, null);
+      },
+    [],
+  );
+
+  return {
+    goBackToPreviousDropdownFocusId,
+  };
+};
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious.ts
@ -0,0 +1,23 @@
+import { useRecoilCallback } from 'recoil';
+
+import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
+import { previousDropdownFocusIdState } from '@/ui/layout/dropdown/states/previousDropdownFocusIdState';
+
+export const useSetActiveDropdownFocusIdAndMemorizePrevious = () => {
+  const setActiveDropdownFocusIdAndMemorizePrevious = useRecoilCallback(
+    ({ snapshot, set }) =>
+      (dropdownId: string) => {
+        const focusedDropdownId = snapshot
+          .getLoadable(activeDropdownFocusIdState)
+          .getValue();
+
+        set(previousDropdownFocusIdState, focusedDropdownId);
+        set(activeDropdownFocusIdState, dropdownId);
+      },
+    [],
+  );
+
+  return {
+    setActiveDropdownFocusIdAndMemorizePrevious,
+  };
+};
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/activeDropdownFocusIdState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/activeDropdownFocusIdState.ts
@ -0,0 +1,6 @@
+import { createState } from 'twenty-ui';
+
+export const activeDropdownFocusIdState = createState<string | null>({
+  key: 'activeDropdownFocusIdState',
+  defaultValue: null,
+});
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/previousDropdownFocusIdState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/previousDropdownFocusIdState.ts
@ -0,0 +1,6 @@
+import { createState } from 'twenty-ui';
+
+export const previousDropdownFocusIdState = createState<string | null>({
+  key: 'previousDropdownFocusIdState',
+  defaultValue: null,
+});