How To Achieve Minimum Character Length Feature In React Material-ui's Autocomplete

I want to implement 'min-character-length' feature in react material-ui autocomplete component. Below is the code . constructor(props) { super(props); this.state = {

Solution 1:

Maybe you can try something like popoverProps={{style: {display: 'none'}}} and change that with state.

In the source of AutoComplete it keeps the bool open in it's state. Your open prop will only be set to the state on componentDidMount and in componentWillReceiveProps. In componentWillReceiveProps it checks for this.props.open !== nextProps.open.

So it checks for false !== false in this case, which does not trigger the setState. I dont really understand why they added this property since it seems a bit useless. Maybe only to open it on the initial render.

The internal handleChange of AutoComplete which calls onUpdateInput will set the components state to open every time a character is added. Completely ignoring your open property.

EDIT:

This solution works better

<AutoComplete
  popoverProps={{
    open: this.state.shouldOpenList
  }}
  hintText={props.placeholder}
  dataSource={ props.data }
  dataSourceConfig={ {text: props.text, value: props.value}  }
  className="fabric-autocomplete form-control"
  disableFocusRipple={false}
  filter={filter}
  onNewRequest={ this.onNewRequest.bind(this) }
  onUpdateInput={ this.onUpdateInput.bind(this) }
/>

But you will also need to set open to false if the length is less than 3.