Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor RecordSingleSelect and RecordMultiSelect to be synchronous #10469

Merged
merged 4 commits into from
Feb 25, 2025

Conversation

charlesBochet
Copy link
Member

@charlesBochet charlesBochet commented Feb 25, 2025

Context

We are experiencing a lot of re-rendering / flash on MultiRecordSelect / SingleRecordSelect / RelationPicker.

This PR is a first step to refactor this components

Scope

Only move files to uniformize and prepare for the upcoming refactoring

Vision

  • SingleRecordPicker
  • MultipleRecordPicker
  • sharing RecordPicker tooling (RecordPickerComponentInstanceContext, searchState)

Used in other areas:

  • RelationPicker (which is actually only a subcomponent of RelationToOneFieldInput)
  • RelationFromManyFieldInput
  • WorkflowRelationFieldInput
  • etc.
  • remove all effects
  • migrate to the latest APIs
  • make a pass on re-renders to remove them completely (we likely need to use a bit more familyStates here)

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR Summary

This PR optimizes the MultiRecordSelect component by improving click-outside handling and reducing unnecessary re-renders.

  • Replaced MultipleObjectRecordOnClickOutsideEffect with direct useListenClickOutside hook implementation in packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx
  • Removed unnecessary useEffect for hotkey scope setting that was causing re-renders
  • Refactored Escape key handler into a consolidated handleSubmit function
  • Simplified component structure by removing wrapper fragment
  • Improved performance by reducing state changes and component nesting

1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile

@charlesBochet charlesBochet changed the title WIP Refactor RecordSingleSelect and RecordMultiSelect to be synchronous Feb 25, 2025
@charlesBochet charlesBochet merged commit a1c7e32 into main Feb 25, 2025
47 checks passed
@charlesBochet charlesBochet deleted the fix-rerender-record-picker branch February 25, 2025 14:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants