olahol / react-tagsinput

Highly customizable React component for inputing tags.
MIT License
1.35k stars 233 forks source link

how can I replace <input> with <textarea> ? #181

Closed olya-sidorchenko closed 2 years ago

olya-sidorchenko commented 6 years ago

`class AutofillTag extends Component {

constructor(...args) {
    super(...args);
    this.handleChange = ::this.handleChange;
    this.autocompleteRenderInput = ::this.autocompleteRenderInput;
    this.defaultRenderLayout = ::this.defaultRenderLayout;
    this.state = {tags: []};
}

handleChange(tags) {
    this.setState({tags});
}

autocompleteRenderInput({addTag, ...props}) {
    const handleOnChange = (e, {method}) => {
        if (method === 'enter') {
            e.preventDefault();
        } else {
            props.onChange(e);
        }
    };

    const inputValue = (props.value && props.value.trim().toLowerCase()) || '';
    const inputLength = inputValue.length;
    const suggestions = states.filter(state => {
        return state.name.toLowerCase().slice(0, inputLength) === inputValue;
    });
    return (
        <Autosuggest
            ref={props.ref}
            suggestions={suggestions}
            shouldRenderSuggestions={value => value && value.trim().length > 0}
            getSuggestionValue={suggestion => suggestion.name}
            renderSuggestion={suggestion => <span>{suggestion.name}</span>}
            inputProps={{...props, onChange: handleOnChange}}
            onSuggestionSelected={(e, {suggestion}) => {
                addTag(suggestion.name);
            }}
            onSuggestionsClearRequested={() => {}}
            onSuggestionsFetchRequested={() => {}}
            theme={theme}
            highlightFirstSuggestion
        />
    );
}
defaultRenderLayout () {
    return (
        <span>
            <textarea/>
        </span>
    )
}

render() {
    const tagProps = {className: styles.tags, classNameRemove: styles.tags_remove};
    const inputProps = {className: styles.inputTag, placeholder: ''};
    return (
        <div id="app" className={styles.root}>
            <h4>AutoFillTag</h4>
            <TagsInput
                value={this.state.tags}
                onChange={this.handleChange}
                tagProps={tagProps}
                inputProps={inputProps}
                className={styles.tags_container}
                focusedClassName={styles.focused}
                renderInput={this.autocompleteRenderInput}
            />
        </div>
    );
}

}

export default AutofillTag; `