CODEWITHSUNDEEP
reactjsoffice-ui-fabric
Matt
Matt

Reputation: 76

Text input loses focus after changing to multiline

I am using Office Fabric UI React components and I am wanting to switch a text input to multi-line text if the user enters a comma character. I can get this part to work, however when the input switches to between single and multiline inputs, it loses focus. So if your typing in the text field and type comma char, the text field loses focus. I beleive under the hood, the textfield component from office fabric react re-renders a textarea in place of the input when I switch between the two, and the focus would be remaining on the replaced input and not switching automatically to the new text area. Any ideas how I can ensure the text field keeps its focus after toggling multi-line? I have tried setting the focus with the elements ref, but this doesn't work..

export class PhoneNumbers extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      phoneNumber: "",
      isMultipleNumbers: false
    };
    this.numbersInputRef = React.createRef();
    this.handleNumbersChange = this.handleNumbersChange.bind(this);
  }
  handleNumbersChange(event) {
    let numbers = event.target.value;
    this.setState({ isMultipleNumbers: numbers.indexOf(";") > 0 ? true : false });
    this.setState({
      phoneNumber: numbers
    });
  }

  render() {
    return (
      <TextField
        label="Phone Numbers"
        name="phoneNumber"
        value={this.state.phoneNumber}
        onKeyUp={this.handleNumbersChange}
        componentRef={input => (this.numbersInputRef = input)}
        multiline={this.state.isMultipleNumbers}
      />
    );
  }
}

Upvotes: 1

Views: 1234

Answers (1)

Matt
Matt

Reputation: 76

Adding the autoFocus prop to the component solves the issue. Thanks izb!

Upvotes: 1

Related Questions