diff --git a/src/components/DataSubmissions/DataSubmissionListFilters.tsx b/src/components/DataSubmissions/DataSubmissionListFilters.tsx index 8896daa3..aa492b93 100644 --- a/src/components/DataSubmissions/DataSubmissionListFilters.tsx +++ b/src/components/DataSubmissions/DataSubmissionListFilters.tsx @@ -13,6 +13,7 @@ import { canViewOtherOrgRoles } from "../../config/AuthRoles"; import { Column } from "../GenericTable"; import { useSearchParamsContext } from "../Contexts/SearchParamsContext"; import Tooltip from "../Tooltip"; +import { isStringLengthBetween } from "../../utils"; const StyledFilters = styled("div")({ paddingTop: "19px", @@ -152,7 +153,7 @@ const DataSubmissionListFilters = ({ const canViewOtherOrgs = canViewOtherOrgRoles.includes(user?.role); const debounceAfter3CharsInputs: FilterFormKey[] = ["name", "dbGaPID"]; const debouncedOnChangeRef = useRef( - debounce((form: FilterForm) => onChange?.(form), 500) + debounce((form: FilterForm) => handleFormChange(form), 500) ).current; useEffect(() => { @@ -199,7 +200,7 @@ const DataSubmissionListFilters = ({ } if (Object.values(touchedFilters).every((filter) => !filter)) { - onChange?.(getValues()); + handleFormChange(getValues()); } }, [ activeOrganizations, @@ -272,17 +273,18 @@ const DataSubmissionListFilters = ({ } // Do nothing if values has between 0 and 3 (exclusive) characters if (isDebounceField && formValue[name]?.length > 0) { + debouncedOnChangeRef.cancel(); return; } // If value is cleared, call the onChange immediately if (isDebounceField && formValue[name]?.length === 0) { debouncedOnChangeRef.cancel(); - onChange?.(formValue); + handleFormChange(formValue); return; } // Immediately call the onChange if the change is not a debounce field - onChange?.(formValue); + handleFormChange(formValue); }); return () => { @@ -319,6 +321,20 @@ const DataSubmissionListFilters = ({ } }; + const handleFormChange = (form: FilterForm) => { + if (!onChange || !form) { + return; + } + + const newForm: FilterForm = { + ...form, + name: form.name?.length >= 3 ? form.name : "", + dbGaPID: form.dbGaPID?.length >= 3 ? form.dbGaPID : "", + }; + + onChange(newForm); + }; + const handleFilterChange = (field: FilterFormKey) => { setTouchedFilters((prev) => ({ ...prev, [field]: true })); }; @@ -468,6 +484,8 @@ const DataSubmissionListFilters = ({ {...register("name", { setValueAs: (val) => val?.trim(), onChange: () => handleFilterChange("name"), + onBlur: (e) => + isStringLengthBetween(e?.target?.value, 0, 3) && setValue("name", ""), })} size="small" placeholder="Minimum 3 characters required" @@ -487,6 +505,8 @@ const DataSubmissionListFilters = ({ {...register("dbGaPID", { setValueAs: (val) => val?.trim(), onChange: () => handleFilterChange("dbGaPID"), + onBlur: (e) => + isStringLengthBetween(e?.target?.value, 0, 3) && setValue("dbGaPID", ""), })} size="small" placeholder="Minimum 3 characters required"