From 7e0f773559227d514d26931594f2610af73f51fe Mon Sep 17 00:00:00 2001
From: M-Farmaha <115003821+M-Farmaha@users.noreply.github.com>
Date: Fri, 9 Feb 2024 18:02:01 +0200
Subject: [PATCH] corrected Duplicate form field id in the same form error in
 inputs

---
 src/components/Filters/FilterByName.jsx             | 6 ++++--
 src/components/Filters/FilterSelect.jsx             | 6 ++++--
 src/components/Filters/ImageGalleryFilterBar.jsx    | 1 +
 src/components/Filters/MembersFilterBar.jsx         | 3 +++
 src/components/ImageGallery/ImageGallery-styled.jsx | 2 ++
 5 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/Filters/FilterByName.jsx b/src/components/Filters/FilterByName.jsx
index f36d8b7..7cb35be 100644
--- 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
index 48d74fc..0d0751b 100644
--- 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,6 +165,8 @@ export const FilterSelect = ({
         </IconWrap>
       </Label>
       <Select
+        inputId={id}
+        name={id}
         placeholder={placeholder}
         noOptionsMessage={() => "Немає збігів"}
         maxMenuHeight={300}
@@ -171,7 +174,6 @@ export const FilterSelect = ({
           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
index dfaff04..95697c7 100644
--- 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
index a395a10..e36799b 100644
--- 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
index 141cd20..41e22b8 100644
--- 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;
 `;