From c57c5b255419b5fcc61b4e28c494ec36f8b2dcf7 Mon Sep 17 00:00:00 2001
From: Weiko <corentin@twenty.com>
Date: Wed, 3 Jul 2024 15:13:41 +0200
Subject: [PATCH] Fix rating field not editable if null (#6110)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Context

Rating fields were not editable on the show page and kanban view when
they were null, this is because we don't have a way to leave the empty
state for fields that are editModeContentOnly.
~~This is actually an issue for bool fields (which is the other field
type that has editModeContentOnly) as well but they have default values
can't go be edited to NULL so it's not visible.~~
Actually let's fix bool, this could happen too

Hovering over "Empty" will now show the RatingField edit mode.
I'm not 100% sure about this solution though, we could also make this
behaviour on click? I preferred over since this is the behaviour on the
table view 🤔

## Test


https://github.com/twentyhq/twenty/assets/1834158/6825b5c3-2c62-41f2-8e03-343bc0e895e2
---
 .../components/RecordInlineCellDisplayMode.tsx            | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx
index 5c236d261..eacdf2dc4 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
 import { useIsFieldEmpty } from '@/object-record/record-field/hooks/useIsFieldEmpty';
+import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFieldInputOnly';
 import { RecordInlineCellContainerProps } from '@/object-record/record-inline-cell/components/RecordInlineCellContainer';
 import { RecordInlineCellButton } from '@/object-record/record-inline-cell/components/RecordInlineCellEditButton';
 
@@ -76,6 +77,10 @@ export const RecordInlineCellDisplayMode = ({
     !isDisplayModeContentEmpty &&
     !editModeContentOnly;
 
+  const isFieldInputOnly = useIsFieldInputOnly();
+
+  const shouldDisplayEditModeOnFocus = isFocused && isFieldInputOnly;
+
   return (
     <>
       <StyledRecordInlineCellNormalModeOuterContainer
@@ -84,7 +89,8 @@ export const RecordInlineCellDisplayMode = ({
         isHovered={isHovered}
       >
         <StyledRecordInlineCellNormalModeInnerContainer>
-          {isDisplayModeContentEmpty || !children ? (
+          {(isDisplayModeContentEmpty && !shouldDisplayEditModeOnFocus) ||
+          !children ? (
             <StyledEmptyField>{emptyPlaceholder}</StyledEmptyField>
           ) : (
             children