(React-redux) Blueprint Js Suggest не может возвратиться назад при вводе после выбора - PullRequest
Новая
       22

(React-redux) Blueprint Js Suggest не может возвратиться назад при вводе после выбора

2 голосов
/ 21 февраля 2020 
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>
    );
  }
}

Все работает отлично, я могу сделать выбор из выпадающего списка, однако я не могу использовать клавишу Backspace при вводе, если я сделал выбор. Я проверил официальную документацию (https://blueprintjs.com/docs/#select / предложить ), у нее та же проблема в своем примере. У кого-нибудь есть подобные проблемы и решения?

Ответы [ 2 ]

0 голосов
/ 25 февраля 2020

Это заняло целую вечность .. опубликуйте мое решение здесь: будьте осторожны с двумя вещами: 1. query = {.....} необходим для контроля состояния поля ввода 2. флаг openOnKeyDown, делает удаление не работающим

0 голосов
/ 21 февраля 2020

Причина этого в том, что когда вы что-то вводите в поле, оно становится элементом страницы, поэтому после того, как вы сделаете выделение, оно предполагает, что вы выделили элемент, поэтому предположим, что вы пытаетесь отправить странице команду для этого выбора (backspace является командой возврата страницы по умолчанию для большинства браузеров).

Решение:

Создание нового ввода dialog каждый раз, когда пользователь делает выбор, так что пользователь может продолжать делать выбор и редактирование.

...