diff --git a/web/src/ar/components/ReorderSelect/ReorderSelect.tsx b/web/src/ar/components/ReorderSelect/ReorderSelect.tsx index d775f6794..1fd4a16a4 100644 --- a/web/src/ar/components/ReorderSelect/ReorderSelect.tsx +++ b/web/src/ar/components/ReorderSelect/ReorderSelect.tsx @@ -31,6 +31,8 @@ interface ReorderSelectProps { className: string items: RorderSelectOption[] disabled: boolean + query: string + onChangeQuery: (val: string) => void selectListProps?: { title?: string | React.ReactNode withSearch?: boolean @@ -102,6 +104,8 @@ export default function ReorderSelect(props: ReorderSelectProps): JSX.Elem options={items.filter(each => !formValue.includes(each.value))} onSelect={handleAddOption} disabled={disabled} + query={props.query} + onChangeQuery={props.onChangeQuery} /> void options: RorderSelectOption[] onSelect: (option: RorderSelectOption) => void withSearch?: boolean @@ -41,17 +43,8 @@ const EmptyOption: RorderSelectOption = { function SelectList(props: SelectListProps): JSX.Element { const { options, onSelect, withSearch, title, disabled } = props - const [searchTerm, setSearchTerm] = useState('') const { getString } = useStrings() - const filteredOptions: RorderSelectOption[] = useMemo(() => { - try { - return options.filter(each => each.label.toLowerCase().includes(searchTerm.toLowerCase())) - } catch { - return options - } - }, [options, searchTerm]) - const renderTitle = (): JSX.Element | ReactNode => { if (typeof title === 'string') { return ( @@ -67,10 +60,10 @@ function SelectList(props: SelectListProps): JSX.Element { } const renderOptions = (): JSX.Element => { - if (filteredOptions.length) { + if (options.length) { return ( <> - {filteredOptions.map((each, index) => ( + {options.map((each, index) => ( ))} @@ -88,10 +81,8 @@ function SelectList(props: SelectListProps): JSX.Element { autoFocus={false} alwaysExpanded placeholder={getString('search')} - onChange={text => { - setSearchTerm(text) - }} - defaultValue={searchTerm} + onChange={props.onChangeQuery} + defaultValue={props.query} disabled={disabled} /> )} diff --git a/web/src/ar/pages/repository-details/components/UpstreamProxiesSelect/index.tsx b/web/src/ar/pages/repository-details/components/UpstreamProxiesSelect/index.tsx index 94e260e32..dc220adc8 100644 --- a/web/src/ar/pages/repository-details/components/UpstreamProxiesSelect/index.tsx +++ b/web/src/ar/pages/repository-details/components/UpstreamProxiesSelect/index.tsx @@ -49,6 +49,7 @@ function UpstreamProxiesSelect(props: UpstreamProxiesSelectProps): JSX.Element { const selectedProxies = (get(formikProps.values, name) as string[]) || [] const [showList, setShowList] = useState(!!selectedProxies?.length) const spaceRef = useGetSpaceRef('') + const [searchTerm, setSearchTerm] = useState('') const { data, @@ -62,6 +63,7 @@ function UpstreamProxiesSelect(props: UpstreamProxiesSelectProps): JSX.Element { size: 100, package_type: [packageType], type: RepositoryConfigType.UPSTREAM, + search_term: searchTerm, recursive: true }, stringifyQueryParamsOptions: { @@ -140,6 +142,8 @@ function UpstreamProxiesSelect(props: UpstreamProxiesSelectProps): JSX.Element { items={items} name={name} formikProps={formikProps} + onChangeQuery={setSearchTerm} + query={searchTerm} selectListProps={{ title: getString('repositoryDetails.upstreamProxiesSelectList.selectList.Title', { count: data?.content?.data?.registries?.length