fix(select-input): incorrect Downshift key (#369)

* fix(select-input): incorrect Downshift key

* chore: changeset

.changeset/three-bags-hear.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-select-input': patch
+---
+
+This fixes a bug where an object was being passed to Downshift's key

packages/select-input/index.js

@@ -8,7 +8,9 @@ import s from './style.module.css'
  * @prop {String} name - input name attribute
  * @prop {String} label - text to display above the input
  * @prop {String} defaultLabel - text to act as placeholder label
- * @prop {String} value - set the value via prop
+ * @prop {Object} value - set the value via prop
+ * @prop {String} value.name - item name
+ * @prop {String} value.label - item label
  * @prop {Array} options - array of option objects within the select
  * @prop {String} options[].name - option name
  * @prop {String} options[].label - option label
@@ -28,7 +30,7 @@ export default function SelectInput({
   // Changes to the value prop will re-render this component by updating the key value.
   return (
     <Downshift
-      key={value}
+      key={value.name}
       initialSelectedItem={value}
       itemToString={(item) => item && item.name}
       onChange={(item) => {

packages/select-input/index.test.js

@@ -12,3 +12,5 @@ test.todo('displays an alternate placeholder if `defaultLabel` is specified')
 test.todo('displays a custom label if `label` is specified')
 test.todo('uses the `name` if specified for the input')
 test.todo('sets the `value` is one is provided via prop')
+
+test.todo('displays correct value when the value is programmatically updated')