Hello Friends đź‘‹,

Welcome To Infinitbility! ❤️

React tag input does not provide any specific key to show suggestion list on onClick but we can do using with minQueryLength and renderSuggestion

when we pass minQueryLength={0} in reactTags then it will show suggestion list on onClick but we can phase also the query selection issue that’s why we have to render custom suggestion style, where we can put code show only suggestion text.

To archive onClick suggestions, you have to pass below to props to your react tag input.

minQueryLength={0}
renderSuggestion = {({ text }) => <div>{text}</div>}

Here, you will complete an example to implement the onClick show suggestion list.

import React from 'react';
import ReactDOM from 'react-dom';
import { WithContext as ReactTags } from 'react-tag-input';

const KeyCodes = {
  comma: 188,
  enter: [10, 13],
};

const delimiters = [...KeyCodes.enter, KeyCodes.comma];

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            tags: [
                { id: "Thailand", text: "Thailand" },
                { id: "India", text: "India" }
             ],
            suggestions: [
                { id: 'USA', text: 'USA' },
                { id: 'Germany', text: 'Germany' },
                { id: 'Austria', text: 'Austria' },
                { id: 'Costa Rica', text: 'Costa Rica' },
                { id: 'Sri Lanka', text: 'Sri Lanka' },
                { id: 'Thailand', text: 'Thailand' }
             ]
        };
        this.handleDelete = this.handleDelete.bind(this);
        this.handleAddition = this.handleAddition.bind(this);
        this.handleDrag = this.handleDrag.bind(this);
    }

    handleDelete(i) {
        const { tags } = this.state;
        this.setState({
         tags: tags.filter((tag, index) => index !== i),
        });
    }

    handleAddition(tag) {
        this.setState(state => ({ tags: [...state.tags, tag] }));
    }

    handleDrag(tag, currPos, newPos) {
        const tags = [...this.state.tags];
        const newTags = tags.slice();

        newTags.splice(currPos, 1);
        newTags.splice(newPos, 0, tag);

        // re-render
        this.setState({ tags: newTags });
    }

    render() {
        const { tags, suggestions } = this.state;
        return (
            <div>
                <ReactTags tags={tags}
                    suggestions={suggestions}
                    handleDelete={this.handleDelete}
                    handleAddition={this.handleAddition}
                    handleDrag={this.handleDrag}
                    delimiters={delimiters} 
                    minQueryLength={0}
                    renderSuggestion = {({ text }) => <div>{text}</div>}
                />
                    
            </div>
        )
    }
};

ReactDOM.render(<App />, document.getElementById('app'));

Thanks for reading…