diff --git a/src/components/SearchFacet/FacetList.tsx b/src/components/SearchFacet/FacetList.tsx index 0d974faa2..c84c78f96 100644 --- a/src/components/SearchFacet/FacetList.tsx +++ b/src/components/SearchFacet/FacetList.tsx @@ -56,13 +56,13 @@ export const FacetList = (props: IFacetListProps) => { {({ searchTerm }) => focused ? ( - + ) : ( - + ) } - + ); @@ -72,6 +72,7 @@ export interface INodeListProps extends Pick void; onError: () => void; + searchTerm: string; } export const NodeList = (props: INodeListProps) => { @@ -138,7 +139,7 @@ export const NodeList = (props: INodeListProps) => { }; export const NodeListModal = (props: INodeListProps) => { - const { prefix, level, onError } = props; + const { prefix, searchTerm, level, onError } = props; const params = useFacetStore((state) => state.params); const sortDir = useFacetStore((state) => state.sort[1]); @@ -146,6 +147,7 @@ export const NodeListModal = (props: INodeListProps) => { const { treeData, isFetching, isError, pagination, handleLoadMore, handlePrevious, handlePageChange, totalResults } = useGetFacetData({ ...params, + searchTerm, prefix, level, sortDir, @@ -284,7 +286,7 @@ export const Item = (props: IItemProps) => { {expandable && expanded ? ( - setFocused(node)} /> + setFocused(node)} searchTerm="" /> ) : null} ); @@ -339,10 +341,8 @@ export const NodeCheckbox = forwardRef((pr ((pr isIndeterminate={isPartSelected} onChange={() => select(node)} value={node.id} - data-testid={` - search - facet -${isRoot ? 'root' : 'child'} -checkbox`} + data-testid={`search-facet-${isRoot ? 'root' : 'child'}-checkbox`} my={0.5} > diff --git a/src/components/SearchFacet/SearchFacetModal/SearchFacetModal.tsx b/src/components/SearchFacet/SearchFacetModal/SearchFacetModal.tsx index 85eb9d174..17b866d99 100644 --- a/src/components/SearchFacet/SearchFacetModal/SearchFacetModal.tsx +++ b/src/components/SearchFacet/SearchFacetModal/SearchFacetModal.tsx @@ -71,29 +71,27 @@ const ModalFacet = (props: ISearchFacetModalProps) => { - {focused ? null : ( - <> - - {sort[0] === 'index' ? ( - - ) : ( - - )} - - + <> + {sort[0] === 'index' ? ( - - ) : null} - - )} + + ) : ( + + )} + + + {sort[0] === 'index' ? ( + + ) : null} + {children({ searchTerm })} diff --git a/src/components/SearchFacet/SearchFacetModal/SearchInput.tsx b/src/components/SearchFacet/SearchFacetModal/SearchInput.tsx index 65a5fac81..11ab934ba 100644 --- a/src/components/SearchFacet/SearchFacetModal/SearchInput.tsx +++ b/src/components/SearchFacet/SearchFacetModal/SearchInput.tsx @@ -28,7 +28,7 @@ export const SearchInput: FC = (props) => { // disallow forward slashes const value = ev.currentTarget.value.replaceAll('/', ''); - // if flag is set, this captialize the search term + // if flag is set, this capitalizes the search term onSearchChange(forceUppercaseInitial ? capitalizeString(value) : value); }; diff --git a/src/components/SearchFacet/store/FacetStore.ts b/src/components/SearchFacet/store/FacetStore.ts index e7b2af029..dea4ba578 100644 --- a/src/components/SearchFacet/store/FacetStore.ts +++ b/src/components/SearchFacet/store/FacetStore.ts @@ -80,9 +80,9 @@ const createStore = (preloadedState: Partial) => () => selection: !isOpen ? initialState.selection : get().selection, selected: !isOpen ? initialState.selected : get().selected, }), - setFocused: (focused) => set({ focused }), - setSearch: (search) => set({ search, focused: search.length === 0 ? null : get().focused }), - setLetter: (letter) => set({ letter, focused: null }), + setFocused: (focused) => set({ focused, search: '', letter: 'All' }), + setSearch: (search) => set({ search }), + setLetter: (letter) => set({ letter }), addNodes: (nodes) => set({ selection: createNodes(nodes, get().selection) }), setSort: (sort) => set({ sort }), reset: () => set(omit(['params'], initialState)), diff --git a/src/components/SearchFacet/useGetFacetData.ts b/src/components/SearchFacet/useGetFacetData.ts index e2a5816fe..41033bdcb 100644 --- a/src/components/SearchFacet/useGetFacetData.ts +++ b/src/components/SearchFacet/useGetFacetData.ts @@ -21,6 +21,7 @@ export interface IUseGetFacetDataProps { filter?: string[]; enabled?: boolean; hasChildren?: boolean; + searchTerm?: string; } export const FACET_DEFAULT_LIMIT = 10; @@ -41,6 +42,7 @@ export const useGetFacetData = (props: IUseGetFacetDataProps) => { enabled = true, hasChildren = false, filter = [], + searchTerm, } = props; const [pagination, setPagination] = useState(() => calculatePagination({ page: 0, numPerPage: FACET_DEFAULT_LIMIT })); @@ -62,10 +64,11 @@ export const useGetFacetData = (props: IUseGetFacetDataProps) => { sortDir, offset: pagination.startIndex, hasChildren, + searchTerm, }), ...searchQuery, }), - [searchQuery, field, prefix, query, level, sortDir, sortField, pagination.startIndex, hasChildren], + [searchQuery, searchTerm, field, prefix, query, level, sortDir, sortField, pagination.startIndex, hasChildren], ), 300, ); @@ -158,10 +161,11 @@ export const useGetFacetData = (props: IUseGetFacetDataProps) => { * @param level * @param key */ -const getPrefix = (level: IUseGetFacetDataProps['level'], key: string) => - `${level === 'root' ? FACET_DEFAULT_PREFIX : FACET_DEFAULT_CHILD_PREFIX}${parseRootFromKey(key) ?? ''}${ - level === 'child' ? '/' : '' +const getPrefix = (level: IUseGetFacetDataProps['level'], key: string, searchTerm: string) => { + return `${level === 'root' ? FACET_DEFAULT_PREFIX : FACET_DEFAULT_CHILD_PREFIX}${parseRootFromKey(key) ?? ''}${ + level === 'child' ? `/${searchTerm}` : searchTerm }`; +}; const getSearchFacetParams = (props: IUseGetFacetDataProps & { offset: number }) => { if (!props || !props.field) { @@ -180,8 +184,8 @@ const getSearchFacetParams = (props: IUseGetFacetDataProps & { offset: number }) sort: `count ${props.sortDir}`, ...(props.query ? { query: props.query } : {}), ...(props.hasChildren - ? { prefix: getPrefix(props.level, sanitize(props.prefix)) } - : { prefix: sanitize(props.prefix) }), + ? { prefix: getPrefix(props.level, props.prefix, sanitize(props.searchTerm)) } + : { prefix: sanitize(props.searchTerm) }), }, }); };