- handleKeyPress = ({ key }: React.KeyboardEvent<HTMLInputElement>) => {
- if (key === 'Enter') {
- this.createNewValue();
- } else if (key === 'Backspace') {
- this.deleteLastValue();
+ filler = React.createRef<HTMLDivElement>();
+ timeout = -1;
+
+ setText = (event: React.ChangeEvent<HTMLInputElement>) => {
+ this.setState({ text: event.target.value }, () => {
+ // Update partial input status
+ this.props.onPartialInput && this.props.onPartialInput(this.state.text !== '');
+
+ // If pattern is provided, check for delimiter
+ if (this.props.pattern) {
+ const matches = this.state.text.match(this.props.pattern);
+ // Only create values if 1 match and the last character is a delimiter
+ // (user pressed an invalid character at the end of a token)
+ // or if multiple matches (user pasted text)
+ if (matches &&
+ (
+ matches.length > 1 ||
+ (matches.length === 1 && !this.state.text.endsWith(matches[0]))
+ )) {
+ this.createNewValue(matches.map((i) => i));
+ }
+ }
+ });