Material-table: Adding textfield in toolbar only allows single char typing

[blackbadgerltd]

Describe the bug
A clear and concise description of what the bug is.

When adding a textfield to the toolbar component, typing into it allows allows 1 character before it renders the whole component and focus is lost.

To Reproduce
Steps to reproduce the behavior:

1. Add a textfield to the toolbar component
   Link it’s value to this.state and attach a change handler
   Run
   Type into the text field

Expected behavior
Text should be input as typed, beyond 1 char, and maintain focus

Desktop (please complete the following information):

• os 10.14.3
  Chrome 58

[mbrn]

Actually this is not about material-table. If you use functional component to override toolbar it will rerender your textfield on every change. So it will be another textfield and loses focus.

But you can use it in a component like this.

 <MaterialTable
                  ref={this.tableRef}
                  columns={this.state.columns}
                  data={this.state.data}
                  title="Demo Title"
                  options={{
                  }}
                  components={{
                    Toolbar: NewBar
                  }}
                />

class NewBar extends React.Component {
  state = {
    text: 'Abc'
  }

  render() {
    return (
      <div>
        <MTableToolbar {...this.props} />
        <TextField value={this.state.text}
          onChange={event => {
            this.setState({ text: event.target.value });
          }}
        />
      </div>
    )
  }
}

[Hatko]

@mbrn any ideas on how I can pass some props from MaterialTable parent component to NewBar from your example?

[osky9913]

@Hatko did you find any solution ?

[nmkname]

@osky9913, just use function expression or wrapper component
Toolbar: (props) => <Newbar {...props} yourProp={yourProp} />