- const { commandInput, input, meta } = this.props;
- return <ChipsInput
- deletable={!commandInput.disabled}
- orderable={!commandInput.disabled}
- disabled={commandInput.disabled}
- values={input.value}
- onChange={this.handleChange}
- handleFocus={input.onFocus}
- createNewValue={identity}
- inputComponent={Input}
- chipsClassName={classes.chips}
- pattern={/[_a-z][-0-9_a-z]*/ig}
- inputProps={{
- error: meta.error,
- }} />;
+ const { commandInput, input, meta, hasPartialGroupInput } = this.props;
+ return <>
+ <ChipsInput
+ deletable={!commandInput.disabled}
+ orderable={!commandInput.disabled}
+ disabled={commandInput.disabled}
+ values={input.value}
+ onChange={this.handleChange}
+ handleFocus={input.onFocus}
+ createNewValue={identity}
+ inputComponent={Input}
+ chipsClassName={classes.chips}
+ pattern={/[_a-z][-0-9_a-z]*/ig}
+ onPartialInput={this.props.setPartialGroupInput}
+ inputProps={{
+ error: meta.error || hasPartialGroupInput,
+ }} />
+ <FormHelperText className={classnames([classes.partialInputHelper, ...(hasPartialGroupInput ? [classes.partialInputHelperVisible] : [])])}>
+ Press enter to complete group name
+ </FormHelperText>
+ </>;