corrected Duplicate form field id in the same form error in inputs

M-Farmaha · Feb 9, 2024 · 7e0f773 · 7e0f773
1 parent 7bb367e
commit 7e0f773
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 4 deletions.
diff --git a/src/components/Filters/FilterByName.jsx b/src/components/Filters/FilterByName.jsx
@@ -3,7 +3,7 @@ import { Group, IconSvg, IconWrap, Input, Label } from "./Filters-styled";
 
 import sprite from "../../sprite.svg";
 
-export const FilterByName = ({ inputValue, setInputsValue }) => {
+export const FilterByName = ({ id, inputValue, setInputsValue }) => {
   const [isFilterFocused, setIsFilterFocused] = useState(false);
 
   const onInputChange = (e) => {
@@ -15,7 +15,7 @@ export const FilterByName = ({ inputValue, setInputsValue }) => {
 
   return (
     <Group>
-      <Label isFilterFocused={isFilterFocused}>
+      <Label htmlFor={id} isFilterFocused={isFilterFocused}>
         Знайти учасника за іменем
         <IconWrap>
           <IconSvg>
@@ -25,6 +25,8 @@ export const FilterByName = ({ inputValue, setInputsValue }) => {
       </Label>
 
       <Input
+        id={id}
+        name={id}
         autoComplete="off"
         type="text"
         value={inputValue}

diff --git a/src/components/Filters/FilterSelect.jsx b/src/components/Filters/FilterSelect.jsx
@@ -5,6 +5,7 @@ import { Group, IconSvg, IconWrap, Label } from "./Filters-styled";
 import sprite from "../../sprite.svg";
 
 export const FilterSelect = ({
+  id,
   inputValue,
   setInputsValue,
   typeOptions,
@@ -155,7 +156,7 @@ export const FilterSelect = ({
 
   return (
     <Group>
-      <Label isFilterFocused={isFilterFocused}>
+      <Label htmlFor={id} isFilterFocused={isFilterFocused}>
         {label}
         <IconWrap>
           <IconSvg>
@@ -164,14 +165,15 @@ export const FilterSelect = ({
         </IconWrap>
       </Label>
       <Select
+        inputId={id}
+        name={id}
         placeholder={placeholder}
         noOptionsMessage={() => "Немає збігів"}
         maxMenuHeight={300}
         components={{
           IndicatorSeparator: () => null,
         }}
         styles={selectStyles}
-        inputId="type"
         value={inputValue}
         isSearchable={false}
         onMenuOpen={() => setIsFilterFocused(true)}

diff --git a/src/components/Filters/ImageGalleryFilterBar.jsx b/src/components/Filters/ImageGalleryFilterBar.jsx
@@ -28,6 +28,7 @@ export const ImageGalleryFilterBar = ({
     <Section>
       <Form onSubmit={(e) => e.preventDefault()}>
         <FilterSelect
+          id={"FilterByDate"}
           inputsValue={inputsValue}
           setInputsValue={setInputsValue}
           typeOptions={typeOptions}

diff --git a/src/components/Filters/MembersFilterBar.jsx b/src/components/Filters/MembersFilterBar.jsx
@@ -90,11 +90,13 @@ export const MembersFilterBar = ({ membersArray, setVisibleMembersArray }) => {
     <Section>
       <Form onSubmit={(e) => e.preventDefault()}>
         <FilterByName
+          id={"filterByName"}
           inputsValue={inputsValue}
           setInputsValue={setInputsValue}
         />
 
         <FilterSelect
+          id={"filterByType"}
           inputsValue={inputsValue}
           setInputsValue={setInputsValue}
           typeOptions={optionsByType}
@@ -104,6 +106,7 @@ export const MembersFilterBar = ({ membersArray, setVisibleMembersArray }) => {
         />
 
         <FilterSelect
+          id={"filterByBirthday"}
           inputsValue={inputsValue}
           setInputsValue={setInputsValue}
           typeOptions={optionsByBirthday}

diff --git a/src/components/ImageGallery/ImageGallery-styled.jsx b/src/components/ImageGallery/ImageGallery-styled.jsx
@@ -99,6 +99,7 @@ export const ImageCount = styled.p`
   background-color: transparent;
 
   font-size: 20px;
+  z-index: 1;
 `;
 
 export const ImageDate = styled.p`
@@ -117,4 +118,5 @@ export const ImageDate = styled.p`
   background-color: transparent;
 
   font-size: 18px;
+  z-index: 1;
 `;