fix: match-sorter for a better drop-down sorting

fix: autocoplete inerOnBlur
fix: revert autocomplete limit api
fix: no need for custom filterOptions
fix: eslint

new-lamassu-admin/package-lock.json

@@ -15831,6 +15831,30 @@
         "unquote": "^1.1.0"
       }
     },
+    "match-sorter": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-4.2.0.tgz",
+      "integrity": "sha512-oEvLn8R+a30YZ9l5XdCTkYQuLsOs8frxEqQTAuxoqkQx/qV5pQpx/NqAWvJ5xbYecqfXoF/ZevaIS1+NkbRymg==",
+      "requires": {
+        "@babel/runtime": "^7.10.5",
+        "remove-accents": "0.4.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.5.tgz",
+          "integrity": "sha512-otddXKhdNn7d0ptoFRHtMLa8LqDxLYwTjB4nYgM1yy5N6gU/MUf8zqyyLltCH3yAVitBzmwK4us+DD0l/MauAg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.7",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+        }
+      }
+    },
     "material-colors": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
@@ -22230,6 +22254,11 @@
       "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
       "dev": true
     },
+    "remove-accents": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
+      "integrity": "sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U="
+    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",

new-lamassu-admin/package.json

@@ -24,6 +24,7 @@
     "graphql-tag": "^2.10.3",
     "jss-plugin-extend": "^10.0.0",
     "libphonenumber-js": "^1.7.50",
+    "match-sorter": "^4.2.0",
     "moment": "2.24.0",
     "qrcode.react": "0.9.3",
     "ramda": "^0.26.1",

new-lamassu-admin/src/components/inputs/base/Autocomplete.js

@@ -1,13 +1,12 @@
-import MAutocomplete, {
+import MAutocomplete from '@material-ui/lab/Autocomplete'
-  createFilterOptions
+import sort from 'match-sorter'
-} from '@material-ui/lab/Autocomplete'
 import * as R from 'ramda'
 import React from 'react'
 
 import TextInput from './TextInput'
 
 const Autocomplete = ({
-  limit = 5,
+  limit = 5, // set limit = null for no limit
   options,
   label,
   valueProp,
@@ -43,6 +42,12 @@ const Autocomplete = ({
     onChange(evt, rValue)
   }
 
+  const filterOptions = (options, { inputValue }) =>
+    sort(options, inputValue, { keys: ['code', 'display'] }).slice(
+      0,
+      R.defaultTo(undefined)(limit)
+    )
+
   return (
     <MAutocomplete
       options={options}
@@ -51,7 +56,7 @@ const Autocomplete = ({
       onChange={innerOnChange}
       getOptionLabel={getLabel}
       forcePopupIcon={false}
-      filterOptions={createFilterOptions({ ignoreAccents: true, limit })}
+      filterOptions={filterOptions}
       openOnFocus
       autoHighlight
       disableClearable

new-lamassu-admin/src/components/inputs/formik/Autocomplete.js

@@ -8,18 +8,23 @@ const AutocompleteFormik = ({ options, ...props }) => {
   const [open, setOpen] = useState(false)
 
   const { name, onBlur, value } = props.field
-  const { touched, errors, setFieldValue } = props.form
+  const { touched, errors, setFieldValue, setFieldTouched } = props.form
   const error = !!(touched[name] && errors[name])
   const { initialValues } = useFormikContext()
 
   const innerOptions =
     R.type(options) === 'Function' ? options(initialValues) : options
 
+  const innerOnBlur = event => {
+    name && setFieldTouched(name, true)
+    onBlur && onBlur(event)
+  }
+
   return (
     <Autocomplete
       name={name}
       onChange={(event, item) => setFieldValue(name, item)}
-      onBlur={onBlur}
+      onBlur={innerOnBlur}
       value={value}
       error={error}
       open={open}

new-lamassu-admin/src/pages/Locales/helper.js

@@ -1,4 +1,3 @@
-import { createFilterOptions } from '@material-ui/lab/Autocomplete'
 import * as R from 'ramda'
 import * as Yup from 'yup'
 
@@ -94,9 +93,7 @@ const allFields = getData => {
         valueProp: 'code',
         getLabel: R.path(['code']),
         multiple: true,
-        filterOptions: createFilterOptions({
+        limit: null
-          stringify: option => `${option.code} ${option.display}`
-        })
       }
     }
   ]