Improve props destructuring and fix invalid value selected when chang…

…ing field

web/html/src/components/table/SelectSearchField.tsx

@@ -4,22 +4,27 @@ import { Select } from "components/input";
 
 const ALL_OPTION = { value: "ALL", label: t("All") };
 
-export const SelectSearchField = (props) => {
-  const [searchValue, setSearchValue] = useState(props.criteria || "");
+export const SelectSearchField = ({ label, criteria, options, onSearch }) => {
+  const [searchValue, setSearchValue] = useState(criteria || "");
 
   const handleSearchValueChange = (value) => {
     setSearchValue(value);
-    props.onSearch?.(value === ALL_OPTION.value ? "" : value);
+    onSearch?.(value === ALL_OPTION.value ? "" : value);
   };
 
-  const options = [ALL_OPTION].concat(props.options);
+  const allOptions = [ALL_OPTION].concat(options);
+
+  // Avoid invalid value selected when changing field.
+  if (!allOptions.some((it) => it.value === searchValue)) {
+    handleSearchValueChange(ALL_OPTION.value);
+  }
 
   return (
     <Select
       name="selectSearchField"
-      placeholder={props.label}
+      placeholder={label}
       defaultValue={searchValue}
-      options={options}
+      options={allOptions}
       onChange={(_name, value) => handleSearchValueChange(value)}
     />
   );

web/html/src/components/table/TableFilter.tsx

@@ -4,29 +4,35 @@ import { Select } from "components/input";
 import { Form } from "components/input/Form";
 import { SelectSearchField } from "components/table/SelectSearchField";
 
-const renderSearchField = (props) => {
-  const { field } = props;
-  const selectedOption = props.filterOptions.find((it) => it.value === field);
+const renderSearchField = ({ filterOptions, field, criteria, onSearch, placeholder, name }) => {
+  const selectedOption = filterOptions.find((it) => it.value === field);
   if (selectedOption?.filterOptions) {
-    return <SelectSearchField label={selectedOption.label} options={selectedOption.filterOptions} {...props} />;
+    return (
+      <SelectSearchField
+        label={selectedOption.label}
+        options={selectedOption.filterOptions}
+        criteria={criteria}
+        onSearch={onSearch}
+      />
+    );
   }
   return (
     <div className="form-group">
       <input
         className="form-control"
-        value={props.criteria || ""}
-        placeholder={props.placeholder}
+        value={criteria || ""}
+        placeholder={placeholder}
         type="text"
-        onChange={(e) => props.onSearch?.(e.target.value)}
-        name={props.name}
+        onChange={(e) => onSearch?.(e.target.value)}
+        name={name}
       />
     </div>
   );
 };
 
 export const TableFilter = (props) => {
   // Dummy model and onChange to reuse the Select component as it requires a Form
-  let model = {};
+  const model = {};
   const onChange = () => {};
 
   const [selectedFilter, setSelectedFilter] = useState(props.field || "");