I am running into trouble trying to set the input ref value on a blueprintjs Select component. Visually, the component works fine but I need the current highlighted option to be read by a screen reader. For some reason the screenreader(NVDA) reads the last selected/highlighted value instead of the current value.
Currently my code simply updates the input value with the highlighted option. Here is my code:
renderItem = (item, { handleClick, modifiers, query }) => {
if (!modifiers.matchesPredicate) {
return null;
}
const text = `${item.attributes.project_name}`;
return (
<MenuItem
active={modifiers.active}
disabled={modifiers.disabled}
key={item.attributes.project_name}
onClick={handleClick}
text={highlightText(text, query)}
/>
);
};
filterItem = (query, item) => {
return `${item.attributes.project_name}`.toLowerCase().indexOf(query.toLowerCase()) >= 0;
};
setActiveItem = (item) => {
let activeItem = item && item.attributes ? item.attributes.project_name : null
this.inputElement ? this.inputElement.value = activeItem : null
this.setState({activeItem})
};
render() {
return (
<Box style={{width: '100%', marginBottom: '10px'}}>
{this.props.projects ?
<Select
itemPredicate={this.filterItem}
itemRenderer={this.renderItem}
items={this.props.projects}
onActiveItemChange={this.setActiveItem}
inputProps={{value: this.state.activeItem,
inputRef: el => this.inputElement = el}}
noResults={<MenuItem disabled={true} text="No results."/>}
onItemSelect={this.props.onProjectSelect}
popoverProps={{minimal: true, popoverClassName: 'search-popover'}}
>
<Button text="Select a Project" icon="projects" style={{width: '225px'}}
rightIcon="double-caret-vertical"/>
</Select>
: null}
</Box>
);
}
