From 431b5de794cf30e8a07d663d09ce7b1539e3453d Mon Sep 17 00:00:00 2001 From: Shashank Vishwakarma Date: Sat, 25 May 2024 23:31:29 +0530 Subject: [PATCH 1/6] Fixed: Select fields now selects on pressing the enter key --- .../input/components/SelectFieldInput.tsx | 14 ++++++++++- .../components/DropdownMenuSearchInput.tsx | 23 +++++++++++-------- 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx index e0b433eef715..23888baee3d6 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from 'react'; +import React, { useRef, useState } from 'react'; import styled from '@emotion/styled'; import { useSelectField } from '@/object-record/record-field/meta-types/hooks/useSelectField'; @@ -59,12 +59,24 @@ export const SelectFieldInput = ({ }, }); + const handleKeyDown = (event: React.KeyboardEvent) => { + if (event.key === 'Enter') { + const selectedOption = optionsInDropDown.find( + (option) => + option.value !== fieldValue && + option.label.toLowerCase().includes(searchFilter.toLowerCase()), + ); + selectedOption && onSubmit?.(() => persistField(selectedOption.value)); + } + }; + return ( setSearchFilter(event.currentTarget.value)} + onKeyDown={handleKeyDown} autoFocus /> diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx index c5e3ffa84fc6..f2c94e1b051a 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx @@ -36,12 +36,17 @@ const StyledInput = styled.input` export const DropdownMenuSearchInput = forwardRef< HTMLInputElement, InputHTMLAttributes ->(({ value, onChange, autoFocus, placeholder = 'Search', type }, ref) => ( - - - -)); +>( + ( + { value, onChange, onKeyDown, autoFocus, placeholder = 'Search', type }, + ref, + ) => ( + + + + ), +); From 8dbf7ffff164936b0c8cc84c6433a1b87b71c91a Mon Sep 17 00:00:00 2001 From: Shashank Vishwakarma Date: Thu, 30 May 2024 02:42:23 +0530 Subject: [PATCH 2/6] Changes: Updated logic with a new hotkey scope SelectField --- .../input/components/SelectFieldInput.tsx | 16 ++++++++----- .../RecordTableCellFieldContextWrapper.tsx | 6 ++++- .../select/types/SelectFieldHotkeyScope.tsx | 3 +++ .../components/DropdownMenuSearchInput.tsx | 23 ++++++++----------- 4 files changed, 27 insertions(+), 21 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/select/types/SelectFieldHotkeyScope.tsx diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx index 23888baee3d6..732d2400bafd 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx @@ -1,5 +1,6 @@ import React, { useRef, useState } from 'react'; import styled from '@emotion/styled'; +import { Key } from 'ts-key-enum'; import { useSelectField } from '@/object-record/record-field/meta-types/hooks/useSelectField'; import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent'; @@ -9,6 +10,7 @@ import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/Dropdow import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { MenuItemSelectTag } from '@/ui/navigation/menu-item/components/MenuItemSelectTag'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; +import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { isDefined } from '~/utils/isDefined'; const StyledRelationPickerContainer = styled.div` @@ -26,7 +28,8 @@ export const SelectFieldInput = ({ onSubmit, onCancel, }: SelectFieldInputProps) => { - const { persistField, fieldDefinition, fieldValue } = useSelectField(); + const { persistField, fieldDefinition, fieldValue, hotkeyScope } = + useSelectField(); const [searchFilter, setSearchFilter] = useState(''); const containerRef = useRef(null); @@ -59,16 +62,18 @@ export const SelectFieldInput = ({ }, }); - const handleKeyDown = (event: React.KeyboardEvent) => { - if (event.key === 'Enter') { + useScopedHotkeys( + Key.Enter, + () => { const selectedOption = optionsInDropDown.find( (option) => option.value !== fieldValue && option.label.toLowerCase().includes(searchFilter.toLowerCase()), ); selectedOption && onSubmit?.(() => persistField(selectedOption.value)); - } - }; + }, + hotkeyScope, + ); return ( @@ -76,7 +81,6 @@ export const SelectFieldInput = ({ setSearchFilter(event.currentTarget.value)} - onKeyDown={handleKeyDown} autoFocus /> diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx index 165dc3786eab..8220128b0951 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx @@ -11,6 +11,8 @@ import { RecordTableCell } from '@/object-record/record-table/record-table-cell/ import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope'; import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; +import { isFieldSelect } from '@/object-record/record-field/types/guards/isFieldSelect'; +import { SelectFieldHotkeyScope } from '@/object-record/select/types/SelectFieldHotkeyScope'; export const RecordTableCellFieldContextWrapper = () => { const { objectMetadataItem } = useContext(RecordTableContext); @@ -25,7 +27,9 @@ export const RecordTableCellFieldContextWrapper = () => { const customHotkeyScope = isFieldRelation(columnDefinition) ? RelationPickerHotkeyScope.RelationPicker - : TableHotkeyScope.CellEditMode; + : isFieldSelect(columnDefinition) + ? SelectFieldHotkeyScope.SelectField + : TableHotkeyScope.CellEditMode; return ( ->( - ( - { value, onChange, onKeyDown, autoFocus, placeholder = 'Search', type }, - ref, - ) => ( - - - - ), -); +>(({ value, onChange, autoFocus, placeholder = 'Search', type }, ref) => ( + + + +)); From 78451058e8a268c9565a56edb4ca95c00b43b411 Mon Sep 17 00:00:00 2001 From: Shashank Vishwakarma Date: Wed, 5 Jun 2024 18:08:22 +0530 Subject: [PATCH 3/6] fixed: CI --- .../meta-types/input/components/SelectFieldInput.tsx | 2 +- .../components/RecordTableCellFieldContextWrapper.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx index 732d2400bafd..77ef221e59a2 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx @@ -9,8 +9,8 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { MenuItemSelectTag } from '@/ui/navigation/menu-item/components/MenuItemSelectTag'; -import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; +import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; import { isDefined } from '~/utils/isDefined'; const StyledRelationPickerContainer = styled.div` diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx index 8220128b0951..ec30ebe03eba 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx @@ -3,6 +3,7 @@ import { useContext } from 'react'; import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation'; +import { isFieldSelect } from '@/object-record/record-field/types/guards/isFieldSelect'; import { RecordUpdateContext } from '@/object-record/record-table/contexts/EntityUpdateMutationHookContext'; import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext'; import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext'; @@ -10,9 +11,8 @@ import { RecordTableRowContext } from '@/object-record/record-table/contexts/Rec import { RecordTableCell } from '@/object-record/record-table/record-table-cell/components/RecordTableCell'; import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope'; import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope'; -import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; -import { isFieldSelect } from '@/object-record/record-field/types/guards/isFieldSelect'; import { SelectFieldHotkeyScope } from '@/object-record/select/types/SelectFieldHotkeyScope'; +import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; export const RecordTableCellFieldContextWrapper = () => { const { objectMetadataItem } = useContext(RecordTableContext); From 995f805c77ab99a7d0f9a140d08a62e9a2440e6b Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Tue, 11 Jun 2024 12:54:34 +0200 Subject: [PATCH 4/6] Fixed condition --- .../meta-types/input/components/SelectFieldInput.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx index 77ef221e59a2..0f745de75420 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx @@ -65,12 +65,13 @@ export const SelectFieldInput = ({ useScopedHotkeys( Key.Enter, () => { - const selectedOption = optionsInDropDown.find( - (option) => - option.value !== fieldValue && - option.label.toLowerCase().includes(searchFilter.toLowerCase()), + const selectedOption = optionsInDropDown.find((option) => + option.label.toLowerCase().includes(searchFilter.toLowerCase()), ); - selectedOption && onSubmit?.(() => persistField(selectedOption.value)); + + if (isDefined(selectedOption)) { + onSubmit?.(() => persistField(selectedOption.value)); + } }, hotkeyScope, ); From 328860defc870e6322ea0959baf46a75054b1f3e Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Tue, 11 Jun 2024 12:57:45 +0200 Subject: [PATCH 5/6] Fix --- .../meta-types/input/components/SelectFieldInput.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx index 0f745de75420..ac12ab5d83e1 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx @@ -65,8 +65,10 @@ export const SelectFieldInput = ({ useScopedHotkeys( Key.Enter, () => { - const selectedOption = optionsInDropDown.find((option) => - option.label.toLowerCase().includes(searchFilter.toLowerCase()), + const selectedOption = optionsInDropDown.find( + (option) => + option.value !== fieldValue && + option.label.toLowerCase().includes(searchFilter.toLowerCase()), ); if (isDefined(selectedOption)) { From e01add595ab5b2aee6a65d31ac50edb71bd385d4 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Tue, 11 Jun 2024 12:58:05 +0200 Subject: [PATCH 6/6] Fix --- .../meta-types/input/components/SelectFieldInput.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx index ac12ab5d83e1..0f745de75420 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx @@ -65,10 +65,8 @@ export const SelectFieldInput = ({ useScopedHotkeys( Key.Enter, () => { - const selectedOption = optionsInDropDown.find( - (option) => - option.value !== fieldValue && - option.label.toLowerCase().includes(searchFilter.toLowerCase()), + const selectedOption = optionsInDropDown.find((option) => + option.label.toLowerCase().includes(searchFilter.toLowerCase()), ); if (isDefined(selectedOption)) {