Fixed reset rating field to "no value" on star re-click

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRatingInput.tsx

@@ -7,7 +7,9 @@ import { FieldRatingValue } from '@/object-record/record-field/types/FieldMetada
 import { RatingInput } from '@/ui/field/input/components/RatingInput';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 
-const convertFieldRatingValueToNumber = (rating: FieldRatingValue): string => {
+const convertFieldRatingValueToNumber = (
+  rating: Exclude<FieldRatingValue, null>,
+): string => {
   return rating.split('_')[1];
 };
 
@@ -51,6 +53,10 @@ export const ObjectFilterDropdownRatingInput = () => {
         <RatingInput
           value={selectedFilter?.value as FieldRatingValue}
           onChange={(newValue: FieldRatingValue) => {
+            if (!newValue) {
+              return;
+            }
+
             selectFilter?.({
               id: selectedFilter?.id ? selectedFilter.id : v4(),
               fieldMetadataId: filterDefinitionUsedInDropdown.fieldMetadataId,

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRatingField.ts

@@ -16,14 +16,14 @@ export const useRatingField = () => {
 
   const fieldName = fieldDefinition.metadata.fieldName;
 
-  const [fieldValue, setFieldValue] = useRecoilState<FieldRatingValue | null>(
+  const [fieldValue, setFieldValue] = useRecoilState<FieldRatingValue>(
     recordStoreFamilySelector({
       recordId: entityId,
       fieldName: fieldName,
     }),
   );
 
-  const rating = fieldValue ?? 'RATING_1';
+  const rating = fieldValue ?? null;
 
   return {
     fieldDefinition,

packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts

@@ -185,7 +185,7 @@ export type FieldAddressValue = {
   addressLat: number | null;
   addressLng: number | null;
 };
-export type FieldRatingValue = (typeof RATING_VALUES)[number];
+export type FieldRatingValue = (typeof RATING_VALUES)[number] | null;
 export type FieldSelectValue = string | null;
 export type FieldMultiSelectValue = string[] | null;
 

packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx

@@ -1,7 +1,8 @@
-import { useContext, useState } from 'react';
 import { styled } from '@linaria/react';
+import { useContext, useState } from 'react';
 import { IconTwentyStarFilled, THEME_COMMON, ThemeContext } from 'twenty-ui';
 
+import { useClearField } from '@/object-record/record-field/hooks/useClearField';
 import { RATING_VALUES } from '@/object-record/record-field/meta-types/constants/RatingValues';
 import { FieldRatingValue } from '@/object-record/record-field/types/FieldMetadata';
 
@@ -31,24 +32,37 @@ export const RatingInput = ({
   readonly,
 }: RatingInputProps) => {
   const { theme } = useContext(ThemeContext);
+  const clearField = useClearField();
 
   const activeColor = theme.font.color.secondary;
   const inactiveColor = theme.background.quaternary;
 
-  const [hoveredValue, setHoveredValue] = useState<FieldRatingValue | null>(
-    null,
-  );
+  const [hoveredValue, setHoveredValue] = useState<FieldRatingValue>(null);
+
   const currentValue = hoveredValue ?? value;
 
-  const selectedIndex = RATING_VALUES.indexOf(currentValue);
+  const selectedIndex =
+    currentValue !== null ? RATING_VALUES.indexOf(currentValue) : -1;
+
+  const canClick = !readonly;
+
+  const handleClick = (newValue: FieldRatingValue) => {
+    if (!canClick) return;
+    if (newValue === value) {
+      setHoveredValue(null);
+      clearField();
+    } else {
+      onChange?.(newValue);
+    }
+  };
 
   return (
     <StyledContainer
       role="slider"
       aria-label="Rating"
       aria-valuemax={RATING_VALUES.length}
       aria-valuemin={1}
-      aria-valuenow={RATING_VALUES.indexOf(currentValue) + 1}
+      aria-valuenow={selectedIndex + 1}
       tabIndex={0}
     >
       {RATING_VALUES.map((value, index) => {
@@ -58,7 +72,7 @@ export const RatingInput = ({
           <StyledRatingIconContainer
             key={index}
             color={isActive ? activeColor : inactiveColor}
-            onClick={readonly ? undefined : () => onChange?.(value)}
+            onClick={() => handleClick(value)}
             onMouseEnter={readonly ? undefined : () => setHoveredValue(value)}
             onMouseLeave={readonly ? undefined : () => setHoveredValue(null)}
           >