diff --git a/src/app/Topology/Actions/QuickSearchPanel.tsx b/src/app/Topology/Actions/QuickSearchPanel.tsx index e99cb54e8a..2a946bc01b 100644 --- a/src/app/Topology/Actions/QuickSearchPanel.tsx +++ b/src/app/Topology/Actions/QuickSearchPanel.tsx @@ -266,6 +266,7 @@ export const QuickSearchModal: React.FC = ({ titleIconVariant={QuickSearchIcon} title={'Topology Entity Catalog'} className={'topology__quick-search-modal'} + id={'topology-quick-search-modal'} description={
Select an entity to add to view. {guide}
} > diff --git a/src/app/Topology/Toolbar/QuickSearchButton.tsx b/src/app/Topology/Toolbar/QuickSearchButton.tsx index eec3742dd9..7aacdd8828 100644 --- a/src/app/Topology/Toolbar/QuickSearchButton.tsx +++ b/src/app/Topology/Toolbar/QuickSearchButton.tsx @@ -35,7 +35,7 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -import { portalRoot } from '@app/utils/utils'; + import { Button, Tooltip } from '@patternfly/react-core'; import * as React from 'react'; import QuickSearchIcon from '../Shared/QuickSearchIcon'; @@ -46,16 +46,29 @@ export interface QuickSearchButtonProps { } export const QuickSearchButton: React.FC = ({ onClick, tooltipContent, ...props }) => { + const catalogRef = React.useRef(null); + const handleClick = React.useCallback(() => { + onClick(); + catalogRef.current?.blur(); // Remove focus on the catalog button + }, [onClick]); + return ( - - - + + + ); }; diff --git a/src/app/Topology/styles/base.css b/src/app/Topology/styles/base.css index a1c47b9687..c429ee6cc9 100644 --- a/src/app/Topology/styles/base.css +++ b/src/app/Topology/styles/base.css @@ -360,10 +360,6 @@ Below CSS rules only apply to Topology components font-size: 1.1em !important; } -.topology__quick-search-button { - padding: 0; -} - .topology__list-view__entity-details { background-color: var(--pf-global--palette--white); padding: 1em;