селект+штпут

src/pages/PersonalizationAI/AgeInputWithSelect.tsx

@@ -0,0 +1,133 @@
+import React, { useState, useRef } from 'react';
+import {
+  Box,
+  InputBase,
+  IconButton,
+  Menu,
+  MenuItem,
+  Paper,
+  Popper,
+  Grow,
+  ClickAwayListener,
+  MenuList,
+  useTheme
+} from '@mui/material';
+import ArrowDownIcon from "@/assets/icons/ArrowDownIcon";
+
+interface AgeInputWithSelectProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+const AgeInputWithSelect = ({ value, onChange }: AgeInputWithSelectProps) => {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef<HTMLDivElement>(null);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value);
+  };
+
+  const handleSelectItemClick = (selectedValue: string) => {
+    onChange(selectedValue);
+    setOpen(false);
+  };
+
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+
+  const handleClose = (event: Event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
+      return;
+    }
+    setOpen(false);
+  };
+
+  return (
+    <Box 
+      ref={anchorRef}
+      sx={{ 
+        position: 'relative',
+        mt: "17px",
+        height: "48px",
+        maxWidth: "420px",
+        width: "100%",
+        borderRadius: "8px",
+        border: "1px solid #9A9AAF",
+        '&:hover': {
+          borderColor: '#B0B0B0',
+        },
+        '&:focus-within': {
+          borderColor: '#7E2AEA',
+        }
+      }}
+    >
+      <InputBase
+        value={value}
+        onChange={handleInputChange}
+        fullWidth
+        placeholder="Введите возраст"
+        sx={{ 
+          height: "100%",
+          padding: "10px 20px",
+          '& input': {
+            height: "100%",
+            width: "100%",
+          }
+        }}
+      />
+      <IconButton
+        onClick={handleToggle}
+        sx={{ 
+          position: 'absolute',
+          right: 0,
+          top: '50%',
+          transform: `translateY(-50%) rotate(${open ? 180 : 0}deg)`,
+          cursor: 'pointer',
+          color: theme.palette.brightPurple.main,
+          display: 'flex',
+          alignItems: 'center',
+          transition: 'transform 0.2s',
+          padding: '8px'
+        }}
+      >
+        <ArrowDownIcon style={{ width: "18px", height: "18px" }} />
+      </IconButton>
+
+      <Popper
+        open={open}
+        anchorEl={anchorRef.current}
+        role={undefined}
+        placement="bottom-end"
+        transition
+        disablePortal
+        sx={{ zIndex: 1300 }}
+      >
+        {({ TransitionProps, placement }) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
+            }}
+          >
+            <Paper elevation={8}>
+              <ClickAwayListener onClickAway={handleClose}>
+                <MenuList autoFocusItem={open} id="menu-list-grow">
+                  <MenuItem onClick={() => handleSelectItemClick('')}>Выберите возраст</MenuItem>
+                  <MenuItem onClick={() => handleSelectItemClick('18-24')}>18-24</MenuItem>
+                  <MenuItem onClick={() => handleSelectItemClick('25-34')}>25-34</MenuItem>
+                  <MenuItem onClick={() => handleSelectItemClick('35-44')}>35-44</MenuItem>
+                  <MenuItem onClick={() => handleSelectItemClick('45-54')}>45-54</MenuItem>
+                  <MenuItem onClick={() => handleSelectItemClick('55+')}>55+</MenuItem>
+                </MenuList>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </Box>
+  );
+};
+
+export default AgeInputWithSelect; 

src/pages/PersonalizationAI/GenderAndAgeSelector.tsx

@@ -1,10 +1,12 @@
-import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Select, MenuItem, useTheme, Button, useMediaQuery } from "@mui/material";
+import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Select, MenuItem, useTheme, Button, useMediaQuery, IconButton } from "@mui/material";
 import { InfoPopover } from '@ui_kit/InfoPopover';
 import CheckboxIcon from "@icons/Checkbox";
 import { useState } from "react";
 import { useCurrentQuiz } from "@/stores/quizes/hooks";
 import { auditoryAdd } from "@/api/auditory";
 import { useSnackbar } from "notistack";
+import ArrowDownIcon from "@/assets/icons/ArrowDownIcon";
+import AgeInputWithSelect from "./AgeInputWithSelect";
 
 interface GenderAndAgeSelectorProps {
   handleAdd: (item: any) => void;
@@ -14,6 +16,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
   const theme = useTheme();
   const [age, setAge] = useState<string>('');
   const [gender, setGender] = useState<string>('');
+  const [selectOpen, setSelectOpen] = useState<boolean>(false);
   const quiz = useCurrentQuiz();
   const { enqueueSnackbar } = useSnackbar();
   const isMobile = useMediaQuery(theme.breakpoints.down(800));
@@ -60,7 +63,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
 
   return (
     <Box sx={{ display: 'flex', gap: 4, alignItems: "end", flexWrap: "wrap" }}>
-      <Box sx={{display: "inline-flex", flexWrap: isMobile ? "wrap" : "initial"}}>
+      <Box sx={{ display: "inline-flex", flexWrap: isMobile ? "wrap" : "initial" }}>
 
         <FormControl component="fieldset" variant="standard">
           <Box sx={{ display: 'flex', alignItems: "end", gap: '4px' }}>
@@ -169,46 +172,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
             }}>Возраст</FormLabel>
             <InfoPopover />
           </Box>
-          <Select
-            value={age}
-            onChange={(e) => setAge(e.target.value)}
-            displayEmpty
-            inputProps={{ 'aria-label': 'age', disableUnderline: true }}
-            disableUnderline
-            sx={{
-              height: "48px",
-              maxWidth: "420px",
-              width: "100%",
-              borderRadius: "8px",
-              border: "1px solid #9A9AAF",
-              '& .MuiSelect-filled': {
-                height: "100%",
-                width: "100%",
-              },
-              '& .MuiSelect-select': {
-                height: "100%",
-                width: "100%",
-                p: "10px 20px"
-              },
-              '& .MuiOutlinedInput-notchedOutline': {
-                borderColor: '#E0E0E0',
-              },
-              '&:hover .MuiOutlinedInput-notchedOutline': {
-                borderColor: '#B0B0B0',
-              },
-              '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                borderColor: '#7E2AEA',
-              },
-              mt: "17px",
-            }}
-          >
-            <MenuItem value="">Выберите возраст</MenuItem>
-            <MenuItem value="18-24">18-24</MenuItem>
-            <MenuItem value="25-34">25-34</MenuItem>
-            <MenuItem value="35-44">35-44</MenuItem>
-            <MenuItem value="45-54">45-54</MenuItem>
-            <MenuItem value="55+">55+</MenuItem>
-          </Select>
+          <AgeInputWithSelect value={age} onChange={setAge} />
         </FormControl>
       </Box>
 
@@ -229,6 +193,6 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
       >
         Ок
       </Button>
-    </Box>
+    </Box >
   );
 }