How to set cursor position in React Input Mask

By default, when the React Input Mask is focused, the entire mask is selected. You can customize this using one of the following methods:

• Setting cursor position at the start of the React Input Mask
• Setting cursor position at the end of the React Input Mask
• Setting cursor position at a specific location in the React Input Mask

When a React Input Mask is filled with all mask characters, selectionStart and selectionEnd are set to 0 instead of the input element’s value length. This is the default behavior of the HTML5 input element.

The following example demonstrates these cursor position cases using the focus event.

index.jsx

import { MaskedTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.onfocus = this.onfocus.bind(this);
        this.onfocus1 = this.onfocus1.bind(this);
        this.onfocus2 = this.onfocus2.bind(this);
    }
    onfocus(args) {
        // sets cursor position at start of MaskedTextBox
        args.selectionEnd = args.selectionStart = 0;
    }
    onfocus1(args) {
        // sets cursor position at end of MaskedTextBox
        args.selectionStart = args.selectionEnd = args.maskedValue.length;
    }
    onfocus2(args) {
        // sets cursor at specified position
        args.selectionStart = 3;
        args.selectionEnd = 3;
    }
    render() {
        return (<div>
          <br /><MaskedTextBoxComponent name="mask_value1" placeholder="Default cursor position" mask="00000-00000" value="93828-32132" floatLabelType='Always'/>
          <MaskedTextBoxComponent name="mask_value2" placeholder="Cursor positioned at start" mask="00000-00000" value="83929-4342" floatLabelType='Always' focus={this.onfocus}/>
          <MaskedTextBoxComponent name="mask_value3" placeholder="Cursor positioned at end" mask="00000-00000" value="83929-3213" floatLabelType='Always' focus={this.onfocus1}/>
          <MaskedTextBoxComponent name="mask_value4" placeholder="Cursor at specified position" mask="[phone]" value="234-432-432" floatLabelType='Always' focus={this.onfocus2}/>
        </div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('masktextbox'));

index.tsx

import { MaskedTextBoxComponent, MaskFocusEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
   constructor(props: any) {
    super(props);
    this.onfocus = this.onfocus.bind(this);
    this.onfocus1 = this.onfocus1.bind(this);
    this.onfocus2 = this.onfocus2.bind(this);
  }
  public onfocus(args: MaskFocusEventArgs) {
      // sets cursor position at start of MaskedTextBox
      args.selectionEnd= args.selectionStart = 0;
  }
  public onfocus1(args: MaskFocusEventArgs) {
      // sets cursor position at end of MaskedTextBox
      args.selectionStart=args.selectionEnd = args.maskedValue.length;
  }
  public onfocus2(args: MaskFocusEventArgs) {
      // sets cursor at specified position
      args.selectionStart = 3;
      args.selectionEnd = 3;
  }
  public render() {
      return (
        <div>
          <br/><MaskedTextBoxComponent name="mask_value1" placeholder="Default cursor position" mask= "00000-00000" value="93828-32132" floatLabelType='Always'/>
          <MaskedTextBoxComponent name="mask_value2" placeholder="Cursor positioned at start" mask= "00000-00000" value="83929-4342" floatLabelType='Always' focus={this.onfocus}/>
          <MaskedTextBoxComponent name="mask_value3" placeholder="Cursor positioned at end" mask= "00000-00000" value="83929-3213" floatLabelType='Always' focus={this.onfocus1}/>
          <MaskedTextBoxComponent name="mask_value4" placeholder="Cursor at specified position" mask= "[phone]" value="234-432-432" floatLabelType='Always' focus={this.onfocus2}/>
        </div>
      );
  }
};
ReactDOM.render(<App />, document.getElementById('masktextbox'));