yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-08-19 06:38:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): Flickering Issue on search input field (#5515)

Browse Source
This commit is contained in:
Ankit keshari 2022-07-28 21:42:19 +05:30 committed by GitHub
parent 9c7d4bd465
commit e34ff1c177
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
datahub-web-react/src/app/search/SearchablePage.tsx
View File

@ -1,11 +1,14 @@
import React, { useEffect } from 'react'; import React, { useEffect, useState } from 'react';
import { useHistory, useLocation } from 'react-router'; import { useHistory, useLocation } from 'react-router';
import * as QueryString from 'query-string'; import * as QueryString from 'query-string';
import { useTheme } from 'styled-components'; import { useTheme } from 'styled-components';
import { SearchHeader } from './SearchHeader'; import { SearchHeader } from './SearchHeader';
import { useEntityRegistry } from '../useEntityRegistry'; import { useEntityRegistry } from '../useEntityRegistry';
import { EntityType } from '../../types.generated'; import { EntityType } from '../../types.generated';
import { useGetAutoCompleteMultipleResultsLazyQuery } from '../../graphql/search.generated'; import {
GetAutoCompleteMultipleResultsQuery,
useGetAutoCompleteMultipleResultsLazyQuery,
} from '../../graphql/search.generated';
import { navigateToSearchUrl } from './utils/navigateToSearchUrl'; import { navigateToSearchUrl } from './utils/navigateToSearchUrl';
import { useGetAuthenticatedUser } from '../useGetAuthenticatedUser'; import { useGetAuthenticatedUser } from '../useGetAuthenticatedUser';
import analytics, { EventType } from '../analytics'; import analytics, { EventType } from '../analytics';
@ -44,6 +47,13 @@ export const SearchablePage = ({ onSearch, onAutoComplete, children }: Props) =>
const [getAutoCompleteResults, { data: suggestionsData }] = useGetAutoCompleteMultipleResultsLazyQuery(); const [getAutoCompleteResults, { data: suggestionsData }] = useGetAutoCompleteMultipleResultsLazyQuery();
const user = useGetAuthenticatedUser()?.corpUser; const user = useGetAuthenticatedUser()?.corpUser;
const [newSuggestionData, setNewSuggestionData] = useState<GetAutoCompleteMultipleResultsQuery | undefined>();
useEffect(() => {
if (suggestionsData !== undefined) {
setNewSuggestionData(suggestionsData);
}
}, [suggestionsData]);
const search = (query: string, type?: EntityType) => { const search = (query: string, type?: EntityType) => {
if (!query || query.trim().length === 0) { if (!query || query.trim().length === 0) {
@ -94,9 +104,9 @@ export const SearchablePage = ({ onSearch, onAutoComplete, children }: Props) =>
initialQuery={currentQuery as string} initialQuery={currentQuery as string}
placeholderText={themeConfig.content.search.searchbarMessage} placeholderText={themeConfig.content.search.searchbarMessage}
suggestions={ suggestions={
(suggestionsData && (newSuggestionData &&
suggestionsData?.autoCompleteForMultiple && newSuggestionData?.autoCompleteForMultiple &&
suggestionsData.autoCompleteForMultiple.suggestions) || newSuggestionData.autoCompleteForMultiple.suggestions) ||
[] []
} }
onSearch={onSearch || search} onSearch={onSearch || search}