prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Reset focused index when search bar gets focus

Browse source 
This is needed if someone combines keyboard navigation and
using the mouse to select the textbox
This commit is contained in:
Jackson Harper 2022-04-11 11:59:33 -07:00
parent 96ba44df6e
commit 4888c75b9a
1 changed files with 9 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
packages/web/components/templates/article/EditLabelsControl.tsx
View file

@ -24,6 +24,7 @@ type EditLabelsControlProps = {
type HeaderProps = {
filterText: string
focused: boolean
resetFocusedIndex: () => void
setFilterText: (text: string) => void
}
@ -47,28 +48,6 @@ const StyledLabel = styled('label', {
},
})
const useToggleLabels = () => {
const [selectedLabels, setSelectedLabels] = useState<Label[]>([])
const isSelected = useCallback((label: Label): boolean => {
return selectedLabels.some((other) => {
return other.id === label.id
})
}, [selectedLabels])
const toggleLabel = useCallback((label: Label) => {
if (isSelected(label)) {
setSelectedLabels(selectedLabels.filter((other) => {
return other.id !== label.id
}))
} else {
setSelectedLabels([...selectedLabels, label])
}
}, [isSelected, selectedLabels])
return [isSelected, toggleLabel]
}
function Header(props: HeaderProps): JSX.Element {
const inputRef = useRef<HTMLInputElement>(null)
@ -95,6 +74,9 @@ function Header(props: HeaderProps): JSX.Element {
onChange={(event) => {
props.setFilterText(event.target.value)
}}
onFocus={() => {
props.resetFocusedIndex()
}}
css={{
border: '1px solid $grayBorder',
borderRadius: '8px',
@ -213,6 +195,7 @@ export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element {
// Move focus through the labels list on tab or arrow up/down keys
const [focusedIndex, setFocusedIndex] = useState<number | undefined>(undefined)
const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
const maxIndex = filteredLabels.length + 2
if (event.key === 'ArrowUp') {
event.preventDefault()
if (focusedIndex) {
@ -226,8 +209,9 @@ export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element {
if (focusedIndex === undefined) {
setFocusedIndex(0)
} else {
setFocusedIndex(Math.min(filteredLabels.length - 1, focusedIndex + 1))
setFocusedIndex(Math.min(maxIndex, focusedIndex + 1))
}
console.log('focusedIndex', focusedIndex)
}
if (event.key === 'Enter') {
event.preventDefault()
@ -255,6 +239,7 @@ export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element {
}}>
<Header
focused={focusedIndex === undefined}
resetFocusedIndex={() => setFocusedIndex(undefined)}
setFilterText={setFilterText} filterText={filterText}
/>
<VStack css={{ flexGrow: '1', overflow: 'scroll', width: '100%', height: '100%', maxHeight: '400px', }}>
@ -290,7 +275,7 @@ export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element {
</Button>
)}
<HStack distribution="start" alignment="center" css={{
<HStack distribution="start" alignment="center" css={{
ml: '20px', gap: '8px', width: '100%', fontSize: '12px', p: '8px', height: '42px',
'a:link': {
textDecoration: 'none',