Dropdown with custom input in material ui

Question

Is it possible to have a dropdown field but being able to add a value other than the ones suggested by the dropdown?

Something like the autocomplete field with showAllItems set to true and without the auto-complete functionality

Edit:

What I want to achieve is just submit the form with the custom value or the user selection from the dropdown (according to the user's choice)

Answer 1

Use the onNewRequest attribute. According to https://github.com/callemall/material-ui/blob/master/src/auto-complete.jsx:

const AutoComplete = React.createClass({

...

render() {

...

return (
  <div style={mergedRootStyles} onKeyDown={this._handleKeyDown}>
    <div style={{width: '100%',}}>
      <TextField
        {...other}
        ref="searchTextField"
        value={this.state.searchText}
        onEnterKeyDown={() => {
          setTimeout(() => {
            this._close();
          }, this.props.touchTapCloseDelay);
          this.props.onNewRequest(this.state.searchText);
        }}

...

the function passed with this attribute is called everytime the user presses Enter, so you can just handle submitting the input inside of that function.

Answer 2

You're on the right track with mui autocomplete. Try using the freeSolo option

https://mui.com/components/autocomplete/#free-solo