scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-10-29 20:02:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
fixes #6890

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Faisal-imtiyaz123
2024-09-18 14:05:13 +05:30
committed by GitHub
parent 601e15f028
commit 72ab6bcf35
6 changed files with 35 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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,

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

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

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

@@ -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);

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

@@ -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();

14
packages/twenty-front/src/modules/ui/input/hooks/useInputFocusWithoutScrollOnMount.ts Normal file
View File

@@ -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 };
};

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

@@ -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) => (
<StyledDropdownMenuSearchInputContainer>
<StyledInput
autoComplete="off"
{...{ autoFocus, onChange, placeholder, type, value }}
ref={ref}
/>
</StyledDropdownMenuSearchInputContainer>
));
>(({ value, onChange, placeholder = 'Search', type }) => {
const { inputRef } = useInputFocusWithoutScrollOnMount();
return (
<StyledDropdownMenuSearchInputContainer>
<StyledInput
autoComplete="off"
{...{ onChange, placeholder, type, value }}
ref={inputRef}
/>
</StyledDropdownMenuSearchInputContainer>
);
});