fix #3263

src/components/Select/FormsySelect.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { HOC as hoc } from 'formsy-react'
+
+import Select from './Select'
+
+/**
+ * This component is a formsy wrapper for the Select component
+ * @param {Object} props Component props
+ */
+const FormsySelect = props => {
+  // when setValueOnly is set to true, formsy should submit the 'option.value' instead of the whole 'option' object
+  const { onChange, setValueOnly, options } = props
+  const selectedOption = props.getValue()
+
+  const onSelectionChange = selectedOption => {
+    props.setValue(setValueOnly ? selectedOption.value : selectedOption)
+    onChange && onChange(selectedOption)
+  }
+  const value = setValueOnly
+    ? _.find(options, o => o.value === selectedOption)
+    : selectedOption
+
+  return <Select {...props} value={value} onChange={onSelectionChange} />
+}
+
+FormsySelect.PropTypes = {
+  onChange: PropTypes.func,
+  setValueOnly: PropTypes.bool,
+  options: PropTypes.array.isRequired
+}
+
+export default hoc(FormsySelect)

src/routes/settings/components/SettingsPanel.scss

@@ -9,11 +9,13 @@
   flex-grow: 1;
   margin: auto;
   margin-top: 20px;
+  margin-bottom: 260px; // gives space to show country selection list
 
   @media screen and (max-width: $screen-md - 1px) {
     padding: 0;
     margin: 0;
     max-width: none;
+    margin-bottom: 260px; // gives space to show country selection list in mobile view
   }
 }