diff --git a/client/web/src/components/exit-node-selector.tsx b/client/web/src/components/exit-node-selector.tsx index 3bd643e1a..0e64f80f1 100644 --- a/client/web/src/components/exit-node-selector.tsx +++ b/client/web/src/components/exit-node-selector.tsx @@ -1,5 +1,5 @@ import cx from "classnames" -import React, { useCallback, useMemo, useState } from "react" +import React, { useCallback, useMemo, useRef, useState } from "react" import { ReactComponent as Check } from "src/assets/icons/check.svg" import { ReactComponent as ChevronDown } from "src/assets/icons/chevron-down.svg" import useExitNodes, { @@ -212,6 +212,7 @@ function ExitNodeSelectorInner({ }) { const [filter, setFilter] = useState("") const { data: exitNodes } = useExitNodes(node.TailnetName, filter) + const listRef = useRef(null) const hasNodes = useMemo( () => exitNodes.find((n) => n.nodes.length > 0), @@ -228,10 +229,17 @@ function ExitNodeSelectorInner({ autoCapitalize="off" placeholder="Search exit nodes…" value={filter} - onChange={(e) => setFilter(e.target.value)} + onChange={(e) => { + // Jump list to top when search value changes. + listRef.current?.scrollTo(0, 0) + setFilter(e.target.value) + }} /> {/* TODO(sonia): use loading spinner when loading useExitNodes */} -
+
{hasNodes ? ( exitNodes.map( (group) =>