Use autocomplete.js lib to replace tag data list

packages/app-clipper/popup/package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "@babel/core": "7.8.4",
         "@svgr/webpack": "4.3.3",
+        "@tarekraafat/autocomplete.js": "github:tarekraafat/autocomplete.js",
         "@typescript-eslint/eslint-plugin": "^2.10.0",
         "@typescript-eslint/parser": "^2.10.0",
         "babel-eslint": "10.0.3",
@@ -1864,6 +1865,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/@tarekraafat/autocomplete.js": {
+      "version": "10.2.6",
+      "resolved": "git+ssh://git@github.com/tarekraafat/autocomplete.js.git#d90a648315b378c8b872ec3a630ca00811a6a2d7",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/autocompletejs"
+        },
+        {
+          "type": "liberapay",
+          "url": "https://liberapay.com/TarekRaafat"
+        },
+        {
+          "type": "patreon",
+          "url": "https://patreon.com/TarekRaafat"
+        }
+      ],
+      "license": "Apache-2.0"
+    },
     "node_modules/@types/anymatch": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
@@ -23370,6 +23390,10 @@
         "loader-utils": "^1.2.3"
       }
     },
+    "@tarekraafat/autocomplete.js": {
+      "version": "git+ssh://git@github.com/tarekraafat/autocomplete.js.git#d90a648315b378c8b872ec3a630ca00811a6a2d7",
+      "from": "@tarekraafat/autocomplete.js@tarekraafat/autocomplete.js"
+    },
     "@types/anymatch": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",

packages/app-clipper/popup/package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@babel/core": "7.8.4",
     "@svgr/webpack": "4.3.3",
+    "@tarekraafat/autocomplete.js": "github:tarekraafat/autocomplete.js",
     "@typescript-eslint/eslint-plugin": "^2.10.0",
     "@typescript-eslint/parser": "^2.10.0",
     "babel-eslint": "10.0.3",

packages/app-clipper/popup/src/App.css

@@ -174,4 +174,12 @@ body {
 
 .App .StatusBar .ServerStatus .Help {
 	margin-left: 5px;
-}
+}
+
+.App .tagAutoComplete {
+	padding: 4px 8px;
+	height: auto;
+	border-radius: 0;
+	color: black;
+	border-color: gray;
+}

packages/app-clipper/popup/src/App.js

@@ -3,6 +3,8 @@ import './App.css';
 import led_red from './led_red.png';
 import led_green from './led_green.png';
 import led_orange from './led_orange.png';
+import autoComplete from '@tarekraafat/autocomplete.js';
+import '@tarekraafat/autocomplete.js/dist/css/autoComplete.css';
 
 const { connect } = require('react-redux');
 const { bridge } = require('./bridge');
@@ -183,6 +185,31 @@ class AppComponent extends Component {
 		await bridge().tabsExecuteScript({ file: '/content_scripts/index.js' });
 	}
 
+	initTagAutoComplete() {
+		const waitForTagElementIID = setInterval(() => {
+			if (!document.getElementsByClassName('tagAutoComplete').length) return;
+			if (!this.props.tagsLoaded) return;
+
+			clearInterval(waitForTagElementIID);
+
+			const config = {
+				// Doesn't work - it will only apply it to one of the field
+				selector: '.tagAutoComplete',
+				placeHolder: 'Enter tag...',
+				data: {
+					src: this.props.tags.map(t => t.title),
+				},
+				resultItem: {
+					highlight: {
+						render: true,
+					},
+				},
+			};
+
+			new autoComplete(config);
+		}, 100);
+	}
+
 	async componentDidMount() {
 		bridge().onReactAppStarts();
 
@@ -219,6 +246,8 @@ class AppComponent extends Component {
 		}
 
 		bridge().sendCommandToActiveTab({ name: 'isProbablyReaderable' });
+
+		this.initTagAutoComplete();
 	}
 
 	componentDidUpdate() {
@@ -434,6 +463,13 @@ class AppComponent extends Component {
 					<datalist id="tags">
 						{tagDataListOptions}
 					</datalist>
+
+					<input class="tagAutoComplete" type="search" dir="ltr" spellCheck="false" autoCorrect="off" autoComplete="off" autoCapitalize="off" maxLength="2048" tabIndex="1" />
+
+					<br/>
+
+					<input class="tagAutoComplete" type="search" dir="ltr" spellCheck="false" autoCorrect="off" autoComplete="off" autoCapitalize="off" maxLength="2048" tabIndex="1" />
+
 				</div>
 				{ warningComponent }
 				{ previewComponent }
@@ -452,6 +488,7 @@ const mapStateToProps = (state) => {
 		clipperServer: state.clipperServer,
 		folders: state.folders,
 		tags: state.tags,
+		tagsLoaded: state.tagsLoaded,
 		selectedFolderId: state.selectedFolderId,
 		isProbablyReaderable: state.isProbablyReaderable,
 		authStatus: state.authStatus,

packages/app-clipper/popup/src/bridge.js

@@ -428,6 +428,9 @@ class Bridge {
 		}
 
 		const json = await response.json();
+
+		console.info('Popup: Response:', json);
+
 		return json;
 	}
 

packages/app-clipper/popup/src/index.js

@@ -16,6 +16,7 @@ const defaultState = {
 	},
 	folders: [],
 	tags: [],
+	tagsLoaded: false,
 	selectedFolderId: null,
 	env: 'prod',
 	isProbablyReaderable: true,
@@ -76,6 +77,7 @@ function reducer(state = defaultState, action) {
 
 		newState = Object.assign({}, state);
 		newState.tags = action.tags;
+		newState.tagsLoaded = true;
 
 	} else if (action.type === 'SELECTED_FOLDER_SET') {