Fix focus issues with filters and choices

zooniverse · Jan 16, 2025 · 0f98529 · 0f98529
1 parent 71d239e
commit 0f98529
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 11 deletions.
diff --git a/packages/lib-classifier/src/plugins/tasks/survey/components/components/Chooser/Chooser.js b/packages/lib-classifier/src/plugins/tasks/survey/components/components/Chooser/Chooser.js
@@ -2,6 +2,7 @@ import { Markdownz } from '@zooniverse/react-components'
 import { Box, Text } from 'grommet'
 import { observer } from 'mobx-react'
 import PropTypes from 'prop-types'
+import { useState } from 'react'
 import styled from 'styled-components'
 
 import FilterStatus from './components/CharacteristicsFilter/FilterStatus'
@@ -30,7 +31,7 @@ const components = {
   span: Text
 }
 
-function Chooser ({
+function Chooser({
   disabled = false,
   filters = {},
   previousChoiceId = '',
@@ -40,8 +41,14 @@ function Chooser ({
   selectedChoiceIds = [],
   task
 }) {
+  const [filterOpen, setFilterOpen] = useState(false)
+
   const showFilters = task.characteristics.size > 0
   const filteredChoiceIds = getFilteredChoiceIds(filters, task)
+
+  function handleFilterOpen () {
+    setFilterOpen(!filterOpen)
+  }
 
   return (
     <Box
@@ -62,15 +69,18 @@ function Chooser ({
       {showFilters
         ? (<FilterStatus
             disabled={disabled}
+            filterOpen={filterOpen}
             filters={filters}
             handleFilter={handleFilter}
+            handleFilterOpen={handleFilterOpen}
             showingChoices={filteredChoiceIds.length}
             task={task}
           />)
         : null}
       <Choices
         disabled={disabled}
         filteredChoiceIds={filteredChoiceIds}
+        filterOpen={filterOpen}
         previousChoiceId={previousChoiceId}
         handleDelete={handleDelete}
         onChoose={onChoose}

diff --git a/...mponents/components/Chooser/components/CharacteristicsFilter/FilterStatus/FilterStatus.js b/...mponents/components/Chooser/components/CharacteristicsFilter/FilterStatus/FilterStatus.js
@@ -1,7 +1,6 @@
 import { SpacedText } from '@zooniverse/react-components'
 import { Box, Button, Collapsible } from 'grommet'
 import PropTypes from 'prop-types'
-import { useState } from 'react'
 import styled, { css } from 'styled-components'
 
 import { useTranslation } from '@translations/i18n'
@@ -48,13 +47,13 @@ const DEFAULT_HANDLER = () => true
 
 export default function FilterStatus ({
   disabled = false,
+  filterOpen = false,
   filters = {},
   handleFilter = DEFAULT_HANDLER,
+  handleFilterOpen = DEFAULT_HANDLER,
   showingChoices = 0,
   task
 }) {
-  const [filterOpen, setFilterOpen] = useState(false)
-
   const {
     characteristics,
     characteristicsOrder,
@@ -67,10 +66,6 @@ export default function FilterStatus ({
 
   const selectedCharacteristicIds = Object.keys(filters)
 
-  function handleFilterOpen () {
-    setFilterOpen(!filterOpen)
-  }
-
   return (
     <Box
       margin={{
@@ -160,8 +155,10 @@ export default function FilterStatus ({
 
 FilterStatus.propTypes = {
   disabled: PropTypes.bool,
+  filterOpen: PropTypes.bool,
   filters: PropTypes.objectOf(PropTypes.string),
   handleFilter: PropTypes.func,
+  handleFilterOpen: PropTypes.func,
   showingChoices: PropTypes.number,
   task: PropTypes.shape({
     help: PropTypes.string,

diff --git a/.../components/Chooser/components/CharacteristicsFilter/FilterStatus/FilterStatus.stories.js b/.../components/Chooser/components/CharacteristicsFilter/FilterStatus/FilterStatus.stories.js
@@ -37,3 +37,23 @@ export const Default = ({ disabled, filters }) => {
     </Box>
   )
 }
+
+export const Open = ({ disabled, filters }) => {
+  return (
+    <Box
+      background={{
+        dark: 'dark-3',
+        light: 'neutral-6'
+      }}
+      pad='1em'
+      width='380px'
+    >
+      <FilterStatus
+        disabled={disabled}
+        filterOpen={true}
+        filters={filters}
+        task={mockTask}
+      />
+    </Box>
+  )
+}
diff --git a/...fier/src/plugins/tasks/survey/components/components/Chooser/components/Choices/Choices.js b/...fier/src/plugins/tasks/survey/components/components/Chooser/components/Choices/Choices.js
@@ -1,7 +1,7 @@
 import { ResponsiveContext } from 'grommet'
 import { observer } from 'mobx-react'
 import PropTypes from 'prop-types'
-import { useContext, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components'
 
 import {
@@ -41,9 +41,10 @@ const StyledGrid = styled.ul`
   }
 `
 
-export function Choices ({
+export function Choices({
   disabled = false,
   filteredChoiceIds = [],
+  filterOpen = false,
   previousChoiceId = '',
   handleDelete = () => {},
   onChoose = () => true,
@@ -52,6 +53,10 @@ export function Choices ({
 }) {
   const [focusIndex, setFocusIndex] = useState(filteredChoiceIds.indexOf(previousChoiceId))
 
+  useEffect(function resetFocusIndex() {
+    setFocusIndex(filteredChoiceIds.indexOf(previousChoiceId))
+  }, [filteredChoiceIds.length])
+
   const size = useContext(ResponsiveContext)
 
   let columnsCount = howManyColumns(filteredChoiceIds)
@@ -149,7 +154,7 @@ export function Choices ({
         const choice = task.choices?.get(choiceId) || {}
         const selected = selectedChoiceIds.indexOf(choiceId) > -1
         const src = task.images?.get(choice.images?.[0]) || ''
-        const hasFocus = index === focusIndex
+        const hasFocus = !filterOpen && index === focusIndex
         let tabIndex = -1
         if (focusIndex === -1 && index === 0) {
           tabIndex = 0
@@ -189,6 +194,7 @@ Choices.propTypes = {
   filteredChoiceIds: PropTypes.arrayOf(
     PropTypes.string
   ),
+  filterOpen: PropTypes.bool,
   previousChoiceId: PropTypes.string,
   handleDelete: PropTypes.func,
   onChoose: PropTypes.func,