Fix the connection between labels and associated input for report form

Author: dtrucs

frontend/src/components/Report/CoordinatesRow.tsx

@@ -18,11 +18,11 @@ const InputRow: React.FC<Props> = props => {
         {props.coordinates.map(({ label, ...field }, index) => (
           <div key={index}>
             {label !== undefined && (
-              <label className="block font-bold mb-1" htmlFor={inputId}>
+              <label className="block font-bold mb-1" htmlFor={`${inputId}-${index}`}>
                 {label}
               </label>
             )}
-            <input className="input" id={inputId} {...field} readOnly />
+            <input className="input" id={`${inputId}-${index}`} {...field} readOnly />
           </div>
         ))}
       </div>

frontend/src/components/SelectRow/SelectRow.tsx

@@ -20,7 +20,7 @@ const SelectRow: React.FC<Props> = props => {
   return (
     <div className="w-full mb-5">
       {label !== undefined && (
-        <label className="block font-bold mb-1" htmlFor={inputId}>
+        <label className="block font-bold mb-1" htmlFor={field.inputId ?? inputId}>
           {label}
           {field.required === true && (
             <>
@@ -33,6 +33,7 @@ const SelectRow: React.FC<Props> = props => {
         </label>
       )}
       <SelectableDropdown
+        inputId={field.inputId ?? inputId}
         {...field}
         {...(hasError && {
           ['aria-invalid']: true,

frontend/src/components/pages/search/components/FilterBar/SelectableDropdown.tsx

@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 import { theme } from '../../../../../../tailwind.config';
 
 export interface SelectableDropdownProps {
+  inputId?: string;
   name: string;
   options: Option[];
   placeholder: string;