To implement the ability to reset the selected field value to empty:

1. Modify SelectFieldDisplay Component:

   • File: frontend/components/SelectFieldDisplay.js
   • Add a click event handler to set the field value to null.

   const handleClearSelection = () => {
     setFieldValue(null);
   };
   
   return (
     <div onClick={handleClearSelection}>
       {/* existing code */}
     </div>
   );

2. Update useSelectField Hook:

   • File: frontend/hooks/useSelectField.js
   • Ensure the hook correctly updates the state to reflect the empty value.

   const useSelectField = () => {
     const [value, setValue] = useState(null);
     
     const clearValue = () => setValue(null);
     
     return { value, setValue, clearValue };
   };

3. Update useClearField Hook:

   • File: frontend/hooks/useClearField.js
   • Ensure the hook correctly updates the state to reflect the empty value.

   const useClearField = (field) => {
     field.setValue(null);
   };

References

Hello, I'll like to work on this can you please assign to me

Sure @DubemObi, thanks for contributing!

Closing this issue in favour of #6064 as discussed with @FelixMalfait and @Bonapara