[SelectWidget] Display pre-selected value when async options load. (#43)

* Bump @carecloud/material-cuil@0.17.0 * Bump version to 0.21.0

Author: jnorris-carecloud

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@carecloud/react-jsonschema-form",
- "version": "0.20.2",
+ "version": "0.21.0",
  "description": "A simple React component capable of building HTML forms out of a JSON schema.",
  "scripts": {
  "build:readme": "toctoc README.md -w",
@@ -44,7 +44,7 @@
  "react-dom": "^16.2.0"
  },
  "dependencies": {
- "@carecloud/material-cuil": "0.16.1",
+ "@carecloud/material-cuil": "0.17.0",
  "ajv": "^5.2.3",
  "babel-plugin-transform-react-jsx": "^6.24.1",
  "babel-plugin-transform-runtime": "^6.23.0",

src/components/widgets/SelectWidget.js

@@ -80,6 +80,18 @@ class SelectWidget extends React.Component {
  });
  };
 
+ getValue = value => {
+ // When the widget is configure to call an endpoint on page load, look through the options
+ // in order to display a pre-selected value correctly
+ if (this.async && value && value.value) {
+ value = (this.state.options || []).find(option => option.value === value.value);
+ }
+
+ // Return an empty string if the value is undefined, otherwise, the Select component would
+ // become uncontrolled
+ return value === undefined ? '' : value;
+ };
+
  render = () => {
  const {
  id,
@@ -106,7 +118,7 @@ class SelectWidget extends React.Component {
  placeholder: placeholder || label,
  name: id,
  disabled: disabled || readonly,
- value: typeof value === 'undefined' ? '' : value,
+ value: this.getValue(value),
  };
 
  if (this.async) {

yarn.lock

@@ -71,16 +71,16 @@
  lodash "^4.2.0"
  to-fast-properties "^2.0.0"
 
-"@carecloud/material-cuil@0.16.1":
- version "0.16.1"
- resolved "https://npm.carecloud.com/@carecloud%2fmaterial-cuil/-/material-cuil-0.16.1.tgz#0199065414843108c02fa9f40f348c882a1fd1d7"
+"@carecloud/material-cuil@0.17.0":
+ version "0.17.0"
+ resolved "https://npm.carecloud.com/@carecloud%2fmaterial-cuil/-/material-cuil-0.17.0.tgz#8d5cc338f5be9677bf713e9846b24d18e4adbc24"
  dependencies:
  "@material-ui/icons" "1.0.0-beta.42"
  ag-grid "^15.0.0"
  ag-grid-enterprise "^15.0.0"
  ag-grid-react "^15.0.0"
  classnames "^2.2.5"
- material-ui "1.0.0-beta.41"
+ material-ui "1.0.0-beta.42"
  moment "^2.20.1"
  prop-types "15.6.0"
  react-color "^2.13.8"
@@ -101,9 +101,9 @@
  dependencies:
  csstype "^1.6.0"
 
-"@types/react-transition-group@^2.0.6":
- version "2.0.7"
- resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.7.tgz#2847292d54c5685d982ae5a3ecb6960946689d87"
+"@types/react-transition-group@^2.0.8":
+ version "2.0.8"
+ resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.8.tgz#1ea86f6d8288e4bba8d743317ba9cc61cdacc1ad"
  dependencies:
  "@types/react" "*"
 
@@ -4151,12 +4151,12 @@ material-colors@^1.2.1:
  version "1.2.5"
  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.5.tgz#5292593e6754cb1bcc2b98030e4e0d6a3afc9ea1"
 
-material-ui@1.0.0-beta.41:
- version "1.0.0-beta.41"
- resolved "https://registry.yarnpkg.com/material-ui/-/material-ui-1.0.0-beta.41.tgz#0869bed008caa10003ab20ea726476b560c23160"
+material-ui@1.0.0-beta.42:
+ version "1.0.0-beta.42"
+ resolved "https://registry.yarnpkg.com/material-ui/-/material-ui-1.0.0-beta.42.tgz#a0dea15fd433d521b41912802041eee8b3f30589"
  dependencies:
  "@types/jss" "^9.3.0"
- "@types/react-transition-group" "^2.0.6"
+ "@types/react-transition-group" "^2.0.8"
  babel-runtime "^6.26.0"
  brcast "^3.0.1"
  classnames "^2.2.5"
@@ -4176,8 +4176,8 @@ material-ui@1.0.0-beta.41:
  prop-types "^15.6.0"
  react-event-listener "^0.5.1"
  react-jss "^8.1.0"
- react-lifecycles-compat "^1.0.2"
- react-popper "^0.8.0"
+ react-lifecycles-compat "^2.0.0"
+ react-popper "^0.10.0"
  react-scrollbar-size "^2.0.2"
  react-transition-group "^2.2.1"
  recompose "^0.26.0"
@@ -4831,10 +4831,6 @@ pluralize@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
 
-popper.js@^1.12.9:
- version "1.13.0"
- resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.13.0.tgz#e1e7ff65cc43f7cf9cf16f1510a75e81f84f4565"
-
 popper.js@^1.14.1:
  version "1.14.3"
  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.3.tgz#1438f98d046acf7b4d78cd502bf418ac64d4f095"
@@ -5346,20 +5342,20 @@ react-jss@^8.1.0:
  prop-types "^15.6.0"
  theming "^1.3.0"
 
-react-lifecycles-compat@^1.0.2:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-1.0.2.tgz#551d8b1d156346e5fcf30ffac9b32ce3f78b8850"
+react-lifecycles-compat@^2.0.0:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-2.0.2.tgz#00a23160eec17a43b94dd74f95d44a1a2c3c5ec1"
 
 react-onclickoutside@^6.7.1:
  version "6.7.1"
  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.7.1.tgz#6a5b5b8b4eae6b776259712c89c8a2b36b17be93"
 
-react-popper@^0.8.0:
- version "0.8.2"
- resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.8.2.tgz#092095ff13933211d3856d9f325511ec3a42f12c"
+react-popper@^0.10.0:
+ version "0.10.1"
+ resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.10.1.tgz#6a1f2595faffda77105bed4e89ecf22607a4c452"
  dependencies:
- popper.js "^1.12.9"
- prop-types "^15.6.0"
+ popper.js "^1.14.1"
+ prop-types "^15.6.1"
 
 react-popper@^0.9.1:
  version "0.9.5"