Задайте значение Ref ввода для программы чтения с экрана - PullRequest
Новая
       34

Задайте значение Ref ввода для программы чтения с экрана

0 голосов
/ 26 октября 2018

У меня проблемы с попыткой установить значение ref для компонента blueprintjs Select. Визуально компонент работает нормально, но мне нужна текущая выделенная опция для чтения с экрана. По какой-то причине программа чтения с экрана (NVDA) читает последнее выбранное / выделенное значение вместо текущего значения.

enter image description here

В настоящее время мой код просто обновляет значение ввода с выделенной опцией. Вот мой код: 

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>
    );
}

1 Ответ

0 голосов
/ 26 октября 2018

Я не думаю, что у Blueprintjs есть прямой способ сделать это.Я бы рекомендовал использовать styled-components .Вы можете стилизовать открытое состояние выбора и применить onFocus к текущему элементу наведения.

...