downshift-js / downshift-js/downshift

useSelect - NVDA keeps reading out the selected value continuously, even when neither focus is set on the dropdown, nor the dropdown value has changed

Open
#1,643 2 comments 0 reactions 0 assignees View on GitHub
needs investigation
Dominant language
JavaScript
Stars
12.3k
Forks
936
PR merge metrics
No merged PRs in 30d

Description

downshift version: "^8.1.0"

**Tools used:**
NVDA

**Relevant code or config**

```
import React, { forwardRef } from 'react';
import _isEmpty from 'lodash/isEmpty';
import { useSelect } from 'downshift';
import { string, arrayOf, shape, func } from 'prop-types';
import '../Dropdown.scss';
import CheckMarkIcon from '../../../resources/images/checkmark-black.svg';
import { classNames } from '../../../site/helper/utils';

const itemToString = item => {
return item ? item.title : '';
};

const Downshift = forwardRef(
(
{
className,
list,
label,
field,
disabled,
selectedValue,
handleOnChange,
errorMessage,
required,
id,
dropdownButtonClassName,
...rest
},
ref
) => {
const selectedItem = list.find(item => item.value === selectedValue?.value) || null;
const { isOpen, getToggleButtonProps, getLabelProps, getMenuProps, highlightedIndex, getItemProps } = useSelect(
{
items: list,
selectedItem,
onSelectedItemChange: ({ selectedItem }) => handleOnChange(selectedItem),
itemToString,
}
);

const showErrorMsg = !!errorMessage;

const dropdownList = (


    {list.map((item, index) => (

  • {item.title}
    {selectedItem?.value === item.value && (
    ArrowUpIcon
    )}

  • ))}

);

const dropdownButton = (


{!_isEmpty(selectedItem) ? (
<>
{

{label}

}

{itemToString(selectedItem)}


) : (

{label}

)}


);

return (


{dropdownButton}
{dropdownList}

);
}
);

Downshift.propTypes = {
list: arrayOf(
shape({
title: string,
value: string,
})
).isRequired,
selectedValue: shape({ title: string, value: string }),
handleOnChange: func.isRequired,
};
Downshift.defaultProps = {
list: [],
selectedValue: { title: '', value: '' },
};

export default Downshift;

```

**Issue faced:**

I have this dropdown used inside a Form that contains other input text boxes.
When opening form in edit mode, even though focus is not set on the dropdown, it reads out "ABC has been selected", [ABC being here the value set]
I fixed this in Voiceover by programmatically setting focus to first field in the form which happens be an input box, so that way Voiceover is now reading out the 1st focused input and isn't reading dropdown status anymore.

But on NVDA, even after this change, it is now first reading out the programmatically focused input, and again the dropdown value, even though no focus is set on dropdown.

Along with this, when i submit the form, by clicking submit button, it keeps on shouting "ABC has been selected", continuously 2-3 times, until the form is closed, even though value of dropdown hasn't changed OR the focus hasn't been set on dropdown.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.