（React-redux）BlueprintJs Suggest 在进行选择后不能在输入中退格

Question

class MySuggest extends React.Component<Props, State> {
....
....
private handleClick = (item: string, event: SyntheticEvent<HTMLElement, Event>) => {
    event.stopPropagation();
    event.preventDefault();
    this.props.onChange(item);
  }

public render() {
    const { loading, value, error} = this.props;
    const { selectValue } = this.state;
    const loadingIcon = loading ? <Icon icon='repeat'></Icon> : undefined;
    let errorClass = error? 'error' : '';

    const inputProps: Partial<IInputGroupProps> = {
      type: 'search',
      leftIcon: 'search',
      placeholder: 'Enter at least 2 characters to search...',
      rightElement: loadingIcon,
      value: selectValue,
    };

    return (
      <FormGroup>
         <Suggest
          disabled={false}
          onItemSelect={this.handleClick}
          inputProps={inputProps}
          items={value}
          fill={true}
          inputValueRenderer={(item) => item.toString()}
          openOnKeyDown={true}
          noResults={'no results'}
          onQueryChange={(query, event) => {
            if (!event) {
              this.props.fetchByUserInput(query.toUpperCase());
            }
          }}
          scrollToActiveItem
          itemRenderer={(item, { modifiers, handleClick }) => (
            <MenuItem
              active={modifiers.active}
              onClick={() => this.handleClick(item) }
              text={item}
              key={item}
            />
          )}
         />
      </FormGroup>
    );
  }
}

一切正常，我可以从下拉列表中进行选择，但是如果我进行了选择，我将无法在输入中使用退格键。我查看了官方文档（https://blueprintjs.com/docs/#select/suggest），它的示例中有同样的问题。有没有人有类似的问题和解决方案？

Answer 1

这样做的原因是，一旦您在该字段中键入内容，它就会成为页面的一个元素，因此一旦您做出选择，它就会假设您突出显示了一个元素，因此会假设您正在尝试发送页面该选择的命令（退格键是大多数浏览器的默认翻页命令）。

Solution:

每次用户进行选择时创建一个新的 dialog 输入，以便用户可以继续进行选择和编辑。

Answer 2

它花了很长时间.. post 我的解决方案在这里：注意两件事： 1. query = {.......} 需要控制输入框的状态 2. openOnKeyDown 标志，它使删除不起作用

（React-redux）BlueprintJs Suggest 在进行选择后不能在输入中退格

(React-redux) BlueprintJs Suggest cannot backspace in input after making a selection

web-frontend

reactjs

redux

react-redux

blueprintjs