diff --git a/src/components/FileExplorer/index.tsx b/src/components/FileExplorer/index.tsx index cd86171..69ccba4 100644 --- a/src/components/FileExplorer/index.tsx +++ b/src/components/FileExplorer/index.tsx @@ -167,7 +167,7 @@ function LoadedFileExplorer({ const handleNodeFocus = useHandleNodeFocus(methods, setAlignMode) const handleNodeClick = useHandleNodeClick(methods, setAlignMode) const handleKeyDown = useHandleKeyDown(visibleNodes, methods, searched, setAlignMode) - const handleFocusSearchBar = () => focusNode(null) + const handleFocusSearchBar = useCallback(() => focusNode(null), [focusNode]) const renderActions = useNodeRenderers([ useRenderGoToButton(searched, goTo), diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index 3dea432..ccb1cd5 100644 --- a/src/components/SearchBar.tsx +++ b/src/components/SearchBar.tsx @@ -2,6 +2,7 @@ import { AlertIcon, SearchIcon, XIcon } from '@primer/octicons-react' import { Popover, Text, TextInput, TextInputProps } from '@primer/react' import { useConfigs } from 'containers/ConfigsContext' import React, { useCallback, useMemo, useRef } from 'react' +import { cx } from 'utils/cx' import { formatWithShortcut, isValidRegexpSource } from 'utils/general' import { useFocusOnPendingTarget } from './FocusTarget' import { SearchMode } from './searchModes' @@ -48,6 +49,8 @@ export function SearchBar({ onSearch, onFocus, value }: Props) { : null : null + const [focused, setFocused] = React.useState(false) + return ( {!!tooltipText && ( @@ -64,11 +67,13 @@ export function SearchBar({ onSearch, onFocus, value }: Props) { leadingVisual={SearchIcon} onFocus={e => { onFocus(e) + setFocused(true) e.target.select() }} + onBlur={() => setFocused(false)} block sx={{ borderRadius: 0 }} - className={'search-input'} + className={cx('search-input', { focused })} aria-label="Search files" placeholder={formatWithShortcut(`Search files`, focusSearchInputShortcut)} onChange={({ target: { value } }) => onSearch(value, searchMode)} diff --git a/src/styles/index.scss b/src/styles/index.scss index 299cadc..7063685 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -330,6 +330,14 @@ html { .search-input { padding-left: 0; + &:not(.focused) { + // #282 hack border + padding-left: 1px; + border-left: none; + padding-right: 1px; + border-right: none; + } + .TextInput-icon { margin-left: 8px; }