Input field (using downshift) is clearing the entered data when click on div other than submit and input field

Question

The input field is clearing the entered input when I click on any thing in a div other than a submit button and input field. How can I resolve that? Entered input should be present until the submit is happen. I have a div with the input field shown below and check boxes and submit button. There is nothing wrong with check boxes and submit button.

return(
    <Downshift
        onChange={selection => this.setState({input: selection})}
        itemToString={item => (item ? item.first_name : '')}
    >
    {({
        getInputProps,
        getItemProps,
        getMenuProps,
        isOpen,
        inputValue,
        highlightedIndex,
        selectedItem,
    }) => (
            <div className={classes.container}>
                {this.props.disabled ?
                    <TextField
                        disabled
                        label="Name"
                        fullWidth
                        inputProps={{
                            ...getInputProps(),
                            ref: node => {
                                popperNode = node;
                            }
                        }}
                        // InputProps={{ ...getInputProps() }}
                    />
                    : 
                    <TextField
                        label="Name"
                        fullWidth
                        inputProps={{ 
                            ...getInputProps(),
                            ref: node => {
                                popperNode = node;
                            }
                        }}

                    />
                }
                <Popper open={isOpen} anchorEl={popperNode} style={{zIndex:2000}}>
                    <div {...(isOpen ? getMenuProps({}, { suppressRefError: true }) : {})}>
                    {inputValue ? this.props.setInputValue(inputValue): null}
                        <Paper
                            style={{ marginTop: 8, width: popperNode ? popperNode.clientWidth : null }}
                            // className={classes.paper}
                            square>
                            { this.state.suggestions
                                .filter(item => !inputValue || item.first_name.includes(inputValue))
                                .map((item, index) => (
                                    <MenuItem
                                        component="div"
                                        {...getItemProps({
                                            key: item.person_id,
                                            index,
                                            item,
                                        })}
                                    > 
                                    <Typography color="primary">{item.first_name + ' ('+item.person_id +')'} </Typography>
                                    </MenuItem>
                                ))}
                        </Paper>
                    </div>
                </Popper>
            </div>
        )}
    </Downshift>
);

Answer 1

The input is empty because itemToString={item => (item ? item.first_name : '')} in Downshift component.

The value in second condition (else case) should be value from TextField.

Here's my code to keep typing value for Downshift:

export class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputValue: '' };
  }

  onInputValueChange = (inputValue: string) => {
    this.setState({ inputValue });
  }

  render() {
    // This line to get current value
    const { inputValue } = this.state;

    return (
      <Downshift
        onChange={selection => this.onSelectItem(selection)}
        onInputValueChange={this.onInputValueChange}
        // Mapping value from ref to TextInput
        itemToString={item => (item ? item.value : inputValue)}
      >
        {({
          getInputProps,
          getItemProps,
          getMenuProps,
          isOpen,
          highlightedIndex,
          selectedItem
        }) => (
          <div>
            <TextField
              {...getInputProps()}
            />
          ... // Other component if you want
          </div>
      </Downshift>
    )
  }
}

Note that new changes with onInputValueChange callback on <Downshift>

Hope this help!