feat(select a11y): scroll highlighted option into view

components/select/src/single-select-a11y/is-option-hidden.js

@@ -0,0 +1,13 @@
+export function isOptionHidden(option, scrollContainer) {
+    const optionOffsetTop = option.getBoundingClientRect().top
+    const optionHeight = option.offsetHeight
+    const optionOffsetBottom = optionOffsetTop + optionHeight
+    const containerOffsetTop = scrollContainer.getBoundingClientRect().top
+    const containerHeight = scrollContainer.offsetHeight
+    const containerOffsetBottom = containerOffsetTop + containerHeight
+
+    return (
+        optionOffsetBottom > containerOffsetBottom ||
+        optionOffsetTop < containerOffsetTop
+    )
+}

components/select/src/single-select-a11y/menu-loading.js

@@ -0,0 +1,34 @@
+import { colors, spacers, theme } from '@dhis2/ui-constants'
+import { CircularLoader } from '@dhis2-ui/loader'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export function MenuLoading({ message }) {
+    return (
+        <div className="container">
+            <div>
+                <CircularLoader small />
+            </div>
+
+            {message}
+
+            <style jsx>{`
+                .container {
+                    display: flex;
+                    gap: ${spacers.dp16};
+                    align-items: center;
+                    justify-content: center;
+                    color: ${colors.grey700};
+                    font-family: ${theme.fonts};
+                    font-size: 13px;
+                    padding-block: ${spacers.dp8};
+                    padding-inline: ${spacers.dp24};
+                }
+            `}</style>
+        </div>
+    )
+}
+
+MenuLoading.propTypes = {
+    message: PropTypes.string,
+}

components/select/src/single-select-a11y/menu-options-list.js

@@ -1,58 +1,51 @@
-import { colors, spacers, theme } from '@dhis2/ui-constants'
-import { CircularLoader } from '@dhis2-ui/loader'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
+import { isOptionHidden } from './is-option-hidden.js'
 import { Option } from './option.js'
 import { optionsProp } from './shared-prop-types.js'
 
-function Loading({ message }) {
-    return (
-        <div className="container">
-            <div>
-                <CircularLoader small />
-            </div>
-
-            {message}
-
-            <style jsx>{`
-                .container {
-                    display: flex;
-                    gap: ${spacers.dp16};
-                    align-items: center;
-                    justify-content: center;
-                    color: ${colors.grey700};
-                    font-family: ${theme.fonts};
-                    font-size: 13px;
-                    padding-block: ${spacers.dp8};
-                    padding-inline: ${spacers.dp24};
-                }
-            `}</style>
-        </div>
-    )
-}
-
-Loading.propTypes = {
-    message: PropTypes.string,
-}
-
 export function MenuOptionsList({
     comboBoxId,
+    expanded,
     focussedOptionIndex,
     idPrefix,
     labelledBy,
     options,
     selected,
     dataTest,
     disabled,
-    empty,
     loading,
-    loadingText,
     onChange,
     onBlur,
     onKeyDown,
 }) {
+    const listBoxRef = useRef()
+
+    // scrolls the highlighted option into view when:
+    // * the highlighted option changes
+    // * the menu opens
+    useEffect(() => {
+        const { current: listBox } = listBoxRef
+        const highlightedOption = expanded
+            ? listBox.childNodes[focussedOptionIndex]
+            : null
+
+        if (highlightedOption) {
+            const listBoxParent = listBox.parentNode
+            const optionHidden = isOptionHidden(
+                highlightedOption,
+                listBoxParent
+            )
+
+            if (optionHidden) {
+                highlightedOption.scrollIntoView()
+            }
+        }
+    }, [expanded, focussedOptionIndex])
+
     return (
         <div
+            ref={listBoxRef}
             role="listbox"
             id={`${idPrefix}-listbox`}
             aria-labelledby={labelledBy}
@@ -62,8 +55,6 @@ export function MenuOptionsList({
             onBlur={onBlur}
             onKeyDown={onKeyDown}
         >
-            {!options.length && empty}
-
             {options.map(
                 (
                     {
@@ -91,30 +82,21 @@ export function MenuOptionsList({
                     )
                 }
             )}
-
-            {loading && <Loading message={loadingText} />}
-
-            <style jsx>{`
-                div:empty {
-                    height: 16px;
-                }
-            `}</style>
         </div>
     )
 }
 
 MenuOptionsList.propTypes = {
     comboBoxId: PropTypes.string.isRequired,
+    expanded: PropTypes.bool.isRequired,
     focussedOptionIndex: PropTypes.number.isRequired,
     idPrefix: PropTypes.string.isRequired,
     options: optionsProp.isRequired,
     onChange: PropTypes.func.isRequired,
     dataTest: PropTypes.string,
     disabled: PropTypes.bool,
-    empty: PropTypes.node,
     labelledBy: PropTypes.string,
     loading: PropTypes.bool,
-    loadingText: PropTypes.string,
     selected: PropTypes.string,
     onBlur: PropTypes.func,
     onKeyDown: PropTypes.func,

components/select/src/single-select-a11y/menu.js

@@ -5,6 +5,7 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
 import { MenuFilter } from './menu-filter.js'
+import { MenuLoading } from './menu-loading.js'
 import { MenuOptionsList } from './menu-options-list.js'
 import { optionsProp } from './shared-prop-types.js'
 
@@ -62,24 +63,25 @@ export function Menu({
                 />
             )}
 
+            {!options.length && <div className="empty-container">{empty}</div>}
+
             <MenuOptionsList
                 comboBoxId={comboBoxId}
                 dataTest={`${dataTestPrefix}-list`}
                 disabled={disabled}
-                empty={empty}
+                expanded={!hidden}
                 focussedOptionIndex={focussedOptionIndex}
                 idPrefix={idPrefix}
                 labelledBy={labelledBy}
-                options={options}
                 loading={loading}
-                loadingText={loadingText}
+                options={options}
                 selected={selected}
                 onChange={onChange}
                 onBlur={onBlur}
                 onKeyDown={onKeyDown}
             />
 
-            {/* Put (infinite) loading stuff here */ ''}
+            {loading && <MenuLoading message={loadingText} />}
 
             <style jsx>{`
                 .listbox-container {
@@ -94,6 +96,10 @@ export function Menu({
                 .hidden {
                     display: none;
                 }
+
+                .empty-container {
+                    height: 16px;
+                }
             `}</style>
         </div>
     )

components/select/src/single-select-a11y/selected-value.js

@@ -85,9 +85,17 @@ export function SelectedValue({
                 </div>
             )}
 
-            <div className="root-right">
+            <button
+                className="toggle-icon"
+                aria-label="Open select"
+                onClick={(e) => {
+                    e.stopPropagation()
+                    comboBoxRef.current.focus()
+                    onClick()
+                }}
+            >
                 <IconChevronDown16 />
-            </div>
+            </button>
 
             <style jsx>{`
                 .selected-option-label {
@@ -99,6 +107,13 @@ export function SelectedValue({
                 .clear-button-container {
                     margin-inline-start: auto;
                 }
+
+                .toggle-icon {
+                    display: block;
+                    background: none;
+                    padding: 0;
+                    border: 0;
+                }
             `}</style>
         </SelectedValueContainer>
     )

components/select/src/single-select-a11y/single-select-a11y.js

@@ -68,15 +68,20 @@ export function SingleSelectA11y({
 
     // Using `useState` here so components get notified when the value changes (from null -> div)
     const comboBoxRef = useRef()
-    const [focussedOptionIndex, setFocussedOptionIndex] = useState(() => {
-        const foundIndex = options.findIndex((option) => option.value === value)
-
-        return foundIndex !== -1 ? foundIndex : 0
-    })
+    const [focussedOptionIndex, setFocussedOptionIndex] = useState(0)
     const [selectRef, setSelectRef] = useState()
     const [expanded, setExpanded] = useState(false)
     const closeMenu = useCallback(() => setExpanded(false), [])
-    const openMenu = useCallback(() => setExpanded(true), [])
+    const openMenu = useCallback(() => {
+        const selectedOptionIndex = options.findIndex(
+            (option) => option.value === value
+        )
+        if (selectedOptionIndex !== focussedOptionIndex) {
+            setFocussedOptionIndex(selectedOptionIndex)
+        }
+
+        setExpanded(true)
+    }, [options, value, focussedOptionIndex])
     const toggleMenu = useCallback(() => {
         if (expanded) {
             closeMenu()

components/select/src/single-select-a11y/single-select-a11y.prod.stories.js

@@ -427,7 +427,7 @@ export const WithOptionsAndLoadingText = () => {
 }
 
 export const WithManyOptions = () => {
-    const [value, setValue] = useState('')
+    const [value, setValue] = useState('art_entry_point:_no_pmtct')
 
     return (
         <SingleSelectA11y

components/select/src/single-select-a11y/use-handle-key-press.js

@@ -3,12 +3,10 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 const TYPING_DEBOUNCE_TIME = 300 // ms
 
 function useHandleTyping({
+    expanded,
     options,
     setFocussedOptionIndex,
-
-    // @TODO: Scroll to highlighted option when not/partially visible
-    // eslint-disable-next-line no-unused-vars
-    listboxHTMLElement,
+    onChange,
 }) {
     const timeoutRef = useRef()
     const [value, setValue] = useState('')
@@ -34,17 +32,26 @@ function useHandleTyping({
         value,
     ])
 
+    const prevValueRef = useRef()
     useEffect(() => {
-        if (value) {
+        if (value && value !== prevValueRef.current) {
+            // We only want to do this when the value changed
+            prevValueRef.current = value
+
             const optionIndex = options.findIndex((option) =>
                 option.label.toLowerCase().startsWith(value.toLowerCase())
             )
 
             if (optionIndex !== -1) {
-                setFocussedOptionIndex(optionIndex)
+                if (expanded) {
+                    setFocussedOptionIndex(optionIndex)
+                } else {
+                    const nextSelectedOption = options[optionIndex]
+                    onChange(nextSelectedOption.value)
+                }
             }
         }
-    }, [value, options, setFocussedOptionIndex])
+    }, [value, options, setFocussedOptionIndex, expanded, onChange])
 
     const onTyping = useCallback((e) => {
         const { key } = e
@@ -78,24 +85,33 @@ export function useHandleKeyPress({
     onChange,
 }) {
     const { onTyping, typing } = useHandleTyping({
+        expanded,
         options,
         setFocussedOptionIndex,
-        listboxHTMLElement: null, // @TODO
+        onChange,
     })
 
-    console.log('> typing:', typing)
-
     const selectNextOption = useCallback(() => {
-        if (focussedOptionIndex < options.length - 1) {
-            onChange(options[focussedOptionIndex + 1].value)
+        const currentOptionIndex = options.findIndex(
+            (option) => option.value === value
+        )
+        const nextSelectedOption = options[currentOptionIndex + 1]
+
+        if (nextSelectedOption) {
+            onChange(nextSelectedOption.value)
         }
-    }, [focussedOptionIndex, options, onChange])
+    }, [options, onChange, value])
 
     const selectPrevOption = useCallback(() => {
-        if (focussedOptionIndex > 0) {
-            onChange(options[focussedOptionIndex - 1].value)
+        const currentOptionIndex = options.findIndex(
+            (option) => option.value === value
+        )
+        const nextSelectedOption = options[currentOptionIndex - 1]
+
+        if (nextSelectedOption) {
+            onChange(nextSelectedOption.value)
         }
-    }, [focussedOptionIndex, options, onChange])
+    }, [options, onChange, value])
 
     const focusNextOption = useCallback(() => {
         if (focussedOptionIndex < options.length - 1) {