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
- 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 = (
-
{item.title}
{selectedItem?.value === item.value && (
)}
{list.map((item, index) => (
))}
);
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
Assessment
This issue has not been assessed yet.