From 551c3b5e606a7bb910e15d3337e04422246604a4 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Thu, 13 Jul 2023 21:20:08 -0700 Subject: [PATCH] Persist table cell values on cell close (#655) * Persist table cell values on cell close * Apply to all cells --- .../components/CompanyEditableNameCell.tsx | 28 +++++--- .../components/EditableCompanyAddressCell.tsx | 22 ++++--- .../EditableCompanyDomainNameCell.tsx | 21 +++--- .../EditableCompanyEmployeesCell.tsx | 23 ++++--- .../components/EditablePeopleFullName.tsx | 11 +++- .../components/PeopleCompanyCreateCell.tsx | 2 +- .../components/EditablePeopleCityCell.tsx | 23 ++++--- .../components/EditablePeopleEmailCell.tsx | 23 ++++--- .../components/EditablePeopleFullNameCell.tsx | 33 +++++++--- .../components/EditablePeoplePhoneCell.tsx | 24 ++++--- .../components/editable-cell/EditableCell.tsx | 6 ++ .../editable-cell/EditableCellEditMode.tsx | 56 ++-------------- .../editable-cell/hooks/useEditableCell.ts | 2 - .../hooks/useRegisterCloseCellHandlers.ts | 66 +++++++++++++++++++ .../types/EditableCellDoubleText.tsx | 6 ++ .../types/EditableCellDoubleTextEditMode.tsx | 19 ++---- .../editable-cell/types/EditableCellPhone.tsx | 12 +++- .../editable-cell/types/EditableCellText.tsx | 6 ++ .../editable-cell/types/EditableChip.tsx | 6 ++ .../ui/tables/hooks/useLeaveTableFocus.ts | 4 ++ 20 files changed, 260 insertions(+), 133 deletions(-) create mode 100644 front/src/modules/ui/components/editable-cell/hooks/useRegisterCloseCellHandlers.ts diff --git a/front/src/modules/companies/components/CompanyEditableNameCell.tsx b/front/src/modules/companies/components/CompanyEditableNameCell.tsx index 3d759e79e..a51cc74c8 100644 --- a/front/src/modules/companies/components/CompanyEditableNameCell.tsx +++ b/front/src/modules/companies/components/CompanyEditableNameCell.tsx @@ -1,3 +1,5 @@ +import { useEffect, useState } from 'react'; + import { CellCommentChip } from '@/comments/components/table/CellCommentChip'; import { useOpenTimelineRightDrawer } from '@/comments/hooks/useOpenTimelineRightDrawer'; import { EditableCellChip } from '@/ui/components/editable-cell/types/EditableChip'; @@ -21,6 +23,8 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) { const openCommentRightDrawer = useOpenTimelineRightDrawer(); const [updateCompany] = useUpdateCompanyMutation(); + const [internalValue, setInternalValue] = useState(company.name ?? ''); + function handleCommentClick(event: React.MouseEvent) { event.preventDefault(); event.stopPropagation(); @@ -33,20 +37,17 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) { ]); } + useEffect(() => { + setInternalValue(company.name ?? ''); + }, [company.name]); + return ( { - updateCompany({ - variables: { - id: company.id, - name: value, - }, - }); - }} + changeHandler={setInternalValue} ChipComponent={CompanyChip} rightEndContents={[ , ]} + onSubmit={() => + updateCompany({ + variables: { + id: company.id, + name: internalValue, + }, + }) + } + onCancel={() => setInternalValue(company.name ?? '')} /> ); } diff --git a/front/src/modules/companies/table/components/EditableCompanyAddressCell.tsx b/front/src/modules/companies/table/components/EditableCompanyAddressCell.tsx index d3292a366..8d2d73dfd 100644 --- a/front/src/modules/companies/table/components/EditableCompanyAddressCell.tsx +++ b/front/src/modules/companies/table/components/EditableCompanyAddressCell.tsx @@ -1,3 +1,4 @@ +import { useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { companyAddressFamilyState } from '@/companies/states/companyAddressFamilyState'; @@ -14,19 +15,24 @@ export function EditableCompanyAddressCell() { companyAddressFamilyState(currentRowEntityId ?? ''), ); + const [internalValue, setInternalValue] = useState(address ?? ''); + useEffect(() => { + setInternalValue(address ?? ''); + }, [address]); + return ( { - if (!currentRowEntityId) return; - - await updateCompany({ + value={internalValue} + onChange={setInternalValue} + onSubmit={() => + updateCompany({ variables: { id: currentRowEntityId, - address: newAddress, + address: internalValue, }, - }); - }} + }) + } + onCancel={() => setInternalValue(address ?? '')} /> ); } diff --git a/front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx b/front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx index 81f6dffd4..fdbf249c9 100644 --- a/front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx +++ b/front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx @@ -1,3 +1,4 @@ +import { useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState'; @@ -13,20 +14,24 @@ export function EditableCompanyDomainNameCell() { const name = useRecoilValue( companyDomainNameFamilyState(currentRowEntityId ?? ''), ); + const [internalValue, setInternalValue] = useState(name ?? ''); + useEffect(() => { + setInternalValue(name ?? ''); + }, [name]); return ( { - if (!currentRowEntityId) return; - - await updateCompany({ + value={internalValue} + onChange={setInternalValue} + onSubmit={() => + updateCompany({ variables: { id: currentRowEntityId, - domainName: domainName, + domainName: internalValue, }, - }); - }} + }) + } + onCancel={() => setInternalValue(name ?? '')} /> ); } diff --git a/front/src/modules/companies/table/components/EditableCompanyEmployeesCell.tsx b/front/src/modules/companies/table/components/EditableCompanyEmployeesCell.tsx index 8643bb6be..2dbf2dab9 100644 --- a/front/src/modules/companies/table/components/EditableCompanyEmployeesCell.tsx +++ b/front/src/modules/companies/table/components/EditableCompanyEmployeesCell.tsx @@ -1,3 +1,4 @@ +import { useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { companyEmployeesFamilyState } from '@/companies/states/companyEmployeesFamilyState'; @@ -14,20 +15,26 @@ export function EditableCompanyEmployeesCell() { companyEmployeesFamilyState(currentRowEntityId ?? ''), ); + const [internalValue, setInternalValue] = useState(employees ?? ''); + + useEffect(() => { + setInternalValue(employees ?? ''); + }, [employees]); + return ( // TODO: Create an EditableCellNumber component { - if (!currentRowEntityId) return; - - await updateCompany({ + value={internalValue} + onChange={setInternalValue} + onSubmit={() => + updateCompany({ variables: { id: currentRowEntityId, - employees: parseInt(newEmployees), + employees: parseInt(internalValue), }, - }); - }} + }) + } + onCancel={() => setInternalValue(employees ?? '')} /> ); } diff --git a/front/src/modules/people/components/EditablePeopleFullName.tsx b/front/src/modules/people/components/EditablePeopleFullName.tsx index 1e8393b91..ca0dadef3 100644 --- a/front/src/modules/people/components/EditablePeopleFullName.tsx +++ b/front/src/modules/people/components/EditablePeopleFullName.tsx @@ -15,6 +15,8 @@ type OwnProps = { | null | undefined; onChange: (firstName: string, lastName: string) => void; + onSubmit?: () => void; + onCancel?: () => void; }; const NoEditModeContainer = styled.div` @@ -28,7 +30,12 @@ const RightContainer = styled.div` margin-left: ${(props) => props.theme.spacing(1)}; `; -export function EditablePeopleFullName({ person, onChange }: OwnProps) { +export function EditablePeopleFullName({ + person, + onChange, + onSubmit, + onCancel, +}: OwnProps) { const openCommentRightDrawer = useOpenTimelineRightDrawer(); function handleDoubleTextChange( @@ -61,6 +68,8 @@ export function EditablePeopleFullName({ person, onChange }: OwnProps) { firstValuePlaceholder="First name" secondValuePlaceholder="Last name" onChange={handleDoubleTextChange} + onSubmit={onSubmit} + onCancel={onCancel} nonEditModeContent={ handleCompanyCreate(companyName, companyDomainName)} - onExit={() => setIsCreating(false)} + onCancel={() => setIsCreating(false)} /> ); } diff --git a/front/src/modules/people/table/components/EditablePeopleCityCell.tsx b/front/src/modules/people/table/components/EditablePeopleCityCell.tsx index d34a6975f..dcf55fbc6 100644 --- a/front/src/modules/people/table/components/EditablePeopleCityCell.tsx +++ b/front/src/modules/people/table/components/EditablePeopleCityCell.tsx @@ -1,3 +1,4 @@ +import { useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { peopleCityFamilyState } from '@/people/states/peopleCityFamilyState'; @@ -12,19 +13,25 @@ export function EditablePeopleCityCell() { const city = useRecoilValue(peopleCityFamilyState(currentRowEntityId ?? '')); + const [internalValue, setInternalValue] = useState(city ?? ''); + + useEffect(() => { + setInternalValue(city ?? ''); + }, [city]); + return ( { - if (!currentRowEntityId) return; - - await updatePerson({ + value={internalValue} + onChange={setInternalValue} + onSubmit={() => + updatePerson({ variables: { id: currentRowEntityId, - city: newCity, + city: internalValue, }, - }); - }} + }) + } + onCancel={() => setInternalValue(city ?? '')} /> ); } diff --git a/front/src/modules/people/table/components/EditablePeopleEmailCell.tsx b/front/src/modules/people/table/components/EditablePeopleEmailCell.tsx index 2df9ef5ef..cc356b7d3 100644 --- a/front/src/modules/people/table/components/EditablePeopleEmailCell.tsx +++ b/front/src/modules/people/table/components/EditablePeopleEmailCell.tsx @@ -1,3 +1,4 @@ +import { useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { peopleEmailFamilyState } from '@/people/states/peopleEmailFamilyState'; @@ -14,19 +15,25 @@ export function EditablePeopleEmailCell() { peopleEmailFamilyState(currentRowEntityId ?? ''), ); + const [internalValue, setInternalValue] = useState(email ?? ''); + + useEffect(() => { + setInternalValue(email ?? ''); + }, [email]); + return ( { - if (!currentRowEntityId) return; - - await updatePerson({ + value={internalValue} + onChange={setInternalValue} + onSubmit={() => + updatePerson({ variables: { id: currentRowEntityId, - email: newEmail, + email: internalValue, }, - }); - }} + }) + } + onCancel={() => setInternalValue(email ?? '')} /> ); } diff --git a/front/src/modules/people/table/components/EditablePeopleFullNameCell.tsx b/front/src/modules/people/table/components/EditablePeopleFullNameCell.tsx index 9d3a9f8ec..93a84f19c 100644 --- a/front/src/modules/people/table/components/EditablePeopleFullNameCell.tsx +++ b/front/src/modules/people/table/components/EditablePeopleFullNameCell.tsx @@ -1,3 +1,4 @@ +import { useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName'; @@ -14,24 +15,38 @@ export function EditablePeopleFullNameCell() { peopleNameCellFamilyState(currentRowEntityId ?? ''), ); + const [internalFirstName, setInternalFirstName] = useState(firstName ?? ''); + const [internalLastName, setInternalLastName] = useState(lastName ?? ''); + + useEffect(() => { + setInternalFirstName(firstName ?? ''); + setInternalLastName(lastName ?? ''); + }, [firstName, lastName]); + return ( { - if (!currentRowEntityId) return; - - await updatePerson({ + onChange={(firstName, lastName) => { + setInternalFirstName(firstName); + setInternalLastName(lastName); + }} + onSubmit={() => + updatePerson({ variables: { id: currentRowEntityId, - firstName, - lastName, + firstName: internalFirstName, + lastName: internalLastName, }, - }); + }) + } + onCancel={() => { + setInternalFirstName(firstName ?? ''); + setInternalLastName(lastName ?? ''); }} /> ); diff --git a/front/src/modules/people/table/components/EditablePeoplePhoneCell.tsx b/front/src/modules/people/table/components/EditablePeoplePhoneCell.tsx index b620065ea..38c55b62f 100644 --- a/front/src/modules/people/table/components/EditablePeoplePhoneCell.tsx +++ b/front/src/modules/people/table/components/EditablePeoplePhoneCell.tsx @@ -1,3 +1,4 @@ +import { useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { peoplePhoneFamilyState } from '@/people/states/peoplePhoneFamilyState'; @@ -13,19 +14,26 @@ export function EditablePeoplePhoneCell() { const phone = useRecoilValue( peoplePhoneFamilyState(currentRowEntityId ?? ''), ); + + const [internalValue, setInternalValue] = useState(phone ?? ''); + + useEffect(() => { + setInternalValue(phone ?? ''); + }, [phone]); + return ( { - if (!currentRowEntityId) return; - - await updatePerson({ + value={internalValue} + onChange={setInternalValue} + onSubmit={() => + updatePerson({ variables: { id: currentRowEntityId, - phone: newPhone, + phone: internalValue, }, - }); - }} + }) + } + onCancel={() => setInternalValue(phone ?? '')} /> ); } diff --git a/front/src/modules/ui/components/editable-cell/EditableCell.tsx b/front/src/modules/ui/components/editable-cell/EditableCell.tsx index f6d8a1778..ef11341ef 100644 --- a/front/src/modules/ui/components/editable-cell/EditableCell.tsx +++ b/front/src/modules/ui/components/editable-cell/EditableCell.tsx @@ -26,6 +26,8 @@ type OwnProps = { editModeHorizontalAlign?: 'left' | 'right'; editModeVerticalPosition?: 'over' | 'below'; editHotkeysScope?: HotkeysScope; + onSubmit?: () => void; + onCancel?: () => void; }; export function EditableCell({ @@ -34,6 +36,8 @@ export function EditableCell({ editModeContent, nonEditModeContent, editHotkeysScope, + onSubmit, + onCancel, }: OwnProps) { const { isCurrentCellInEditMode } = useCurrentCellEditMode(); @@ -45,6 +49,8 @@ export function EditableCell({ {editModeContent} diff --git a/front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx b/front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx index f610b5ab4..3f0ad7d62 100644 --- a/front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx +++ b/front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx @@ -1,13 +1,9 @@ import { ReactElement, useRef } from 'react'; import styled from '@emotion/styled'; -import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys'; -import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope'; -import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef'; -import { useMoveSoftFocus } from '@/ui/tables/hooks/useMoveSoftFocus'; import { overlayBackground } from '@/ui/themes/effects'; -import { useEditableCell } from './hooks/useEditableCell'; +import { useRegisterCloseCellHandlers } from './hooks/useRegisterCloseCellHandlers'; export const EditableCellEditModeContainer = styled.div` align-items: center; @@ -33,60 +29,20 @@ type OwnProps = { editModeHorizontalAlign?: 'left' | 'right'; editModeVerticalPosition?: 'over' | 'below'; onOutsideClick?: () => void; + onCancel?: () => void; + onSubmit?: () => void; }; export function EditableCellEditMode({ editModeHorizontalAlign, editModeVerticalPosition, children, + onCancel, + onSubmit, }: OwnProps) { const wrapperRef = useRef(null); - const { closeEditableCell } = useEditableCell(); - const { moveRight, moveLeft, moveDown } = useMoveSoftFocus(); - - useListenClickOutsideArrayOfRef([wrapperRef], () => { - closeEditableCell(); - }); - - useScopedHotkeys( - 'enter', - () => { - closeEditableCell(); - moveDown(); - }, - InternalHotkeysScope.CellEditMode, - [closeEditableCell], - ); - - useScopedHotkeys( - 'esc', - () => { - closeEditableCell(); - }, - InternalHotkeysScope.CellEditMode, - [closeEditableCell], - ); - - useScopedHotkeys( - 'tab', - () => { - closeEditableCell(); - moveRight(); - }, - InternalHotkeysScope.CellEditMode, - [closeEditableCell, moveRight], - ); - - useScopedHotkeys( - 'shift+tab', - () => { - closeEditableCell(); - moveLeft(); - }, - InternalHotkeysScope.CellEditMode, - [closeEditableCell, moveRight], - ); + useRegisterCloseCellHandlers(wrapperRef, onSubmit, onCancel); return ( , + onSubmit?: () => void, + onCancel?: () => void, +) { + const { closeEditableCell } = useEditableCell(); + const { isCurrentCellInEditMode } = useCurrentCellEditMode(); + useListenClickOutsideArrayOfRef([wrapperRef], () => { + if (isCurrentCellInEditMode) { + onSubmit?.(); + closeEditableCell(); + } + }); + const { moveRight, moveLeft, moveDown } = useMoveSoftFocus(); + + useScopedHotkeys( + 'enter', + () => { + onSubmit?.(); + closeEditableCell(); + moveDown(); + }, + InternalHotkeysScope.CellEditMode, + [closeEditableCell, onSubmit, moveDown], + ); + + useScopedHotkeys( + 'esc', + () => { + closeEditableCell(); + onCancel?.(); + }, + InternalHotkeysScope.CellEditMode, + [closeEditableCell, onCancel], + ); + + useScopedHotkeys( + 'tab', + () => { + onSubmit?.(); + closeEditableCell(); + moveRight(); + }, + InternalHotkeysScope.CellEditMode, + [closeEditableCell, onSubmit, moveRight], + ); + + useScopedHotkeys( + 'shift+tab', + () => { + onSubmit?.(); + closeEditableCell(); + moveLeft(); + }, + InternalHotkeysScope.CellEditMode, + [closeEditableCell, onSubmit, moveRight], + ); +} diff --git a/front/src/modules/ui/components/editable-cell/types/EditableCellDoubleText.tsx b/front/src/modules/ui/components/editable-cell/types/EditableCellDoubleText.tsx index ac85dabe8..665bf75a7 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableCellDoubleText.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableCellDoubleText.tsx @@ -14,6 +14,8 @@ type OwnProps = { secondValuePlaceholder: string; nonEditModeContent: ReactElement; onChange: (firstValue: string, secondValue: string) => void; + onSubmit?: () => void; + onCancel?: () => void; loading?: boolean; }; @@ -23,6 +25,8 @@ export function EditableCellDoubleText({ firstValuePlaceholder, secondValuePlaceholder, onChange, + onSubmit, + onCancel, nonEditModeContent, loading, }: OwnProps) { @@ -50,6 +54,8 @@ export function EditableCellDoubleText({ firstValuePlaceholder={firstValuePlaceholder} secondValuePlaceholder={secondValuePlaceholder} onChange={handleOnChange} + onSubmit={onSubmit} + onCancel={onCancel} /> } nonEditModeContent={loading ? : nonEditModeContent} diff --git a/front/src/modules/ui/components/editable-cell/types/EditableCellDoubleTextEditMode.tsx b/front/src/modules/ui/components/editable-cell/types/EditableCellDoubleTextEditMode.tsx index e5103a649..cb24b9784 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableCellDoubleTextEditMode.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableCellDoubleTextEditMode.tsx @@ -15,8 +15,8 @@ type OwnProps = { firstValuePlaceholder: string; secondValuePlaceholder: string; onChange: (firstValue: string, secondValue: string) => void; - onSubmit?: (firstValue: string, secondValue: string) => void; - onExit?: () => void; + onSubmit?: () => void; + onCancel?: () => void; }; const StyledContainer = styled.div` @@ -37,7 +37,7 @@ export function EditableCellDoubleTextEditMode({ secondValuePlaceholder, onChange, onSubmit, - onExit, + onCancel, }: OwnProps) { const [focusPosition, setFocusPosition] = useState<'left' | 'right'>('left'); @@ -57,9 +57,7 @@ export function EditableCellDoubleTextEditMode({ () => { closeCell(); moveDown(); - if (onSubmit) { - onSubmit(firstValue, secondValue); - } + onSubmit?.(); }, InternalHotkeysScope.CellDoubleTextInput, [closeCell], @@ -68,9 +66,7 @@ export function EditableCellDoubleTextEditMode({ useScopedHotkeys( Key.Escape, () => { - if (onExit) { - onExit(); - } + onCancel?.(); closeCell(); }, InternalHotkeysScope.CellDoubleTextInput, @@ -84,9 +80,7 @@ export function EditableCellDoubleTextEditMode({ setFocusPosition('right'); secondValueInputRef.current?.focus(); } else { - if (onExit) { - onExit(); - } + onSubmit?.(); closeCell(); moveRight(); } @@ -102,6 +96,7 @@ export function EditableCellDoubleTextEditMode({ setFocusPosition('left'); firstValueInputRef.current?.focus(); } else { + onSubmit?.(); closeCell(); moveLeft(); } diff --git a/front/src/modules/ui/components/editable-cell/types/EditableCellPhone.tsx b/front/src/modules/ui/components/editable-cell/types/EditableCellPhone.tsx index a2971d9e8..cb9f10c6d 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableCellPhone.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableCellPhone.tsx @@ -9,9 +9,17 @@ type OwnProps = { placeholder?: string; value: string; onChange: (updated: string) => void; + onSubmit?: () => void; + onCancel?: () => void; }; -export function EditableCellPhone({ value, placeholder, onChange }: OwnProps) { +export function EditableCellPhone({ + value, + placeholder, + onChange, + onSubmit, + onCancel, +}: OwnProps) { const inputRef = useRef(null); const [inputValue, setInputValue] = useState(value); @@ -34,6 +42,8 @@ export function EditableCellPhone({ value, placeholder, onChange }: OwnProps) { /> } nonEditModeContent={} + onSubmit={onSubmit} + onCancel={onCancel} /> ); } diff --git a/front/src/modules/ui/components/editable-cell/types/EditableCellText.tsx b/front/src/modules/ui/components/editable-cell/types/EditableCellText.tsx index 74e2c2933..e154e00b0 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableCellText.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableCellText.tsx @@ -12,6 +12,8 @@ type OwnProps = { onChange: (newValue: string) => void; editModeHorizontalAlign?: 'left' | 'right'; loading?: boolean; + onSubmit?: () => void; + onCancel?: () => void; }; export function EditableCellText({ @@ -20,6 +22,8 @@ export function EditableCellText({ onChange, editModeHorizontalAlign, loading, + onCancel, + onSubmit, }: OwnProps) { const [internalValue, setInternalValue] = useState(value); @@ -41,6 +45,8 @@ export function EditableCellText({ }} /> } + onSubmit={onSubmit} + onCancel={onCancel} nonEditModeContent={ loading ? ( diff --git a/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx b/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx index c63a9fd0a..81b33af16 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx @@ -28,6 +28,8 @@ export type EditableChipProps = { commentThreadCount?: number; onCommentClick?: (event: React.MouseEvent) => void; rightEndContents?: ReactNode[]; + onSubmit?: () => void; + onCancel?: () => void; }; // TODO: refactor @@ -58,6 +60,8 @@ export function EditableCellChip({ editModeHorizontalAlign, ChipComponent, rightEndContents, + onSubmit, + onCancel, }: EditableChipProps) { const inputRef = useRef(null); const [inputValue, setInputValue] = useState(value); @@ -87,6 +91,8 @@ export function EditableCellChip({ }} /> } + onSubmit={onSubmit} + onCancel={onCancel} nonEditModeContent={ diff --git a/front/src/modules/ui/tables/hooks/useLeaveTableFocus.ts b/front/src/modules/ui/tables/hooks/useLeaveTableFocus.ts index fcb3bf65b..55f7a9716 100644 --- a/front/src/modules/ui/tables/hooks/useLeaveTableFocus.ts +++ b/front/src/modules/ui/tables/hooks/useLeaveTableFocus.ts @@ -31,6 +31,10 @@ export function useLeaveTableFocus() { .getLoadable(currentHotkeysScopeState) .valueOrThrow(); + if (isSomeInputInEditMode) { + return; + } + if (!isSoftFocusActive && !isSomeInputInEditMode) { return; }