Fixes resetting of scroll position in RecordShowPage due to opening of some dropdowns (#6890) (#6906)

fixes #6890

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx

@@ -1,7 +1,7 @@
 import { AvatarChip, AvatarChipVariant } from 'twenty-ui';
 
 import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
-import { RecordIndexEventContext } from '@/object-record/record-index/contexts/RecordIndexEventContext';
+import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { useContext } from 'react';
 
@@ -16,7 +16,7 @@ export const RecordIdentifierChip = ({
   record,
   variant,
 }: RecordIdentifierChipProps) => {
-  const { onIndexIdentifierClick } = useContext(RecordIndexEventContext);
+  const { onIndexIdentifierClick } = useContext(RecordIndexRootPropsContext);
 
   const { recordChipData } = useRecordChipData({
     objectNameSingular,

packages/twenty-front/src/modules/object-record/record-index/contexts/RecordIndexEventContext.tsx

@@ -1,9 +0,0 @@
-import { createEventContext } from '~/utils/createEventContext';
-
-export type RecordIndexEventContextProps = {
-  onIndexIdentifierClick: (recordId: string) => void;
-  onIndexRecordsLoaded: () => void;
-};
-
-export const RecordIndexEventContext =
-  createEventContext<RecordIndexEventContextProps>();

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts

@@ -20,7 +20,7 @@ import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useC
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
 import { isDefined } from '~/utils/isDefined';
 
-import { RecordIndexEventContext } from '@/object-record/record-index/contexts/RecordIndexEventContext';
+import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
 import { useContext } from 'react';
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 
@@ -41,7 +41,7 @@ export type OpenTableCellArgs = {
 };
 
 export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
-  const { onIndexIdentifierClick } = useContext(RecordIndexEventContext);
+  const { onIndexIdentifierClick } = useContext(RecordIndexRootPropsContext);
   const moveEditModeToTableCellPosition =
     useMoveEditModeToTableCellPosition(tableScopeId);
 

packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowWrapper.tsx

@@ -5,7 +5,7 @@ import { useInView } from 'react-intersection-observer';
 import { useRecoilValue } from 'recoil';
 
 import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage';
-import { RecordIndexEventContext } from '@/object-record/record-index/contexts/RecordIndexEventContext';
+import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
@@ -24,7 +24,7 @@ export const RecordTableRowWrapper = ({
   children: ReactNode;
 }) => {
   const { objectMetadataItem } = useContext(RecordTableContext);
-  const { onIndexRecordsLoaded } = useContext(RecordIndexEventContext);
+  const { onIndexRecordsLoaded } = useContext(RecordIndexRootPropsContext);
 
   const theme = useTheme();
 

packages/twenty-front/src/modules/ui/input/hooks/useInputFocusWithoutScrollOnMount.ts

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react';
+import { isDefined } from 'twenty-ui';
+
+export const useInputFocusWithoutScrollOnMount = () => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isDefined(inputRef.current)) {
+      inputRef.current.focus({ preventScroll: true });
+    }
+  });
+
+  return { inputRef };
+};

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx

@@ -1,5 +1,6 @@
-import { forwardRef, InputHTMLAttributes } from 'react';
+import { useInputFocusWithoutScrollOnMount } from '@/ui/input/hooks/useInputFocusWithoutScrollOnMount';
 import styled from '@emotion/styled';
+import { forwardRef, InputHTMLAttributes } from 'react';
 import { TEXT_INPUT_STYLE } from 'twenty-ui';
 
 const StyledDropdownMenuSearchInputContainer = styled.div`
@@ -35,12 +36,16 @@ const StyledInput = styled.input`
 export const DropdownMenuSearchInput = forwardRef<
   HTMLInputElement,
   InputHTMLAttributes<HTMLInputElement>
->(({ value, onChange, autoFocus, placeholder = 'Search', type }, ref) => (
+>(({ value, onChange, placeholder = 'Search', type }) => {
+  const { inputRef } = useInputFocusWithoutScrollOnMount();
+
+  return (
     <StyledDropdownMenuSearchInputContainer>
       <StyledInput
         autoComplete="off"
-      {...{ autoFocus, onChange, placeholder, type, value }}
+        {...{ onChange, placeholder, type, value }}
-      ref={ref}
+        ref={inputRef}
       />
     </StyledDropdownMenuSearchInputContainer>
-));
+  );
+});