Skip to content

Commit

Permalink
fix regression in documentation explorer search when clicking on resu…
Browse files Browse the repository at this point in the history
…lts in dropdown (#3843)
  • Loading branch information
dimaMachina authored Dec 17, 2024
1 parent 1d598a9 commit 16b5698
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 16 deletions.
6 changes: 6 additions & 0 deletions .changeset/friendly-apricots-rest.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@graphiql/react': patch
'graphiql': patch
---

fix regression in documentation explorer search when clicking on results in dropdown
50 changes: 34 additions & 16 deletions packages/graphiql-react/src/explorer/components/search.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,16 @@ import {
isInterfaceType,
isObjectType,
} from 'graphql';
import { FocusEventHandler, useEffect, useRef, useState } from 'react';
import {
FocusEventHandler,
// eslint-disable-next-line @typescript-eslint/no-restricted-imports
useCallback,
useEffect,
// eslint-disable-next-line @typescript-eslint/no-restricted-imports
useMemo,
useRef,
useState,
} from 'react';
import { Combobox } from '@headlessui/react';
import { MagnifyingGlassIcon } from '../../icons';
import { useSchemaContext } from '../../schema';
Expand All @@ -20,6 +29,7 @@ import { renderType } from './utils';
import { isMacOs } from '../../utility/is-macos';

export function Search() {
'use no memo'; // TODO: add test https://github.com/graphql/graphiql/issues/3842
const { explorerNavStack, push } = useExplorerContext({
nonNull: true,
caller: Search,
Expand All @@ -29,10 +39,13 @@ export function Search() {
const getSearchResults = useSearchResults();
const [searchValue, setSearchValue] = useState('');
const [results, setResults] = useState(getSearchResults(searchValue));
const [isFocused, setIsFocused] = useState(false);
const debouncedGetSearchResults = debounce(200, (search: string) => {
setResults(getSearchResults(search));
});
const debouncedGetSearchResults = useMemo(
() =>
debounce(200, (search: string) => {
setResults(getSearchResults(search));
}),
[getSearchResults],
);
useEffect(() => {
debouncedGetSearchResults(searchValue);
}, [debouncedGetSearchResults, searchValue]);
Expand All @@ -50,16 +63,20 @@ export function Search() {

const navItem = explorerNavStack.at(-1)!;

const onSelect = (def: TypeMatch | FieldMatch) => {
push(
'field' in def
? { name: def.field.name, def: def.field }
: { name: def.type.name, def: def.type },
);
};
const handleFocus: FocusEventHandler = e => {
setIsFocused(e.type === 'focus');
};
const onSelect = useCallback(
(def: TypeMatch | FieldMatch) => {
push(
'field' in def
? { name: def.field.name, def: def.field }
: { name: def.type.name, def: def.type },
);
},
[push],
);
const isFocused = useRef(false);
const handleFocus: FocusEventHandler = useCallback(e => {
isFocused.current = e.type === 'focus';
}, []);

const shouldSearchBoxAppear =
explorerNavStack.length === 1 ||
Expand Down Expand Up @@ -98,7 +115,8 @@ export function Search() {
</div>

{/* display on focus */}
{isFocused && (
{/* eslint-disable-next-line react-compiler/react-compiler */}
{isFocused.current && (
<Combobox.Options data-cy="doc-explorer-list">
{results.within.length +
results.types.length +
Expand Down

0 comments on commit 16b5698

Please sign in to comment.