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

Everything works fine, I am able to make a selection from drop-down list, however I cannot use backspace in input if I made a selection. I checked the official documentation(https://blueprintjs.com/docs/#select/suggest), it has the same issue in its example. Does anyone has the similar problems and solutions?

Joye
  • 21
  • 2

2 Answers2

0

The reason for this is once you type something in the field, it becomes an element of the page, so once you make a selection, it assumes you highlighted an element, so will assume you are trying to send the page a command for that selection (backspace is the default page-back command for most browsers).

Solution:

Create a new dialog input every time the user makes a selection, so the user can continue to make selections and edits.

Vendetta
  • 2,078
  • 3
  • 13
  • 31
0

It took forever.. post my solution here: be careful about two things: 1. query = {.....} needed to control the state of the input box 2. openOnKeyDown flag, it makes the delete not working

Joye
  • 21
  • 2