feat: Select cancel vote

src/pages/Questions/DropDown/settingDropDown.tsx

@@ -58,7 +58,7 @@ export default function SettingDropDown({ question }: SettingDropDownProps) {
                         maxWidth: isFigmaTablte ? "297px" : "360px",
                     }}
                 >
-                    <Typography
+                    {/* <Typography
                         sx={{
                             height: isMobile ? "18px" : "auto",
                             fontWeight: "500",
@@ -79,7 +79,7 @@ export default function SettingDropDown({ question }: SettingDropDownProps) {
                                 question.content.multi = target.checked;
                             })
                         }
-                    />
+                    /> */}
                     <Box
                         sx={{
                             display: isMobile ? "none" : "block",

src/pages/Questions/Select.tsx

@@ -3,6 +3,7 @@ import {
   Select as MuiSelect,
   MenuItem,
   FormControl,
+  Typography,
   useTheme,
 } from "@mui/material";
 
@@ -16,6 +17,7 @@ type SelectProps = {
   empty?: boolean;
   onChange?: (item: string, num: number) => void;
   sx?: SxProps;
+  placeholder?: string;
 };
 
 export const Select = ({
@@ -24,6 +26,7 @@ export const Select = ({
   empty,
   onChange,
   sx,
+  placeholder = "",
 }: SelectProps) => {
   const [activeItem, setActiveItem] = useState<number>(
     empty ? -1 : activeItemIndex
@@ -35,9 +38,17 @@ export const Select = ({
   }, [activeItemIndex]);
 
   const handleChange = (event: SelectChangeEvent) => {
-    const activeItemIndex = Number(event.target.value);
-    setActiveItem(activeItemIndex);
-    onChange?.(items[activeItemIndex], activeItemIndex);
+    const newItemIndex = Number(event.target.value);
+
+    if (newItemIndex === activeItem) {
+      setActiveItem(-1);
+      onChange?.("", -1);
+
+      return;
+    }
+
+    setActiveItem(newItemIndex);
+    onChange?.(items[newItemIndex], newItemIndex);
   };
 
   return (
@@ -47,10 +58,19 @@ export const Select = ({
       sx={{ width: "100%", height: "48px", ...sx }}
     >
       <MuiSelect
+        displayEmpty
+        renderValue={(value) =>
+          value ? (
+            items[Number(value)]
+          ) : (
+            <Typography sx={{ color: theme.palette.grey2.main }}>
+              {placeholder}
+            </Typography>
+          )
+        }
         id="display-select"
         variant="outlined"
         value={activeItem === -1 ? "" : String(activeItem)}
-        displayEmpty
         onChange={handleChange}
         sx={{
           width: "100%",

src/pages/ViewPublicationPage/questions/Number.tsx

@@ -3,6 +3,7 @@ import { Box, Typography, Slider, useTheme } from "@mui/material";
 import { useDebouncedCallback } from "use-debounce";
 
 import CustomTextField from "@ui_kit/CustomTextField";
+import { CustomSlider } from "@ui_kit/CustomSlider";
 
 import { useQuizViewStore, updateAnswer } from "@root/quizView";
 
@@ -74,10 +75,9 @@ export const Number = ({ currentQuestion }: NumberProps) => {
           flexDirection: "column",
           width: "100%",
           marginTop: "20px",
-          gap: "30px"
+          gap: "30px",
         }}
       >
-
         <CustomSlider
           value={
             currentQuestion.content.chooseRange
@@ -152,9 +152,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
                 "& .MuiInputBase-input": { textAlign: "center" },
               }}
             />
-              <Typography>
-                  до
-              </Typography>
+            <Typography>до</Typography>
             <CustomTextField
               placeholder="0"
               value={maxRange}

src/pages/ViewPublicationPage/questions/Select.tsx

@@ -2,7 +2,7 @@ import { Box, Typography } from "@mui/material";
 
 import { Select as SelectComponent } from "../../../pages/Questions/Select";
 
-import { useQuizViewStore, updateAnswer } from "@root/quizView";
+import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView";
 
 import type { QuizQuestionSelect } from "../../../model/questionTypes/select";
 
@@ -29,9 +29,16 @@ export const Select = ({ currentQuestion }: SelectProps) => {
         }}
       >
         <SelectComponent
+          placeholder={currentQuestion.content.default}
           activeItemIndex={answer ? Number(answer) : -1}
           items={currentQuestion.content.variants.map(({ answer }) => answer)}
           onChange={(_, value) => {
+            if (value < 0) {
+              deleteAnswer(currentQuestion.content.id);
+
+              return;
+            }
+
             updateAnswer(currentQuestion.content.id, String(value));
           }}
         />