fix(menuCountry doesn't allow invalid value):

packages/component-faraday-ui/src/AuthorCard.js

@@ -5,14 +5,9 @@ import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import { required } from 'xpub-validators'
 import { reduxForm, Field } from 'redux-form'
-import {
-  H3,
-  Menu,
-  Spinner,
-  Checkbox,
-  TextField,
-  ValidatedField,
-} from '@pubsweet/ui'
+
+import { MenuCountry } from 'pubsweet-component-faraday-ui'
+import { H3, Spinner, Checkbox, TextField, ValidatedField } from '@pubsweet/ui'
 import {
   compose,
   withState,
@@ -20,7 +15,6 @@ import {
   withHandlers,
   setDisplayName,
 } from 'recompose'
-import { withCountries } from 'pubsweet-component-faraday-ui'
 
 import { validators } from './helpers'
 import { Tag, Label, Row, Item, PersonInfo, IconButton, OpenModal } from './'
@@ -196,11 +190,11 @@ const AuthorEdit = ({
       <Item vertical>
         <Label required>Country</Label>
         <ValidatedField
-          component={input => (
-            <Menu {...input} options={countries} placeholder="Please select" />
-          )}
+          component={MenuCountry}
           data-test-id="author-card-country"
           name="country"
+          placeholder="Please select"
+          validate={[required]}
         />
       </Item>
     </Row>
@@ -209,7 +203,6 @@ const AuthorEdit = ({
 // #endregion
 
 const EnhancedAuthorEdit = compose(
-  withCountries,
   withProps(({ author }) => ({
     initialValues: author,
   })),

packages/component-faraday-ui/src/InviteReviewers.js

@@ -84,10 +84,9 @@ const InviteReviewers = ({ handleSubmit, reset }) => (
       <ItemOverrideAlert vertical>
         <Label required>Country</Label>
         <ValidatedField
-          component={input => (
-            <MenuCountry {...input} placeholder="Please select" />
-          )}
+          component={MenuCountry}
           name="country"
+          placeholder="Please select"
           validate={[required]}
         />
       </ItemOverrideAlert>
@@ -100,7 +99,7 @@ InviteReviewers.propTypes = {
    * @param {Reviewer} reviewer
    * @param {object} props
    */
-  onInvite: PropTypes.func,
+  onInvite: PropTypes.func, // eslint-disable-line
 }
 
 InviteReviewers.defaultProps = {

packages/component-faraday-ui/src/MenuCountry.js

 import React, { Fragment } from 'react'
 import styled from 'styled-components'
-import { startsWith, toLower, get } from 'lodash'
 import { th, override } from '@pubsweet/ui-toolkit'
+import { startsWith, toLower, get, head } from 'lodash'
 import { withCountries } from 'pubsweet-component-faraday-ui'
 import { compose, withState, withHandlers, withProps } from 'recompose'
 
@@ -9,7 +9,7 @@ const filteredCountries = ({ countries, userInput }) =>
   countries.filter(o => startsWith(toLower(o.label), toLower(userInput)))
 
 const firstFilteredCountry = ({ countries, userInput }) =>
-  filteredCountries({ countries, userInput })[0]
+  head(filteredCountries({ countries, userInput }))
 
 const Menu = ({
   open,
@@ -55,21 +55,32 @@ export default compose(
       updateUserInput,
       updateOptionsVisibility,
     }) => value => () => {
-      onChange(value)
-      updateUserInput(countryLabel(value))
-      updateOptionsVisibility(false)
+      const country = countryLabel(value)
+      if (country) {
+        onChange(value)
+        updateUserInput(country)
+        updateOptionsVisibility(false)
+      }
     },
   }),
   withHandlers({
     toggleMenu: ({ updateOptionsVisibility, open }) => () => {
       updateOptionsVisibility(!open)
     },
-    onTextChange: ({ updateUserInput }) => event => {
-      updateUserInput(get(event, 'target.value', ''))
+    onTextChange: ({ updateUserInput, countryLabel, onChange }) => event => {
+      const inputValue = get(event, 'target.value', '')
+      const country = countryLabel(inputValue)
+
+      updateUserInput(inputValue)
+      if (!country) {
+        onChange('')
+      }
     },
     onEnter: ({ handleSelect, userInput, countries }) => event => {
       if (event.which === 13) {
-        handleSelect(firstFilteredCountry({ countries, userInput }).value)()
+        handleSelect(
+          get(firstFilteredCountry({ countries, userInput }), 'value'),
+        )()
       }
     },
   }),
@@ -110,15 +121,6 @@ const CloseOverlay = styled.div`
   ${override('ui.MenuCountry.CloseOverlay')};
 `
 
-const Label = styled.label`
-  font-size: ${th('fontSizeBaseSmall')};
-  line-height: ${th('lineHeightBaseSmall')};
-  display: block;
-
-  ${override('ui.Label')};
-  ${override('ui.MenuCountry.Label')};
-`
-
 const Main = styled.div.attrs(props => ({
   role: 'listbox',
 }))`

packages/component-faraday-ui/src/Pagination.js

@@ -28,8 +28,8 @@ const PaginationComponent = ({
       iconSize={2}
       onClick={toFirst}
       pb={0.5}
-      pr={2}
       pl={1}
+      pr={2}
     />
     <Chevrons
       className="caratRight"

packages/component-faraday-ui/src/UserProfile.js

@@ -5,7 +5,7 @@ import styled from 'styled-components'
 import { reduxForm } from 'redux-form'
 import React, { Fragment } from 'react'
 import { th } from '@pubsweet/ui-toolkit'
-import { withCountries } from 'pubsweet-component-faraday-ui'
+import { withCountries, MenuCountry } from 'pubsweet-component-faraday-ui'
 import { required as requiredValidator } from 'xpub-validators'
 import { compose, withStateHandlers, withProps } from 'recompose'
 import { H3, Spinner, ValidatedField, TextField, Menu } from '@pubsweet/ui'
@@ -182,8 +182,9 @@ const EditUserProfile = compose(
           <Item ml={1} vertical>
             <Label required>Country</Label>
             <ValidatedField
-              component={input => <Menu {...input} options={countries} />}
+              component={MenuCountry}
               name="country"
+              placeholder="Please select"
               validate={[requiredValidator]}
             />
           </Item>

packages/component-faraday-ui/src/helpers/withCountries.js

@@ -14,7 +14,7 @@ const countryMapper = (c = 'GB') => {
   }
 }
 
-const codeMapper = (c = 'UK') => {
+const codeMapper = (c = '') => {
   switch (c) {
     case 'UK':
       return 'GB'

packages/components-faraday/src/components/SignUp/SignUpStep0.js

 import React, { Fragment } from 'react'
 import { compose } from 'recompose'
-import { reduxForm, Field } from 'redux-form'
+import { reduxForm } from 'redux-form'
 import { get, isUndefined } from 'lodash'
 import { required as requiredValidator } from 'xpub-validators'
 import { Menu, Button, Checkbox, TextField, ValidatedField } from '@pubsweet/ui'