Question

尝试在blueprintjs Select组件上设置输入ref值时遇到麻烦。在外观上，该组件工作正常，但我需要屏幕阅读器读取当前突出显示的选项。由于某种原因，屏幕阅读器（NVDA）会读取上一个选定/突出显示的值，而不是当前值。

当前，我的代码只是使用突出显示的选项来更新输入值。这是我的代码：

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

Answer 1

我不认为Blueprintjs可以做到这一点。我建议使用styled-components。您可以设置select的打开状态的样式，并将onFocus应用于当前悬停的元素。

设置屏幕阅读器的输入参考值

1 个答案: