Skip to content

fix(web): font picker highlights and Enter-selects the first match after typing #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
asfires merged 1 commit into from
Aug 18, 2026
Merged

fix(web): font picker highlights and Enter-selects the first match after typing #45

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 17 additions & 5 deletions apps/web/src/components/settings/FontFamilyPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,14 @@ export function FontFamilyPicker({
return candidate;
}, [families, query, requireMonospace]);

const items = useMemo(() => {
const collectionItems = useMemo(() => {
const result = [DEFAULT_FONT_VALUE];
if (manualFamily !== null) result.push(manualFamily);
result.push(...families);
return result;
}, [families, manualFamily]);

const filteredItems = useMemo(() => {
const normalizedQuery = query.trim().toLowerCase();
const result: string[] = [];
if (normalizedQuery.length === 0) result.push(DEFAULT_FONT_VALUE);
Expand Down Expand Up @@ -239,8 +246,8 @@ export function FontFamilyPicker({

return (
<Combobox
items={items}
filteredItems={items}
items={collectionItems}
filteredItems={filteredItems}
autoHighlight
virtualized
open={open}
Expand Down Expand Up @@ -301,12 +308,17 @@ export function FontFamilyPicker({
<ComboboxListVirtualized className="size-full min-w-0 p-0">
<LegendList<string>
ref={listRef}
data={items}
data={filteredItems}
// LegendList only re-renders a row when its item or extraData
// changes, so a font that stays visible while the filter shifts
// its position would keep a stale `index`. Base UI highlights and
// Enter-selects by index, so every filter change must re-render.
extraData={filteredItems}
keyExtractor={(item) => item}
renderItem={({ item, index }) => renderItem(item, index)}
estimatedItemSize={30}
drawDistance={360}
style={{ height: Math.min(items.length * 30, 288) }}
style={{ height: Math.min(filteredItems.length * 30, 288) }}
/>
</ComboboxListVirtualized>
</div>
Expand Down
Loading