Reset Rating field to "No Value" on Star Re-click

[Bonapara]

Current Behavior

Once a rating field value is set, it's impossible to return the field to its "no value" state.

https://github.com/twentyhq/twenty/assets/19412894/cd7e3391-78bd-4797-a584-7c28707beb62

Desired Behavior

Clicking again on the selected star should reset the field to its original "no value" state.

For instance, if the field is set to 3, clicking again on the third star should reset the field to "no value."

[greptile-apps[bot]]

To reset the Rating field to 'No Value' on star re-click, follow these steps:

1. Modify RatingInput Component: Update the onClick handler to reset the value if the clicked star is already selected.

   const handleClick = (index: number) => {
    if (readonly) return;
    const newValue = index === selectedIndex ? null : RATING_VALUES[index];
    onChange?.(newValue);
   };
   
   return (
    <StyledContainer
      role="slider"
      aria-label="Rating"
      aria-valuemax={RATING_VALUES.length}
      aria-valuemin={1}
      aria-valuenow={selectedIndex + 1}
      tabIndex={0}
    >
      {RATING_VALUES.map((value, index) => {
        const isActive = index <= selectedIndex;
        return (
          <StyledRatingIconContainer
            key={index}
            color={isActive ? activeColor : inactiveColor}
            onClick={() => handleClick(index)}
            onMouseEnter={readonly ? undefined : () => setHoveredValue(value)}
            onMouseLeave={readonly ? undefined : () => setHoveredValue(null)}
          >
            <IconTwentyStarFilled size={iconSizeMd} />
          </StyledRatingIconContainer>
        );
      })}
    </StyledContainer>
   );

2. Update useRatingField Hook: Ensure it supports setting the field to a 'no value' state (e.g., null).

   const [fieldValue, setFieldValue] = useRecoilState<FieldRatingValue | null>(
    recordStoreFamilySelector({
      recordId: entityId,
      fieldName: fieldName,
    }),
   );
   const rating = fieldValue ?? null;

3. Update RatingFieldInput Component: Ensure it handles null values correctly.

   const handleChange = (newRating: FieldRatingValue | null) => {
    onSubmit?.(() => persistField(newRating));
   };

References

/packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx /packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RatingFieldInput.tsx /packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRatingField.ts /packages/twenty-front/src/modules/object-record/record-field/meta-types/constants/RatingValues.ts

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/twentyhq/twenty/main) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

[saloni0419]

@Bonapara can i work on this issue

[Bonapara]

Sure @saloni0419, thanks for contributing!

[devansh-m12]

is it still open i would like to work on this issue ?

[saloni0419]

@devansh-m12 i am currently working , I will let you know if I am able to solve then

[Ashmash100]

Hi @Bonapara,

I have worked out a solution for this issue. I noticed that @saloni0419 is currently working on it. If the issue does not get closed, I am ready to create a PR with my solution.

[Ashmash100]

Hi @Bonapara,

I have worked out a solution for this issue. I noticed that @saloni0419 is currently working on it. If the issue does not get closed, I am ready to create a PR with my solution.

@Bonapara shall I create a PR?

[Bonapara]

Hi @Ashmash100, yes you can create a PR as it's been 3 days, we will merge the first one! Thanks