Skip to content

Commit 8240cd4

Browse files
[getsentry/action-github-commit] Auto commit
1 parent ae3fc1d commit 8240cd4

File tree

1 file changed

+26
-14
lines changed

1 file changed

+26
-14
lines changed

src/components/platformSelector/index.tsx

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
'use client';
2-
import {Fragment, Ref, startTransition, useCallback, useEffect, useMemo, useRef, useState} from 'react';
2+
import {
3+
Fragment,
4+
Ref,
5+
startTransition,
6+
useCallback,
7+
useEffect,
8+
useMemo,
9+
useRef,
10+
useState,
11+
} from 'react';
312
import {Combobox, ComboboxItem, ComboboxList, ComboboxProvider} from '@ariakit/react';
413
import {CaretRightIcon, CaretSortIcon, MagnifyingGlassIcon} from '@radix-ui/react-icons';
514
import * as RadixSelect from '@radix-ui/react-select';
@@ -63,40 +72,43 @@ export function PlatformSelector({
6372
const currentPlatformKey = currentPlatform?.key;
6473
const [open, setOpen] = useState(false);
6574
const [searchValue, setSearchValue] = useState('');
66-
75+
6776
// Controlled search handler for virtual guide stability
68-
const handleSearchValueChange = useCallback((value: string) => {
69-
// Use startTransition for virtual guides to prevent focus issues
70-
if (currentPlatformKey === 'javascript-platform') {
71-
startTransition(() => setSearchValue(value));
72-
} else {
73-
setSearchValue(value);
74-
}
75-
}, [currentPlatformKey]);
77+
const handleSearchValueChange = useCallback(
78+
(value: string) => {
79+
// Use startTransition for virtual guides to prevent focus issues
80+
if (currentPlatformKey === 'javascript-platform') {
81+
startTransition(() => setSearchValue(value));
82+
} else {
83+
setSearchValue(value);
84+
}
85+
},
86+
[currentPlatformKey]
87+
);
7688

7789
const matches = useMemo(() => {
7890
if (!searchValue) {
7991
return platformsAndGuides;
8092
}
81-
93+
8294
// Find the currently selected platform/guide first
8395
const selectedPlatform = platformsAndGuides.find(
8496
lang => lang.key === currentPlatformKey
8597
);
86-
98+
8799
// any of these fields can be used to match the search value
88100
const keys = ['title', 'name', 'aliases', 'sdk', 'keywords'];
89101
let matches_ = matchSorter(platformsAndGuides, searchValue, {
90102
keys,
91103
threshold: matchSorter.rankings.ACRONYM,
92104
});
93-
105+
94106
// For virtual guides (like javascript-platform), ensure they're always included
95107
// when they're the current selection, to prevent focus/display issues
96108
if (selectedPlatform && !matches_.includes(selectedPlatform)) {
97109
matches_ = [selectedPlatform, ...matches_];
98110
}
99-
111+
100112
return matches_;
101113
}, [searchValue, currentPlatformKey, platformsAndGuides]);
102114

0 commit comments

Comments
 (0)