[select] update inputProps documentation

[tbalsys]

Prop inputProps in components Select and Suggest doesn't work.

Environment

• @blueprintjs/select 3.2.0
• Chromium 69.0.3497.100 (Official Build) Arch Linux (64-bit)

Steps to reproduce

<Suggest
  items={Films.TOP_100_FILMS}
  itemRenderer={renderFilm}
  inputValueRenderer={film => film.title}
  onItemSelect={this.handleValueChange}
  noResults={<MenuItem disabled text="No results." />}
  inputProps={{ value: query, onChange: this.handleChange }}
>
  <Button text={buttonText} rightIcon="caret-down" />
</Suggest>

Actual behavior

Method this.handleChange gets never executed.

Expected behavior

Providing prop inputProps should make component controlled.

Possible solution

In suggest.tsx in method renderQueryList:

                <InputGroup
                    {...inputProps}
                    placeholder={isOpen && selectedItemText ? selectedItemText : placeholder}
                    inputRef={this.refHandlers.input}
                    onChange={listProps.handleQueryChange}
                    onFocus={this.handleInputFocus}
                    onKeyDown={this.getTargetKeyDownHandler(handleKeyDown)}
                    onKeyUp={this.getTargetKeyUpHandler(handleKeyUp)}
                    value={isOpen ? listProps.query : selectedItemText}
                />

{...inputProps} should be moved to the end, so that it overrides value and onChange props.

[giladgray]

@tomaszbalsys this is by design and mentioned in the docs:

[tbalsys]

@giladgray Thank you for your answer. In that case the documentation needs to be updated.

https://blueprintjs.com/docs/#select/select-component:

https://blueprintjs.com/docs/#select/suggest:

[giladgray]

ah fair enough.

[tbalsys]

Another issue is that onQueryChange gets executed 3 times for one keypress.

In queryList.tsx:

1. handleQueryChange → setQuery → onQueryChange
2. handleQueryChange → onQueryChange
3. componentWillReceiveProps → setQuery → onQueryChange

I created the component like this:

        <Suggest
          items={Films.TOP_100_FILMS}
          itemRenderer={renderFilm}
          inputValueRenderer={film => film.title}
          onItemSelect={this.handleValueChange}
          query={query}
          onQueryChange={this.handleChange}
        >
          <Button text={buttonText} rightIcon="caret-down" />
        </Suggest>

[giladgray]

@tomaszbalsys please do not conflate this issue with others. file a separate issue for separate concerns.

edit: but it looks like you want #2983

[EchoZhaoH]

@giladgray Is this a bug? Are you ready to fix it?

[giladgray]

@EchoZW i'm certainly ready for it to be fixed!

[EchoZhaoH]

@giladgray Excuse me, when are you going to fix this problem?
and I think you should add a bug label to this issue.