Navigate back to the homepage

How to show suggestion on click in react tag input

Infinitbility
React
September 10th, 2021 · 1 min read
How to show suggestion on click in react tag input

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.

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

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

1import React from 'react';
2import ReactDOM from 'react-dom';
3import { WithContext as ReactTags } from 'react-tag-input';
4
5const KeyCodes = {
6 comma: 188,
7 enter: [10, 13],
8};
9
10const delimiters = [...KeyCodes.enter, KeyCodes.comma];
11
12class App extends React.Component {
13 constructor(props) {
14 super(props);
15
16 this.state = {
17 tags: [
18 { id: "Thailand", text: "Thailand" },
19 { id: "India", text: "India" }
20 ],
21 suggestions: [
22 { id: 'USA', text: 'USA' },
23 { id: 'Germany', text: 'Germany' },
24 { id: 'Austria', text: 'Austria' },
25 { id: 'Costa Rica', text: 'Costa Rica' },
26 { id: 'Sri Lanka', text: 'Sri Lanka' },
27 { id: 'Thailand', text: 'Thailand' }
28 ]
29 };
30 this.handleDelete = this.handleDelete.bind(this);
31 this.handleAddition = this.handleAddition.bind(this);
32 this.handleDrag = this.handleDrag.bind(this);
33 }
34
35 handleDelete(i) {
36 const { tags } = this.state;
37 this.setState({
38 tags: tags.filter((tag, index) => index !== i),
39 });
40 }
41
42 handleAddition(tag) {
43 this.setState(state => ({ tags: [...state.tags, tag] }));
44 }
45
46 handleDrag(tag, currPos, newPos) {
47 const tags = [...this.state.tags];
48 const newTags = tags.slice();
49
50 newTags.splice(currPos, 1);
51 newTags.splice(newPos, 0, tag);
52
53 // re-render
54 this.setState({ tags: newTags });
55 }
56
57 render() {
58 const { tags, suggestions } = this.state;
59 return (
60 <div>
61 <ReactTags tags={tags}
62 suggestions={suggestions}
63 handleDelete={this.handleDelete}
64 handleAddition={this.handleAddition}
65 handleDrag={this.handleDrag}
66 delimiters={delimiters}
67 minQueryLength={0}
68 renderSuggestion = {({ text }) => <div>{text}</div>}
69 />
70
71 </div>
72 )
73 }
74};
75
76ReactDOM.render(<App />, document.getElementById('app'));

Thanks for reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Tutorials

React Native

Categories

More articles from Infinitbility

How to get key and value from json object in javascript

How to get key and value from json object in javascript

Example get key and value both from object in javascript, React, React Native, vue, node, deno, typescript and all javascript framework.

September 9th, 2021 · 1 min read
How to disable typing in React DatePicker

How to disable typing in React DatePicker

Example of disable typing and pasting in React DatePicker.

September 8th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]