diff --git a/packages/component-faraday-ui/src/AuthorCard.js b/packages/component-faraday-ui/src/AuthorCard.js
index 2ace7fa985268bb535cdeff598a1a5ac7a030433..36f74f2d439a408fe6024014e11d409564fec1d4 100644
--- a/packages/component-faraday-ui/src/AuthorCard.js
+++ b/packages/component-faraday-ui/src/AuthorCard.js
@@ -4,14 +4,7 @@ import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { required } from 'xpub-validators'
import { reduxForm, Field } from 'redux-form'
-import {
- Menu,
- H3,
- ValidatedField,
- TextField,
- Checkbox,
- Spinner,
-} from '@pubsweet/ui'
+import { H3, ValidatedField, TextField, Checkbox, Spinner } from '@pubsweet/ui'
import {
compose,
withState,
@@ -20,7 +13,7 @@ import {
setDisplayName,
} from 'recompose'
-import { withCountries } from 'pubsweet-component-faraday-ui'
+import { MenuCountry } from 'pubsweet-component-faraday-ui'
import { Tag, Label, Row, Item, PersonInfo, IconButton, OpenModal } from './'
import { validators } from './helpers'
@@ -129,7 +122,6 @@ const AuthorTitle = ({
// #region AuthorEdit
const AuthorEdit = ({
- countries,
author,
editMode,
listIndex,
@@ -196,7 +188,7 @@ const AuthorEdit = ({
<Label required>Country</Label>
<ValidatedField
component={input => (
- <Menu {...input} options={countries} placeholder="Please select" />
+ <MenuCountry {...input} placeholder="Please select" />
)}
data-test-id="author-card-country"
name="country"
@@ -208,7 +200,6 @@ const AuthorEdit = ({
// #endregion
const EnhancedAuthorEdit = compose(
- withCountries,
withProps(({ author }) => ({
initialValues: author,
})),
diff --git a/packages/component-faraday-ui/src/InviteReviewers.js b/packages/component-faraday-ui/src/InviteReviewers.js
index 7c93ebb316f9a1d7a10c664548a6ee94c6864cdd..7f07b70cba1b4e7944aea14142d5bcd1632a1fad 100644
--- a/packages/component-faraday-ui/src/InviteReviewers.js
+++ b/packages/component-faraday-ui/src/InviteReviewers.js
@@ -5,7 +5,9 @@ import { reduxForm } from 'redux-form'
import { th } from '@pubsweet/ui-toolkit'
import { required } from 'xpub-validators'
import { withModal } from 'pubsweet-component-modal/src/components'
-import { Button, H4, Menu, TextField, ValidatedField } from '@pubsweet/ui'
+import { Button, H4, TextField, ValidatedField } from '@pubsweet/ui'
+
+import { MenuCountry } from 'pubsweet-component-faraday-ui'
import {
Row,
@@ -15,10 +17,9 @@ import {
ItemOverrideAlert,
withFetching,
validators,
- withCountries,
} from '../'
-const InviteReviewers = ({ countries, handleSubmit, reset }) => (
+const InviteReviewers = ({ handleSubmit, reset }) => (
<Root>
<Row justify="space-between" mb={2}>
<H4>Invite reviewer</H4>
@@ -82,7 +83,9 @@ const InviteReviewers = ({ countries, handleSubmit, reset }) => (
<ItemOverrideAlert vertical>
<Label required>Country</Label>
<ValidatedField
- component={input => <Menu options={countries} {...input} />}
+ component={input => (
+ <MenuCountry {...input} placeholder="Please select" />
+ )}
name="country"
validate={[required]}
/>
@@ -93,7 +96,6 @@ const InviteReviewers = ({ countries, handleSubmit, reset }) => (
export default compose(
withFetching,
- withCountries,
withModal(({ isFetching, modalKey }) => ({
modalKey,
isFetching,
diff --git a/packages/component-faraday-ui/src/MenuCountry.js b/packages/component-faraday-ui/src/MenuCountry.js
new file mode 100644
index 0000000000000000000000000000000000000000..8ca9f618bb2612ebdf04dea4a5c0e781ba2a39ad
--- /dev/null
+++ b/packages/component-faraday-ui/src/MenuCountry.js
@@ -0,0 +1,81 @@
+import React from 'react'
+import { Menu } from '@pubsweet/ui'
+import { startsWith, toLower, get } from 'lodash'
+import { compose, withState, withHandlers } from 'recompose'
+import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+
+import { withCountries } from 'pubsweet-component-faraday-ui'
+
+const filteredCountries = (countries, userInput) =>
+ countries.filter(o => startsWith(toLower(o.label), toLower(userInput)))
+
+const firstFilteredCountry = props =>
+ filteredCountries(props.countries, props.userInput)[0]
+
+const CustomOpener = ({
+ selected,
+ userInput,
+ toggleMenu,
+ placeholder,
+ optionLabel,
+ onChange,
+ onEnter,
+}) => (
+ <Input
+ onChange={onChange}
+ onClick={toggleMenu}
+ onKeyUp={onEnter}
+ placeholder={selected ? optionLabel(selected) : placeholder}
+ value={userInput}
+ />
+)
+
+const MenuCountry = ({ countries = [], ...input }) => (
+ <Menu
+ {...input}
+ options={filteredCountries(countries, input.userInput)}
+ placeholder="Please select"
+ renderOpener={CustomOpener}
+ />
+)
+
+const enhance = compose(
+ withCountries,
+ withState('userInput', 'updateUserInput', ''),
+ withHandlers({
+ onChange: ({ updateUserInput, onChange }) => value => {
+ // this value is an input DOM event while typing and a dropdown value when
+ // selected
+ if (typeof value === 'string') {
+ onChange(value)
+ }
+ updateUserInput(get(value, 'target.value', ''))
+ },
+ onEnter: props => event => {
+ if (event.which === 13) {
+ props.onChange(firstFilteredCountry(props).value)
+ props.updateUserInput(firstFilteredCountry(props).label)
+ }
+ },
+ }),
+)
+
+export default enhance(MenuCountry)
+
+const Input = styled.input`
+ width: 100%;
+ height: calc(${th('gridUnit')} * 4);
+ border: ${th('accordion.border')};
+ border-radius: ${th('borderRadius')};
+ padding: 0 ${th('gridUnit')};
+ ::placeholder {
+ color: ${th('colorText')};
+ opacity: 1;
+ font-family: ${th('fontWriting')};
+ }
+ :focus {
+ border-color: ${th('action.colorActive')}
+ outline: none;
+ }
+`
diff --git a/packages/component-faraday-ui/src/UserProfile.js b/packages/component-faraday-ui/src/UserProfile.js
index 292c04822b7ee0bdbcfb2662a12a91bb961cc8ca..e1bdc2074f60d3a1810ab5e1f595b1289b564c00 100644
--- a/packages/component-faraday-ui/src/UserProfile.js
+++ b/packages/component-faraday-ui/src/UserProfile.js
@@ -7,7 +7,7 @@ import { th } from '@pubsweet/ui-toolkit'
import { required as requiredValidator } from 'xpub-validators'
import { compose, withStateHandlers, withProps } from 'recompose'
import { H3, Spinner, ValidatedField, TextField, Menu } from '@pubsweet/ui'
-import { withCountries } from 'pubsweet-component-faraday-ui'
+import { withCountries, MenuCountry } from 'pubsweet-component-faraday-ui'
import {
Row,
@@ -179,7 +179,9 @@ const EditUserProfile = compose(
<Item ml={1} vertical>
<Label required>Country</Label>
<ValidatedField
- component={input => <Menu {...input} options={countries} />}
+ component={input => (
+ <MenuCountry {...input} placeholder="Please select" />
+ )}
name="country"
validate={[requiredValidator]}
/>
diff --git a/packages/component-faraday-ui/src/index.js b/packages/component-faraday-ui/src/index.js
index a99b60e4c1b2e18f15810beb84255aecd4ad4260..011e5d99b9e41cd5d5ea442ca4a82d368305b900 100644
--- a/packages/component-faraday-ui/src/index.js
+++ b/packages/component-faraday-ui/src/index.js
@@ -48,6 +48,7 @@ export { default as WizardFiles } from './WizardFiles'
export { default as TextTooltip } from './TextTooltip'
export { default as EditorialReportCard } from './EditorialReportCard'
export { default as ReviewerReportAuthor } from './ReviewerReportAuthor'
+export { default as MenuCountry } from './MenuCountry'
export { SubmitRevision } from './submissionRevision'
diff --git a/packages/component-faraday-ui/src/modals/FormModal.js b/packages/component-faraday-ui/src/modals/FormModal.js
index e9adb3b78c837287a61182aefc121b1851bbad5d..e798227aac61a7a99b16813a0f56deec6fc3b117 100644
--- a/packages/component-faraday-ui/src/modals/FormModal.js
+++ b/packages/component-faraday-ui/src/modals/FormModal.js
@@ -19,12 +19,13 @@ import {
Text,
Item,
Label,
+ MenuCountry,
IconButton,
RowOverrideAlert,
ItemOverrideAlert,
} from 'pubsweet-component-faraday-ui'
-const AddUserForm = ({ roles, countries, titles }) => (
+const AddUserForm = ({ roles, titles }) => (
<Fragment>
<Row alignItems="baseline" mb={1} mt={1}>
<Item mr={1} vertical>
@@ -72,7 +73,7 @@ const AddUserForm = ({ roles, countries, titles }) => (
<Label>Country</Label>
<ValidatedField
component={input => (
- <Menu options={countries} {...input} placeholder="Please select" />
+ <MenuCountry {...input} placeholder="Please select" />
)}
name="country"
/>
@@ -88,7 +89,7 @@ const AddUserForm = ({ roles, countries, titles }) => (
</Fragment>
)
-const EditForm = ({ titles, countries }) => (
+const EditForm = ({ titles }) => (
<Fragment>
<Row alignItems="center" mb={2} mt={1}>
<Item mr={1} vertical>
@@ -115,7 +116,7 @@ const EditForm = ({ titles, countries }) => (
<Label>Country</Label>
<ValidatedField
component={input => (
- <Menu options={countries} {...input} placeholder="Please select" />
+ <MenuCountry {...input} placeholder="Please select" />
)}
name="country"
/>
@@ -186,7 +187,6 @@ const FormModal = ({
onClose,
subtitle,
onConfirm,
- countries,
modalError,
isFetching,
handleSubmit,
@@ -198,9 +198,9 @@ const FormModal = ({
<H2>{title}</H2>
{edit && <Text secondary>{user.email}</Text>}
{edit ? (
- <EditForm countries={countries} titles={titles} />
+ <EditForm titles={titles} />
) : (
- <AddUserForm countries={countries} roles={roles} titles={titles} />
+ <AddUserForm roles={roles} titles={titles} />
)}
{modalError && (
<Row mb={1}>
diff --git a/packages/components-faraday/src/components/Admin/AddUser.js b/packages/components-faraday/src/components/Admin/AddUser.js
index 572e42f0755c5f0ae873b190c0d6864b1889139e..7fd409d679850f3e7418baa28af3f82bc6f361cc 100644
--- a/packages/components-faraday/src/components/Admin/AddUser.js
+++ b/packages/components-faraday/src/components/Admin/AddUser.js
@@ -9,7 +9,6 @@ import {
IconButton,
withRoles,
withFetching,
- withCountries,
} from 'pubsweet-component-faraday-ui'
const AddUser = ({ edit, journal, handleSubmit, ...rest }) => (
@@ -32,6 +31,4 @@ const AddUser = ({ edit, journal, handleSubmit, ...rest }) => (
</OpenModal>
)
-export default compose(withJournal, withCountries, withRoles, withFetching)(
- AddUser,
-)
+export default compose(withJournal, withRoles, withFetching)(AddUser)
diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep0.js b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
index 4cb4f094d06d1585a6a814e4cf1fda0af3b3d9bf..2baf1131f0e20c0cc42b149e0fdab343f7585cbf 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpStep0.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
@@ -11,8 +11,8 @@ import {
Item,
Label,
ActionLink,
+ MenuCountry,
ItemOverrideAlert,
- withCountries,
} from 'pubsweet-component-faraday-ui'
const AgreeCheckbox = ({ value, onChange }) => (
@@ -27,14 +27,7 @@ const AgreeCheckbox = ({ value, onChange }) => (
</Row>
)
-const Step0 = ({
- type,
- error,
- journal,
- countries,
- handleSubmit,
- initialValues,
-}) =>
+const Step0 = ({ type, error, journal, handleSubmit, initialValues }) =>
!isUndefined(initialValues) ? (
<Fragment>
<Row mb={2} mt={3}>
@@ -75,11 +68,7 @@ const Step0 = ({
<Label required>Country</Label>
<ValidatedField
component={input => (
- <Menu
- {...input}
- options={countries}
- placeholder="Please select"
- />
+ <MenuCountry {...input} placeholder="Please select" />
)}
name="country"
validate={[requiredValidator]}
@@ -142,7 +131,6 @@ const Step0 = ({
)
export default compose(
- withCountries,
reduxForm({
form: 'signUpInvitation',
destroyOnUnmount: false,