diff --git a/new-lamassu-admin/package-lock.json b/new-lamassu-admin/package-lock.json index ea8ab85a..6716ba43 100644 --- a/new-lamassu-admin/package-lock.json +++ b/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", diff --git a/new-lamassu-admin/package.json b/new-lamassu-admin/package.json index ba5369b1..0ee85269 100644 --- a/new-lamassu-admin/package.json +++ b/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", diff --git a/new-lamassu-admin/src/components/inputs/base/Autocomplete.js b/new-lamassu-admin/src/components/inputs/base/Autocomplete.js index 4f9b31c5..47ca5702 100644 --- a/new-lamassu-admin/src/components/inputs/base/Autocomplete.js +++ b/new-lamassu-admin/src/components/inputs/base/Autocomplete.js @@ -1,13 +1,12 @@ -import MAutocomplete, { - createFilterOptions -} from '@material-ui/lab/Autocomplete' +import MAutocomplete from '@material-ui/lab/Autocomplete' +import sort from 'match-sorter' 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 ( { 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 ( setFieldValue(name, item)} - onBlur={onBlur} + onBlur={innerOnBlur} value={value} error={error} open={open} diff --git a/new-lamassu-admin/src/pages/Locales/helper.js b/new-lamassu-admin/src/pages/Locales/helper.js index cad41f58..0b539cb9 100644 --- a/new-lamassu-admin/src/pages/Locales/helper.js +++ b/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({ - stringify: option => `${option.code} ${option.display}` - }) + limit: null } } ]