From 21ad26405485c9363b6347f0a2ebe6fdaa17430e Mon Sep 17 00:00:00 2001
From: Sofi Bel <91890402+sofi-bel@users.noreply.github.com>
Date: Tue, 14 Apr 2026 12:48:18 +0300
Subject: [PATCH] fix(PG): salary filter input losing focus on debounce

Refs ENG-123
---
 client/src/sites/pg/components/PgFacetSalary.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/client/src/sites/pg/components/PgFacetSalary.tsx b/client/src/sites/pg/components/PgFacetSalary.tsx
index 96d998f0..9b76437c 100644
--- a/client/src/sites/pg/components/PgFacetSalary.tsx
+++ b/client/src/sites/pg/components/PgFacetSalary.tsx
@@ -2,7 +2,7 @@
  * #quality-25% #155 — see [[jobListFilters.ts]]
  */
 import { Flex, NumberInput, Stack, Switch, Text } from "@chakra-ui/react";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { facetStyle } from "@/components/algolia/AlgoliaFacets";
 import { ids } from "@/e2e/ids";
 import { useJobListFilters } from "@/sites/pg/pages/jobs/list/jobListFilters";
@@ -12,6 +12,13 @@ const textStyle = { ...facetStyle.value, color: "fg" } as const;
 export function PgFacetSalary() {
   const filters = useJobListFilters();
   const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (filters.snap.salaryMin == null && inputRef.current) {
+      inputRef.current.value = "";
+    }
+  }, [filters.snap.salaryMin]);
 
   function handleValueChange(details: { valueAsNumber: number }) {
     clearTimeout(debounceRef.current ?? undefined);
@@ -25,7 +32,6 @@ export function PgFacetSalary() {
   return (
     <Stack gap="gap.sm">
       <NumberInput.Root
-        key={filters.snap.salaryMin ?? "empty"}
         defaultValue={filters.snap.salaryMin != null ? String(filters.snap.salaryMin) : ""}
         onValueChange={handleValueChange}
         size="xs"
@@ -33,6 +39,7 @@ export function PgFacetSalary() {
         formatOptions={{ useGrouping: true }}
       >
         <NumberInput.Input
+          ref={inputRef}
           placeholder="Minimum salary in USD (example: 50,000)"
           {...ids.set(ids.facet.salaryInput)}
         />