diff --git a/.yarn/offline-mirror/compute-scroll-into-view-1.0.13.tgz b/.yarn/offline-mirror/compute-scroll-into-view-1.0.13.tgz
new file mode 100644
index 000000000000..7adaa640757d
Binary files /dev/null and b/.yarn/offline-mirror/compute-scroll-into-view-1.0.13.tgz differ
diff --git a/.yarn/offline-mirror/downshift-5.0.5.tgz b/.yarn/offline-mirror/downshift-5.0.5.tgz
new file mode 100644
index 000000000000..c5bdc6f384b2
Binary files /dev/null and b/.yarn/offline-mirror/downshift-5.0.5.tgz differ
diff --git a/packages/components/src/components/button/_mixins.scss b/packages/components/src/components/button/_mixins.scss
index 38a4134535fc..3a6a3d7ccbf5 100644
--- a/packages/components/src/components/button/_mixins.scss
+++ b/packages/components/src/components/button/_mixins.scss
@@ -81,6 +81,17 @@
       inset 0 0 0 ($button-border-width + $button-outline-width) $ui-02;
   }
 
+  &:disabled:hover,
+  &:disabled:focus,
+  &:hover.#{$prefix}--btn--disabled,
+  &:focus.#{$prefix}--btn--disabled {
+    color: $ui-04;
+    background-color: $disabled-02;
+    border-color: $disabled-02;
+    text-decoration: none;
+    box-shadow: none;
+  }
+
   &:active {
     background-color: $active-color;
   }
diff --git a/packages/components/src/components/combo-box/_combo-box.scss b/packages/components/src/components/combo-box/_combo-box.scss
index db20ed78098a..efa032ab097d 100644
--- a/packages/components/src/components/combo-box/_combo-box.scss
+++ b/packages/components/src/components/combo-box/_combo-box.scss
@@ -26,6 +26,10 @@
     &[disabled]::placeholder {
       color: $disabled-02;
     }
+
+    &::-ms-clear {
+      display: none;
+    }
   }
 
   .#{$prefix}--combo-box.#{$prefix}--list-box--expanded
diff --git a/packages/components/src/components/dropdown/_dropdown.scss b/packages/components/src/components/dropdown/_dropdown.scss
index db38b3b74830..c4fc66eb6e4f 100644
--- a/packages/components/src/components/dropdown/_dropdown.scss
+++ b/packages/components/src/components/dropdown/_dropdown.scss
@@ -56,15 +56,18 @@
     outline: 2px solid transparent;
     transition: background-color $duration--fast-01 motion(standard, productive);
 
-    &:focus {
-      @include focus-outline('outline');
-    }
-
     &:hover {
       background-color: $hover-ui;
     }
   }
 
+  // Menu's triggering element updated to button with Downshift v5 upgrade
+  .#{$prefix}--dropdown .#{$prefix}--list-box__field {
+    @include button-reset;
+    text-align: left;
+    padding: 0 rem(48px) 0 rem(16px);
+  }
+
   .#{$prefix}--dropdown--xl {
     height: rem(48px);
     max-height: rem(48px);
@@ -327,11 +330,15 @@
       outline: none;
     }
 
-    .#{$prefix}--dropdown-text {
+    // TODO: remove in v11
+    .#{$prefix}--dropdown-text,
+    .#{$prefix}--list-box__label {
       color: $disabled-02;
     }
 
-    .#{$prefix}--dropdown__arrow {
+    // TODO: remove in v11
+    .#{$prefix}--dropdown__arrow,
+    .#{$prefix}--list-box__menu-icon svg {
       fill: $disabled-02;
     }
 
diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
index 72f8d0bca919..92cea7d7bdd7 100644
--- a/packages/components/src/components/list-box/_list-box.scss
+++ b/packages/components/src/components/list-box/_list-box.scss
@@ -144,7 +144,7 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box--light.#{$prefix}--list-box--expanded {
-    border-bottom-color: $decorative-01;
+    border-bottom-color: transparent;
   }
 
   // Disabled state for `list-box`
@@ -159,7 +159,7 @@ $list-box-menu-width: rem(300px);
   .#{$prefix}--list-box--disabled,
   .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field,
   .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field:focus {
-    border-bottom-width: 0;
+    border-bottom-color: transparent;
     outline: none;
   }
 
@@ -248,6 +248,10 @@ $list-box-menu-width: rem(300px);
     color: $text-01;
   }
 
+  .#{$prefix}--list-box--inline .#{$prefix}--list-box__field {
+    height: 100%;
+  }
+
   // The field we use for input, showing selection, etc.
   .#{$prefix}--list-box__field {
     @include button-reset;
@@ -377,10 +381,6 @@ $list-box-menu-width: rem(300px);
     outline: none;
   }
 
-  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection > svg {
-    fill: $disabled-02;
-  }
-
   // Modifier for a selection to show that multiple selections have been made
   .#{$prefix}--list-box__selection--multi {
     @include type-style('label-01');
@@ -406,11 +406,21 @@ $list-box-menu-width: rem(300px);
     width: rem(20px);
     height: rem(20px);
     padding: rem(2px);
+
+    &:hover {
+      border-radius: 50%;
+      background-color: $hover-secondary;
+    }
   }
 
-  .#{$prefix}--list-box__selection--multi > svg:hover {
-    border-radius: 50%;
-    background-color: $hover-secondary;
+  .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__selection--multi
+    > svg {
+    fill: $disabled-02;
+
+    &:hover {
+      background-color: unset;
+    }
   }
 
   .#{$prefix}--list-box__selection--multi:focus,
@@ -429,6 +439,11 @@ $list-box-menu-width: rem(300px);
     transition: max-height $duration--fast-02 motion(standard, productive);
     overflow-y: auto;
     z-index: z('dropdown');
+
+    &:focus {
+      // remove default browser focus in firefox
+      @include focus-outline('border');
+    }
   }
 
   .#{$prefix}--list-box
@@ -664,9 +679,11 @@ $list-box-menu-width: rem(300px);
 
   // Tweaks for descendants
   // When handling input, we need to target nodes that specifically opt-in to
-  // the `combobox` role in order to make sure the text input is styled
+  // the type text in order to make sure the text input is styled
   // correctly.
-  .#{$prefix}--list-box input[role='combobox'] {
+  // TODO: remove [role='combobox'] in v11
+  .#{$prefix}--list-box input[role='combobox'],
+  .#{$prefix}--list-box input[type='text'] {
     background-color: inherit;
     min-width: 0;
   }
diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
index 890ea7f9bc6d..e978e871bf3c 100644
--- a/packages/components/src/components/tag/_tag.scss
+++ b/packages/components/src/components/tag/_tag.scss
@@ -23,7 +23,7 @@
     @include tag-theme(
       get-token-value($tag-colors, 'tag-background-gray'),
       get-token-value($tag-colors, 'tag-color-gray'),
-      get-token-value($tag-colors, 'tag-hover-gray'),
+      get-token-value($tag-colors, 'tag-hover-gray')
     );
 
     display: inline-flex;
@@ -50,7 +50,7 @@
     @include tag-theme(
       get-token-value($tag-colors, 'tag-background-red'),
       get-token-value($tag-colors, 'tag-color-red'),
-      get-token-value($tag-colors, 'tag-hover-red'),
+      get-token-value($tag-colors, 'tag-hover-red')
     );
   }
 
@@ -58,7 +58,7 @@
     @include tag-theme(
       get-token-value($tag-colors, 'tag-background-magenta'),
       get-token-value($tag-colors, 'tag-color-magenta'),
-      get-token-value($tag-colors, 'tag-hover-magenta'),
+      get-token-value($tag-colors, 'tag-hover-magenta')
     );
   }
 
@@ -66,7 +66,7 @@
     @include tag-theme(
       get-token-value($tag-colors, 'tag-background-purple'),
       get-token-value($tag-colors, 'tag-color-purple'),
-      get-token-value($tag-colors, 'tag-hover-purple'),
+      get-token-value($tag-colors, 'tag-hover-purple')
     );
   }
 
@@ -74,7 +74,7 @@
     @include tag-theme(
       get-token-value($tag-colors, 'tag-background-blue'),
       get-token-value($tag-colors, 'tag-color-blue'),
-      get-token-value($tag-colors, 'tag-hover-blue'),
+      get-token-value($tag-colors, 'tag-hover-blue')
     );
   }
 
@@ -82,7 +82,7 @@
     @include tag-theme(
       get-token-value($tag-colors, 'tag-background-cyan'),
       get-token-value($tag-colors, 'tag-color-cyan'),
-      get-token-value($tag-colors, 'tag-hover-cyan'),
+      get-token-value($tag-colors, 'tag-hover-cyan')
     );
   }
 
@@ -90,7 +90,7 @@
     @include tag-theme(
       get-token-value($tag-colors, 'tag-background-teal'),
       get-token-value($tag-colors, 'tag-color-teal'),
-      get-token-value($tag-colors, 'tag-hover-teal'),
+      get-token-value($tag-colors, 'tag-hover-teal')
     );
   }
 
@@ -98,7 +98,7 @@
     @include tag-theme(
       get-token-value($tag-colors, 'tag-background-green'),
       get-token-value($tag-colors, 'tag-color-green'),
-      get-token-value($tag-colors, 'tag-hover-green'),
+      get-token-value($tag-colors, 'tag-hover-green')
     );
   }
 
@@ -106,7 +106,7 @@
     @include tag-theme(
       get-token-value($tag-colors, 'tag-background-gray'),
       get-token-value($tag-colors, 'tag-color-gray'),
-      get-token-value($tag-colors, 'tag-hover-gray'),
+      get-token-value($tag-colors, 'tag-hover-gray')
     );
   }
 
@@ -114,7 +114,7 @@
     @include tag-theme(
       get-token-value($tag-colors, 'tag-background-cool-gray'),
       get-token-value($tag-colors, 'tag-color-cool-gray'),
-      get-token-value($tag-colors, 'tag-hover-cool-gray'),
+      get-token-value($tag-colors, 'tag-hover-cool-gray')
     );
   }
 
@@ -122,16 +122,12 @@
     @include tag-theme(
       get-token-value($tag-colors, 'tag-background-warm-gray'),
       get-token-value($tag-colors, 'tag-color-warm-gray'),
-      get-token-value($tag-colors, 'tag-hover-warm-gray'),
+      get-token-value($tag-colors, 'tag-hover-warm-gray')
     );
   }
 
   .#{$prefix}--tag--high-contrast {
-    @include tag-theme(
-      $inverse-02,
-      $inverse-01,
-      $inverse-hover-ui,
-    );
+    @include tag-theme($inverse-02, $inverse-01, $inverse-hover-ui);
   }
 
   .#{$prefix}--tag--disabled,
diff --git a/packages/components/src/globals/scss/_component-tokens.scss b/packages/components/src/globals/scss/_component-tokens.scss
index c38c21882732..aaba10ee328a 100644
--- a/packages/components/src/globals/scss/_component-tokens.scss
+++ b/packages/components/src/globals/scss/_component-tokens.scss
@@ -9,6 +9,10 @@
 @import 'theme';
 @import 'feature-flags';
 
+$enable-css-custom-properties: feature-flag-enabled(
+  'enable-css-custom-properties'
+);
+
 /// Get a component token value.
 /// @access private
 /// @param {Map} $tokens - Map of component tokens
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index e82918ad9815..a7b1b7303015 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -329,31 +329,15 @@ Map {
       "downshiftProps": Object {
         "args": Array [
           Object {
-            "breakingChanges": Object {
-              "args": Array [
-                Object {
-                  "resetInputOnSelection": Object {
-                    "type": "bool",
-                  },
-                },
-              ],
-              "type": "shape",
-            },
             "children": Object {
               "type": "func",
             },
             "defaultHighlightedIndex": Object {
               "type": "number",
             },
-            "defaultInputValue": Object {
-              "type": "string",
-            },
             "defaultIsOpen": Object {
               "type": "bool",
             },
-            "defaultSelectedItem": Object {
-              "type": "any",
-            },
             "environment": Object {
               "args": Array [
                 Object {
@@ -386,12 +370,30 @@ Map {
             "getA11yStatusMessage": Object {
               "type": "func",
             },
+            "getItemId": Object {
+              "type": "func",
+            },
             "highlightedIndex": Object {
               "type": "number",
             },
             "id": Object {
               "type": "string",
             },
+            "initialHighlightedIndex": Object {
+              "type": "number",
+            },
+            "initialInputValue": Object {
+              "type": "string",
+            },
+            "initialIsOpen": Object {
+              "type": "bool",
+            },
+            "initialSelectedItem": Object {
+              "type": "any",
+            },
+            "inputId": Object {
+              "type": "string",
+            },
             "inputValue": Object {
               "type": "string",
             },
@@ -404,6 +406,12 @@ Map {
             "itemToString": Object {
               "type": "func",
             },
+            "labelId": Object {
+              "type": "string",
+            },
+            "menuId": Object {
+              "type": "string",
+            },
             "onChange": Object {
               "type": "func",
             },
@@ -422,7 +430,7 @@ Map {
             "onUserAction": Object {
               "type": "func",
             },
-            "render": Object {
+            "scrollIntoView": Object {
               "type": "func",
             },
             "selectedItem": Object {
@@ -434,6 +442,9 @@ Map {
             "stateReducer": Object {
               "type": "func",
             },
+            "suppressRefError": Object {
+              "type": "bool",
+            },
           },
         ],
         "type": "shape",
@@ -2022,118 +2033,6 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
-      "downshiftProps": Object {
-        "args": Array [
-          Object {
-            "breakingChanges": Object {
-              "args": Array [
-                Object {
-                  "resetInputOnSelection": Object {
-                    "type": "bool",
-                  },
-                },
-              ],
-              "type": "shape",
-            },
-            "children": Object {
-              "type": "func",
-            },
-            "defaultHighlightedIndex": Object {
-              "type": "number",
-            },
-            "defaultInputValue": Object {
-              "type": "string",
-            },
-            "defaultIsOpen": Object {
-              "type": "bool",
-            },
-            "defaultSelectedItem": Object {
-              "type": "any",
-            },
-            "environment": Object {
-              "args": Array [
-                Object {
-                  "addEventListener": Object {
-                    "type": "func",
-                  },
-                  "document": Object {
-                    "args": Array [
-                      Object {
-                        "activeElement": Object {
-                          "type": "any",
-                        },
-                        "body": Object {
-                          "type": "any",
-                        },
-                        "getElementById": Object {
-                          "type": "func",
-                        },
-                      },
-                    ],
-                    "type": "shape",
-                  },
-                  "removeEventListener": Object {
-                    "type": "func",
-                  },
-                },
-              ],
-              "type": "shape",
-            },
-            "getA11yStatusMessage": Object {
-              "type": "func",
-            },
-            "highlightedIndex": Object {
-              "type": "number",
-            },
-            "id": Object {
-              "type": "string",
-            },
-            "inputValue": Object {
-              "type": "string",
-            },
-            "isOpen": Object {
-              "type": "bool",
-            },
-            "itemCount": Object {
-              "type": "number",
-            },
-            "itemToString": Object {
-              "type": "func",
-            },
-            "onChange": Object {
-              "type": "func",
-            },
-            "onInputValueChange": Object {
-              "type": "func",
-            },
-            "onOuterClick": Object {
-              "type": "func",
-            },
-            "onSelect": Object {
-              "type": "func",
-            },
-            "onStateChange": Object {
-              "type": "func",
-            },
-            "onUserAction": Object {
-              "type": "func",
-            },
-            "render": Object {
-              "type": "func",
-            },
-            "selectedItem": Object {
-              "type": "any",
-            },
-            "selectedItemChanged": Object {
-              "type": "func",
-            },
-            "stateReducer": Object {
-              "type": "func",
-            },
-          },
-        ],
-        "type": "shape",
-      },
       "helperText": Object {
         "args": Array [
           Array [
@@ -3204,31 +3103,15 @@ Map {
         "downshiftProps": Object {
           "args": Array [
             Object {
-              "breakingChanges": Object {
-                "args": Array [
-                  Object {
-                    "resetInputOnSelection": Object {
-                      "type": "bool",
-                    },
-                  },
-                ],
-                "type": "shape",
-              },
               "children": Object {
                 "type": "func",
               },
               "defaultHighlightedIndex": Object {
                 "type": "number",
               },
-              "defaultInputValue": Object {
-                "type": "string",
-              },
               "defaultIsOpen": Object {
                 "type": "bool",
               },
-              "defaultSelectedItem": Object {
-                "type": "any",
-              },
               "environment": Object {
                 "args": Array [
                   Object {
@@ -3261,12 +3144,30 @@ Map {
               "getA11yStatusMessage": Object {
                 "type": "func",
               },
+              "getItemId": Object {
+                "type": "func",
+              },
               "highlightedIndex": Object {
                 "type": "number",
               },
               "id": Object {
                 "type": "string",
               },
+              "initialHighlightedIndex": Object {
+                "type": "number",
+              },
+              "initialInputValue": Object {
+                "type": "string",
+              },
+              "initialIsOpen": Object {
+                "type": "bool",
+              },
+              "initialSelectedItem": Object {
+                "type": "any",
+              },
+              "inputId": Object {
+                "type": "string",
+              },
               "inputValue": Object {
                 "type": "string",
               },
@@ -3279,6 +3180,12 @@ Map {
               "itemToString": Object {
                 "type": "func",
               },
+              "labelId": Object {
+                "type": "string",
+              },
+              "menuId": Object {
+                "type": "string",
+              },
               "onChange": Object {
                 "type": "func",
               },
@@ -3297,7 +3204,7 @@ Map {
               "onUserAction": Object {
                 "type": "func",
               },
-              "render": Object {
+              "scrollIntoView": Object {
                 "type": "func",
               },
               "selectedItem": Object {
@@ -3309,6 +3216,9 @@ Map {
               "stateReducer": Object {
                 "type": "func",
               },
+              "suppressRefError": Object {
+                "type": "bool",
+              },
             },
           ],
           "type": "shape",
@@ -3414,31 +3324,15 @@ Map {
       "downshiftProps": Object {
         "args": Array [
           Object {
-            "breakingChanges": Object {
-              "args": Array [
-                Object {
-                  "resetInputOnSelection": Object {
-                    "type": "bool",
-                  },
-                },
-              ],
-              "type": "shape",
-            },
             "children": Object {
               "type": "func",
             },
             "defaultHighlightedIndex": Object {
               "type": "number",
             },
-            "defaultInputValue": Object {
-              "type": "string",
-            },
             "defaultIsOpen": Object {
               "type": "bool",
             },
-            "defaultSelectedItem": Object {
-              "type": "any",
-            },
             "environment": Object {
               "args": Array [
                 Object {
@@ -3471,12 +3365,30 @@ Map {
             "getA11yStatusMessage": Object {
               "type": "func",
             },
+            "getItemId": Object {
+              "type": "func",
+            },
             "highlightedIndex": Object {
               "type": "number",
             },
             "id": Object {
               "type": "string",
             },
+            "initialHighlightedIndex": Object {
+              "type": "number",
+            },
+            "initialInputValue": Object {
+              "type": "string",
+            },
+            "initialIsOpen": Object {
+              "type": "bool",
+            },
+            "initialSelectedItem": Object {
+              "type": "any",
+            },
+            "inputId": Object {
+              "type": "string",
+            },
             "inputValue": Object {
               "type": "string",
             },
@@ -3489,6 +3401,12 @@ Map {
             "itemToString": Object {
               "type": "func",
             },
+            "labelId": Object {
+              "type": "string",
+            },
+            "menuId": Object {
+              "type": "string",
+            },
             "onChange": Object {
               "type": "func",
             },
@@ -3507,7 +3425,7 @@ Map {
             "onUserAction": Object {
               "type": "func",
             },
-            "render": Object {
+            "scrollIntoView": Object {
               "type": "func",
             },
             "selectedItem": Object {
@@ -3519,6 +3437,9 @@ Map {
             "stateReducer": Object {
               "type": "func",
             },
+            "suppressRefError": Object {
+              "type": "bool",
+            },
           },
         ],
         "type": "shape",
diff --git a/packages/react/package.json b/packages/react/package.json
index afbce7e9c81a..0d4748618092 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -40,7 +40,7 @@
   "dependencies": {
     "@carbon/icons-react": "^10.10.2",
     "classnames": "2.2.6",
-    "downshift": "^1.31.14",
+    "downshift": "^5.0.5",
     "flatpickr": "4.6.1",
     "invariant": "^2.2.3",
     "lodash.debounce": "^4.0.8",
diff --git a/packages/react/src/components/Checkbox/Checkbox-test.js b/packages/react/src/components/Checkbox/Checkbox-test.js
index e92a721daf47..a98819a378f1 100644
--- a/packages/react/src/components/Checkbox/Checkbox-test.js
+++ b/packages/react/src/components/Checkbox/Checkbox-test.js
@@ -29,10 +29,6 @@ describe('Checkbox', () => {
         expect(label.hasClass(`${prefix}--checkbox-label`)).toEqual(true);
       });
 
-      it('has the expected htmlFor value', () => {
-        expect(label.props().htmlFor).toEqual('testing');
-      });
-
       it('applies extra classes to label', () => {
         expect(label.hasClass('extra-class')).toEqual(true);
       });
@@ -40,10 +36,6 @@ describe('Checkbox', () => {
       describe('input', () => {
         const input = () => wrapper.find('input');
 
-        it('has id set as expected', () => {
-          expect(input().props().id).toEqual('testing');
-        });
-
         it('defaultChecked prop sets defaultChecked on input', () => {
           expect(input().props().defaultChecked).toBeUndefined();
           wrapper.setProps({ defaultChecked: true });
diff --git a/packages/react/src/components/Checkbox/Checkbox.js b/packages/react/src/components/Checkbox/Checkbox.js
index a5fec39efab5..7a3feedefd18 100644
--- a/packages/react/src/components/Checkbox/Checkbox.js
+++ b/packages/react/src/components/Checkbox/Checkbox.js
@@ -57,7 +57,7 @@ const Checkbox = React.forwardRef(function Checkbox(
           }
         }}
       />
-      <label htmlFor={id} className={labelClasses} title={title || null}>
+      <label id={id} className={labelClasses} title={title || null}>
         <span className={innerLabelClasses}>{labelText}</span>
       </label>
     </div>
diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
index 7e1a3c0207fc..eca975a783d4 100644
--- a/packages/react/src/components/ComboBox/ComboBox.js
+++ b/packages/react/src/components/ComboBox/ComboBox.js
@@ -299,29 +299,17 @@ export default class ComboBox extends React.Component {
     const comboBoxHelperId = !helperText
       ? undefined
       : `combobox-helper-text-${this.comboBoxInstanceId}`;
-    const comboBoxLabelId = `combobox-label-${this.comboBoxInstanceId}`;
-    const title = titleText ? (
-      <label id={comboBoxLabelId} htmlFor={id} className={titleClasses}>
-        {titleText}
-      </label>
-    ) : null;
     const helperClasses = cx(`${prefix}--form__helper-text`, {
       [`${prefix}--form__helper-text--disabled`]: disabled,
     });
-    const helper = helperText ? (
-      <div id={comboBoxHelperId} className={helperClasses}>
-        {helperText}
-      </div>
-    ) : null;
     const wrapperClasses = cx(`${prefix}--list-box__wrapper`);
-    const comboBoxA11yId = `combobox-a11y-${this.comboBoxInstanceId}`;
     const inputClasses = cx(`${prefix}--text-input`, {
       [`${prefix}--text-input--empty`]: !this.state.inputValue,
     });
 
     // needs to be Capitalized for react to render it correctly
     const ItemToElement = itemToElement;
-    const input = (
+    return (
       <Downshift
         {...downshiftProps}
         onChange={this.handleOnChange}
@@ -332,122 +320,120 @@ export default class ComboBox extends React.Component {
         defaultSelectedItem={initialSelectedItem}
         selectedItem={selectedItem}>
         {({
-          getButtonProps,
+          getToggleButtonProps,
           getInputProps,
           getItemProps,
-          getRootProps,
+          getLabelProps,
           isOpen,
           inputValue,
           selectedItem,
           highlightedIndex,
           clearSelection,
           toggleMenu,
+          getMenuProps,
         }) => (
-          <ListBox
-            className={className}
-            disabled={disabled}
-            invalid={invalid}
-            id={comboBoxA11yId}
-            aria-label={ariaLabel}
-            invalidText={invalidText}
-            isOpen={isOpen}
-            light={light}
-            size={size}
-            {...getRootProps({ refKey: 'innerRef' })}>
-            <ListBox.Field
-              id={id}
+          <div className={wrapperClasses}>
+            {titleText && (
+              <label className={titleClasses} {...getLabelProps()}>
+                {titleText}
+              </label>
+            )}
+            {helperText && (
+              <div id={comboBoxHelperId} className={helperClasses}>
+                {helperText}
+              </div>
+            )}
+            <ListBox
+              className={className}
               disabled={disabled}
-              aria-labelledby={comboBoxLabelId}
-              aria-describedby={comboBoxHelperId}
-              {...getButtonProps({
-                disabled,
-                onClick: this.onToggleClick(isOpen),
-              })}>
-              <input
-                className={inputClasses}
-                aria-labelledby={comboBoxA11yId}
-                tabIndex="0"
-                aria-disabled={disabled}
-                aria-controls={isOpen ? `${id}__menu` : null}
-                aria-owns={isOpen ? `${id}__menu` : null}
-                aria-autocomplete="list"
-                ref={this.textInput}
-                title={inputValue}
-                {...rest}
-                {...getInputProps({
+              invalid={invalid}
+              aria-label={ariaLabel}
+              invalidText={invalidText}
+              isOpen={isOpen}
+              light={light}
+              size={size}>
+              <ListBox.Field
+                id={id}
+                {...getToggleButtonProps({
                   disabled,
-                  id,
-                  placeholder,
-                  onKeyDown: event => {
-                    event.stopPropagation();
-
-                    if (match(event, keys.Enter)) {
-                      toggleMenu();
-                    }
-                  },
-                })}
-              />
-              {invalid && (
-                <WarningFilled16
-                  className={`${prefix}--list-box__invalid-icon`}
+                  onClick: this.onToggleClick(isOpen),
+                })}>
+                <input
+                  disabled={disabled}
+                  className={inputClasses}
+                  type="text"
+                  tabIndex="0"
+                  aria-autocomplete="list"
+                  ref={this.textInput}
+                  {...rest}
+                  {...getInputProps({
+                    disabled,
+                    placeholder,
+                    onKeyDown: event => {
+                      event.stopPropagation();
+
+                      if (match(event, keys.Enter)) {
+                        toggleMenu();
+                      }
+                    },
+                  })}
                 />
-              )}
-              {inputValue && (
-                <ListBox.Selection
-                  clearSelection={clearSelection}
+                {invalid && (
+                  <WarningFilled16
+                    className={`${prefix}--list-box__invalid-icon`}
+                  />
+                )}
+                {inputValue && (
+                  <ListBox.Selection
+                    clearSelection={clearSelection}
+                    translateWithId={translateWithId}
+                    disabled={disabled}
+                  />
+                )}
+                <ListBox.MenuIcon
+                  isOpen={isOpen}
                   translateWithId={translateWithId}
-                  disabled={disabled}
                 />
+              </ListBox.Field>
+              {isOpen && (
+                <ListBox.Menu
+                  id={id}
+                  {...getMenuProps({ 'aria-label': ariaLabel })}>
+                  {this.filterItems(items, itemToString, inputValue).map(
+                    (item, index) => {
+                      const itemProps = getItemProps({ item, index });
+                      return (
+                        <ListBox.MenuItem
+                          key={itemProps.id}
+                          isActive={selectedItem === item}
+                          tabIndex="-1"
+                          isHighlighted={
+                            highlightedIndex === index ||
+                            (selectedItem && selectedItem.id === item.id) ||
+                            false
+                          }
+                          title={itemToElement ? item.text : itemToString(item)}
+                          {...itemProps}>
+                          {itemToElement ? (
+                            <ItemToElement key={itemProps.id} {...item} />
+                          ) : (
+                            itemToString(item)
+                          )}
+                          {selectedItem === item && (
+                            <Checkmark16
+                              className={`${prefix}--list-box__menu-item__selected-icon`}
+                            />
+                          )}
+                        </ListBox.MenuItem>
+                      );
+                    }
+                  )}
+                </ListBox.Menu>
               )}
-              <ListBox.MenuIcon
-                isOpen={isOpen}
-                translateWithId={translateWithId}
-              />
-            </ListBox.Field>
-            <ListBox.Menu aria-label={ariaLabel} id={id}>
-              {this.filterItems(items, itemToString, inputValue).map(
-                (item, index) => {
-                  const itemProps = getItemProps({
-                    item,
-                    index,
-                  });
-                  return (
-                    <ListBox.MenuItem
-                      key={itemProps.id}
-                      isActive={selectedItem === item}
-                      isHighlighted={
-                        highlightedIndex === index ||
-                        (selectedItem && selectedItem.id === item.id) ||
-                        false
-                      }
-                      title={itemToElement ? item.text : itemToString(item)}
-                      {...itemProps}>
-                      {itemToElement ? (
-                        <ItemToElement key={itemProps.id} {...item} />
-                      ) : (
-                        itemToString(item)
-                      )}
-                      {selectedItem === item && (
-                        <Checkmark16
-                          className={`${prefix}--list-box__menu-item__selected-icon`}
-                        />
-                      )}
-                    </ListBox.MenuItem>
-                  );
-                }
-              )}
-            </ListBox.Menu>
-          </ListBox>
+            </ListBox>
+          </div>
         )}
       </Downshift>
     );
-
-    return (
-      <div className={wrapperClasses}>
-        {title}
-        {helper}
-        {input}
-      </div>
-    );
   }
 }
diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js
index dbe71895c29d..e2f52c90c917 100644
--- a/packages/react/src/components/Dropdown/Dropdown-story.js
+++ b/packages/react/src/components/Dropdown/Dropdown-story.js
@@ -44,11 +44,6 @@ const stringItems = [
   'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, aliquam. Blanditiis quia nemo enim voluptatibus quos ducimus porro molestiae nesciunt error cumque quaerat, tempore vero unde eum aperiam eligendi repellendus.',
 ];
 
-const types = {
-  'Default (default)': 'default',
-  'Inline (inline)': 'inline',
-};
-
 const sizes = {
   'Extra large size (xl)': 'xl',
   'Default size': undefined,
@@ -62,7 +57,6 @@ const directions = {
 
 const props = () => ({
   id: text('Dropdown ID (id)', 'carbon-dropdown-example'),
-  type: select('Dropdown type (type)', types, 'default'),
   size: select('Field size (size)', sizes, undefined) || undefined,
   direction: select('Dropdown direction (direction)', directions, 'bottom'),
   label: text('Label (label)', 'Dropdown menu options'),
@@ -98,10 +92,29 @@ storiesOf('Dropdown', module)
       },
     }
   )
+  .add(
+    'inline',
+    () => (
+      <div style={{ width: 600 }}>
+        <Dropdown
+          {...props()}
+          type="inline"
+          items={items}
+          itemToString={item => (item ? item.text : '')}
+          onChange={action('onChange')}
+        />
+      </div>
+    ),
+    {
+      info: {
+        text: 'Dropdown',
+      },
+    }
+  )
   .add(
     'items as strings',
     () => (
-      <div style={{ width: 300 }}>
+      <div style={props.inline ? { width: 500 } : { width: 300 }}>
         <Dropdown
           {...props()}
           items={stringItems}
diff --git a/packages/react/src/components/Dropdown/Dropdown-test.js b/packages/react/src/components/Dropdown/Dropdown-test.js
index 0800892824fe..ea9f4f5f1d72 100644
--- a/packages/react/src/components/Dropdown/Dropdown-test.js
+++ b/packages/react/src/components/Dropdown/Dropdown-test.js
@@ -71,7 +71,7 @@ describe('Dropdown', () => {
 
     beforeEach(() => {
       wrapper = mount(<Dropdown titleText="Email Input" {...mockProps} />);
-      renderedLabel = wrapper.find('span[className="bx--label"]');
+      renderedLabel = wrapper.find('label[className="bx--label"]');
     });
 
     it('renders a title', () => {
diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
index dc8d8767b120..4edc58df3bc2 100644
--- a/packages/react/src/components/Dropdown/Dropdown.js
+++ b/packages/react/src/components/Dropdown/Dropdown.js
@@ -5,14 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import cx from 'classnames';
-import Downshift from 'downshift';
-import PropTypes from 'prop-types';
 import React from 'react';
+import { useSelect } from 'downshift';
 import { settings } from 'carbon-components';
-import { Checkmark16, WarningFilled16 } from '@carbon/icons-react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
 import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
-import { match, keys } from '../../internal/keyboard';
+import { Checkmark16, WarningFilled16 } from '@carbon/icons-react';
 
 const { prefix } = settings;
 
@@ -24,314 +23,279 @@ const defaultItemToString = item => {
   return item ? item.label : '';
 };
 
-export default class Dropdown extends React.Component {
-  static propTypes = {
-    /**
-     * Disable the control
-     */
-    disabled: PropTypes.bool,
-
-    /**
-     * We try to stay as generic as possible here to allow individuals to pass
-     * in a collection of whatever kind of data structure they prefer
-     */
-    items: PropTypes.array.isRequired,
-
-    /**
-     * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
-     * from their collection that are pre-selected
-     */
-    initialSelectedItem: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string,
-    ]),
-
-    /**
-     * Specify a custom `id`
-     */
-    id: PropTypes.string.isRequired,
-
-    /**
-     * Specify whether you want the inline version of this control
-     */
-    inline: PropTypes.bool,
-
-    /**
-     * Specify if the currently selected value is invalid.
-     */
-    invalid: PropTypes.bool,
-
-    /**
-     * Message which is displayed if the value is invalid.
-     */
-    invalidText: PropTypes.string,
-
-    /**
-     * Helper function passed to downshift that allows the library to render a
-     * given item to a string label. By default, it extracts the `label` field
-     * from a given item to serve as the item label in the list.
-     */
-    itemToString: PropTypes.func,
-
-    /**
-     * Function to render items as custom components instead of strings.
-     * Defaults to null and is overriden by a getter
-     */
-    itemToElement: PropTypes.func,
-
-    /**
-     * `onChange` is a utility for this controlled component to communicate to a
-     * consuming component what kind of internal state changes are occuring.
-     */
-    onChange: PropTypes.func,
-
-    /**
-     * Generic `label` that will be used as the textual representation of what
-     * this field is for
-     */
-    label: PropTypes.node.isRequired,
-
-    /**
-     * Callback function for translating ListBoxMenuIcon SVG title
-     */
-    translateWithId: PropTypes.func,
-
-    /**
-     * 'aria-label' of the ListBox component.
-     */
-    ariaLabel: PropTypes.string,
-
-    /**
-     * The dropdown type, `default` or `inline`
-     */
-    type: ListBoxPropTypes.ListBoxType,
-
-    /**
-     * Specify the size of the ListBox. Currently supports either `sm` or `xl` as an option.
-     */
-    size: ListBoxPropTypes.ListBoxSize,
-
-    /**
-     * In the case you want to control the dropdown selection entirely.
-     */
-    selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-
-    /**
-     * `true` to use the light version.
-     */
-    light: PropTypes.bool,
-
-    /**
-     * Provide the title text that will be read by a screen reader when
-     * visiting this control
-     */
-    titleText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
-    /**
-     * Provide helper text that is used alongside the control label for
-     * additional help
-     */
-    helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
-    /**
-     * Additional props passed to Downshift
-     */
-    downshiftProps: PropTypes.shape(Downshift.propTypes),
-
-    /**
-     * Specify the direction of the dropdown. Can be either top or bottom.
-     */
-    direction: PropTypes.oneOf(['top', 'bottom']),
+function Dropdown({
+  className: containerClassName,
+  disabled,
+  direction,
+  items,
+  label,
+  ariaLabel,
+  itemToString,
+  itemToElement,
+  type,
+  size,
+  onChange,
+  id,
+  titleText,
+  helperText,
+  translateWithId,
+  light,
+  invalid,
+  invalidText,
+  initialSelectedItem,
+  selectedItem: controlledSelectedItem,
+}) {
+  const selectProps = {
+    items,
+    itemToString,
+    initialSelectedItem,
+    onSelectedItemChange,
   };
 
-  static defaultProps = {
-    disabled: false,
-    type: 'default',
-    itemToString: defaultItemToString,
-    itemToElement: null,
-    light: false,
-    titleText: '',
-    helperText: '',
-    direction: 'bottom',
-  };
+  // only set selectedItem if the prop is defined. Setting if it is undefined
+  // will overwrite default selected items from useSelect
+  if (controlledSelectedItem !== undefined) {
+    selectProps.selectedItem = controlledSelectedItem;
+  }
+
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    selectedItem,
+  } = useSelect(selectProps);
+  const inline = type === 'inline';
+
+  const className = cx(`${prefix}--dropdown`, containerClassName, {
+    [`${prefix}--dropdown--invalid`]: invalid,
+    [`${prefix}--dropdown--open`]: isOpen,
+    [`${prefix}--dropdown--inline`]: inline,
+    [`${prefix}--dropdown--disabled`]: disabled,
+    [`${prefix}--dropdown--light`]: light,
+    [`${prefix}--dropdown--${size}`]: size,
+    [`${prefix}--list-box--up`]: direction === 'top',
+  });
+
+  const titleClasses = cx(`${prefix}--label`, {
+    [`${prefix}--label--disabled`]: disabled,
+  });
 
-  handleOnChange = selectedItem => {
-    if (this.props.onChange) {
-      this.props.onChange({ selectedItem });
+  const helperClasses = cx(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled,
+  });
+
+  const wrapperClasses = cx(
+    `${prefix}--dropdown__wrapper`,
+    `${prefix}--list-box__wrapper`,
+    {
+      [`${prefix}--dropdown__wrapper--inline`]: inline,
+      [`${prefix}--list-box__wrapper--inline`]: inline,
+      [`${prefix}--dropdown__wrapper--inline--invalid`]: inline && invalid,
+      [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
     }
-  };
+  );
 
-  render() {
-    const {
-      className: containerClassName,
-      disabled,
-      items,
-      label,
-      ariaLabel,
-      itemToString,
-      itemToElement,
-      type,
-      size,
-      initialSelectedItem,
-      selectedItem,
-      id,
-      titleText,
-      helperText,
-      translateWithId,
-      light,
-      invalid,
-      invalidText,
-      downshiftProps,
-      direction,
-    } = this.props;
-    const inline = type === 'inline';
-    const className = ({ isOpen }) =>
-      cx(`${prefix}--dropdown`, containerClassName, {
-        [`${prefix}--dropdown--invalid`]: invalid,
-        [`${prefix}--dropdown--open`]: isOpen,
-        [`${prefix}--dropdown--inline`]: inline,
-        [`${prefix}--dropdown--disabled`]: disabled,
-        [`${prefix}--dropdown--light`]: light,
-        [`${prefix}--dropdown--${size}`]: size,
-        [`${prefix}--list-box--up`]: direction === 'top',
-      });
-    const titleClasses = cx(`${prefix}--label`, {
-      [`${prefix}--label--disabled`]: disabled,
-    });
-
-    const helperId =
-      !id || !helperText ? undefined : `dropdown-helper-text-${id}`;
-    const labelId = `dropdown-label-${id}`;
-    const fieldLabelId = `dropdown-field-label-${id}`;
-
-    const title = titleText ? (
-      <span className={titleClasses}>{titleText}</span>
-    ) : null;
-    const helperClasses = cx(`${prefix}--form__helper-text`, {
-      [`${prefix}--form__helper-text--disabled`]: disabled,
-    });
-    const helper = helperText ? (
-      <div id={helperId} className={helperClasses}>
-        {helperText}
-      </div>
-    ) : null;
-    const wrapperClasses = cx(
-      `${prefix}--dropdown__wrapper`,
-      `${prefix}--list-box__wrapper`,
-      {
-        [`${prefix}--dropdown__wrapper--inline`]: inline,
-        [`${prefix}--list-box__wrapper--inline`]: inline,
-        [`${prefix}--dropdown__wrapper--inline--invalid`]: inline && invalid,
-        [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
-      }
-    );
-
-    // needs to be Capitalized for react to render it correctly
-    const ItemToElement = itemToElement;
-    return (
-      <div className={wrapperClasses}>
-        {title}
-        {!inline && helper}
-        <Downshift
-          {...downshiftProps}
-          onChange={this.handleOnChange}
-          itemToString={itemToString}
-          defaultSelectedItem={initialSelectedItem}
-          selectedItem={selectedItem}>
-          {({
-            isOpen,
-            itemToString,
-            selectedItem,
-            highlightedIndex,
-            getRootProps,
-            getButtonProps,
-            getItemProps,
-            getLabelProps,
-            toggleMenu,
-          }) => {
-            const buttonProps = {
-              ...getButtonProps({
-                onKeyDown: event => {
-                  if (match(event, keys.Enter)) {
-                    toggleMenu();
-                  }
-                },
-                disabled,
-              }),
-              'aria-label': undefined,
-            };
-            return (
-              <ListBox
-                type={type}
-                size={size}
-                id={id}
-                aria-label={ariaLabel}
-                className={className({ isOpen })}
-                disabled={disabled}
-                isOpen={isOpen}
-                invalid={invalid}
-                invalidText={invalidText}
-                light={light}
-                {...getRootProps({ refKey: 'innerRef' })}>
-                {invalid && (
-                  <WarningFilled16
-                    className={`${prefix}--list-box__invalid-icon`}
-                  />
-                )}
-                <ListBox.Field
-                  id={id}
-                  tabIndex="0"
-                  disabled={disabled}
-                  aria-disabled={disabled}
-                  aria-labelledby={`${labelId} ${fieldLabelId}`}
-                  aria-describedby={helperId}
-                  {...buttonProps}>
-                  <span
-                    id={fieldLabelId}
-                    className={`${prefix}--list-box__label`}
-                    title={selectedItem ? itemToString(selectedItem) : label}
-                    {...getLabelProps()}>
-                    {selectedItem ? itemToString(selectedItem) : label}
-                  </span>
-                  <ListBox.MenuIcon
-                    isOpen={isOpen}
-                    translateWithId={translateWithId}
-                  />
-                </ListBox.Field>
-                <ListBox.Menu aria-labelledby={id} id={id}>
-                  {items.map((item, index) => {
-                    const itemProps = getItemProps({
-                      item,
-                      index,
-                    });
-                    return (
-                      <ListBox.MenuItem
-                        key={itemProps.id}
-                        isActive={selectedItem === item}
-                        isHighlighted={
-                          highlightedIndex === index || selectedItem === item
-                        }
-                        title={itemToElement ? item.text : itemToString(item)}
-                        {...itemProps}>
-                        {itemToElement ? (
-                          <ItemToElement key={itemProps.id} {...item} />
-                        ) : (
-                          itemToString(item)
-                        )}
-                        {selectedItem === item && (
-                          <Checkmark16
-                            className={`${prefix}--list-box__menu-item__selected-icon`}
-                          />
-                        )}
-                      </ListBox.MenuItem>
-                    );
-                  })}
-                </ListBox.Menu>
-              </ListBox>
-            );
-          }}
-        </Downshift>
-      </div>
-    );
+  // needs to be Capitalized for react to render it correctly
+  const ItemToElement = itemToElement;
+
+  const helper = helperText ? (
+    <div className={helperClasses}>{helperText}</div>
+  ) : null;
+
+  function onSelectedItemChange({ selectedItem }) {
+    if (onChange) {
+      onChange({ selectedItem });
+    }
   }
+
+  return (
+    <div className={wrapperClasses}>
+      {titleText && (
+        <label className={titleClasses} {...getLabelProps()}>
+          {titleText}
+        </label>
+      )}
+      {!inline && helper}
+      <ListBox
+        aria-label={ariaLabel}
+        size={size}
+        className={className}
+        invalid={invalid}
+        invalidText={invalidText}
+        light={light}
+        isOpen={isOpen}>
+        {invalid && (
+          <WarningFilled16 className={`${prefix}--list-box__invalid-icon`} />
+        )}
+        <button
+          id={id}
+          className={`${prefix}--list-box__field`}
+          disabled={disabled}
+          aria-disabled={disabled}
+          {...getToggleButtonProps()}>
+          <span className={`${prefix}--list-box__label`}>
+            {selectedItem ? itemToString(selectedItem) : label}
+          </span>
+          <ListBox.MenuIcon isOpen={isOpen} translateWithId={translateWithId} />
+        </button>
+        <ListBox.Menu {...getMenuProps()}>
+          {isOpen &&
+            items.map((item, index) => {
+              const itemProps = getItemProps({ item, index });
+              return (
+                <ListBox.MenuItem
+                  key={itemProps.id}
+                  isActive={selectedItem === item}
+                  isHighlighted={
+                    highlightedIndex === index || selectedItem === item
+                  }
+                  title={itemToElement ? item.text : itemToString(item)}
+                  {...itemProps}>
+                  {itemToElement ? (
+                    <ItemToElement key={itemProps.id} {...item} />
+                  ) : (
+                    itemToString(item)
+                  )}
+                  {selectedItem === item && (
+                    <Checkmark16
+                      className={`${prefix}--list-box__menu-item__selected-icon`}
+                    />
+                  )}
+                </ListBox.MenuItem>
+              );
+            })}
+        </ListBox.Menu>
+      </ListBox>
+    </div>
+  );
 }
+
+Dropdown.propTypes = {
+  /**
+   * Disable the control
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * We try to stay as generic as possible here to allow individuals to pass
+   * in a collection of whatever kind of data structure they prefer
+   */
+  items: PropTypes.array.isRequired,
+
+  /**
+   * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
+   * from their collection that are pre-selected
+   */
+  initialSelectedItem: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string,
+  ]),
+
+  /**
+   * Specify a custom `id`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify whether you want the inline version of this control
+   */
+  inline: PropTypes.bool,
+
+  /**
+   * Specify if the currently selected value is invalid.
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText: PropTypes.string,
+
+  /**
+   * Helper function passed to downshift that allows the library to render a
+   * given item to a string label. By default, it extracts the `label` field
+   * from a given item to serve as the item label in the list.
+   */
+  itemToString: PropTypes.func,
+
+  /**
+   * Function to render items as custom components instead of strings.
+   * Defaults to null and is overriden by a getter
+   */
+  itemToElement: PropTypes.func,
+
+  /**
+   * `onChange` is a utility for this controlled component to communicate to a
+   * consuming component what kind of internal state changes are occuring.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  label: PropTypes.node.isRequired,
+
+  /**
+   * Callback function for translating ListBoxMenuIcon SVG title
+   */
+  translateWithId: PropTypes.func,
+
+  /**
+   * 'aria-label' of the ListBox component.
+   */
+  ariaLabel: PropTypes.string,
+
+  /**
+   * The dropdown type, `default` or `inline`
+   */
+  type: ListBoxPropTypes.ListBoxType,
+
+  /**
+   * Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.
+   */
+  size: ListBoxPropTypes.ListBoxSize,
+
+  /**
+   * In the case you want to control the dropdown selection entirely.
+   */
+  selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+
+  /**
+   * `true` to use the light version.
+   */
+  light: PropTypes.bool,
+
+  /**
+   * Provide the title text that will be read by a screen reader when
+   * visiting this control
+   */
+  titleText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+  /**
+   * Provide helper text that is used alongside the control label for
+   * additional help
+   */
+  helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+  /**
+   * Specify the direction of the dropdown. Can be either top or bottom.
+   */
+  direction: PropTypes.oneOf(['top', 'bottom']),
+};
+
+Dropdown.defaultProps = {
+  disabled: false,
+  type: 'default',
+  itemToString: defaultItemToString,
+  itemToElement: null,
+  light: false,
+  titleText: '',
+  helperText: '',
+  direction: 'bottom',
+};
+
+export default Dropdown;
diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
index b6af42a63a51..16c21c5843c6 100644
--- a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
+++ b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
@@ -47,262 +47,99 @@ exports[`Dropdown should render 1`] = `
   <div
     className="bx--dropdown__wrapper bx--list-box__wrapper"
   >
-    <Downshift
-      breakingChanges={Object {}}
-      defaultHighlightedIndex={null}
-      defaultInputValue=""
-      defaultIsOpen={false}
-      defaultSelectedItem={null}
-      environment={[Window]}
-      getA11yStatusMessage={[Function]}
-      itemToString={[Function]}
-      onChange={[Function]}
-      onInputValueChange={[Function]}
-      onOuterClick={[Function]}
-      onSelect={[Function]}
-      onStateChange={[Function]}
-      onUserAction={[Function]}
-      selectedItemChanged={[Function]}
-      stateReducer={[Function]}
+    <ListBox
+      className="bx--dropdown"
+      disabled={false}
+      isOpen={false}
+      light={false}
+      type="default"
     >
-      <ListBox
-        className="bx--dropdown"
-        disabled={false}
-        id="test-dropdown"
-        innerRef={[Function]}
-        isOpen={false}
-        light={false}
-        type="default"
+      <div
+        className="bx--dropdown bx--list-box"
+        onClick={[Function]}
+        onKeyDown={[Function]}
       >
-        <div
-          className="bx--dropdown bx--list-box"
-          id="test-dropdown"
+        <button
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup="listbox"
+          aria-labelledby="downshift-0-label downshift-0-toggle-button"
+          className="bx--list-box__field"
+          disabled={false}
+          id="downshift-0-toggle-button"
           onClick={[Function]}
           onKeyDown={[Function]}
         >
-          <ListBoxField
-            aria-disabled={false}
-            aria-expanded={false}
-            aria-haspopup={true}
-            aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown"
-            data-toggle={true}
-            disabled={false}
-            id="test-dropdown"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            role="button"
-            tabIndex="0"
-            type="button"
+          <span
+            className="bx--list-box__label"
+          >
+            input
+          </span>
+          <ListBoxMenuIcon
+            isOpen={false}
+            translateWithId={[Function]}
           >
             <div
-              aria-controls={null}
-              aria-disabled={false}
-              aria-expanded={false}
-              aria-haspopup={true}
-              aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown"
-              aria-owns={null}
-              className="bx--list-box__field"
-              data-toggle={true}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              role="button"
-              tabIndex="0"
-              type="button"
+              className="bx--list-box__menu-icon"
             >
-              <span
-                className="bx--list-box__label"
-                htmlFor="downshift-0-input"
-                id="dropdown-field-label-test-dropdown"
-                title="input"
+              <ForwardRef(ChevronDown16)
+                aria-label="Open menu"
+                name="chevron--down"
               >
-                input
-              </span>
-              <ListBoxMenuIcon
-                isOpen={false}
-                translateWithId={[Function]}
-              >
-                <div
-                  className="bx--list-box__menu-icon"
+                <Icon
+                  aria-label="Open menu"
+                  height={16}
+                  name="chevron--down"
+                  preserveAspectRatio="xMidYMid meet"
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <ForwardRef(ChevronDown16)
+                  <svg
                     aria-label="Open menu"
+                    focusable="false"
+                    height={16}
                     name="chevron--down"
+                    preserveAspectRatio="xMidYMid meet"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width={16}
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <Icon
-                      aria-label="Open menu"
-                      height={16}
-                      name="chevron--down"
-                      preserveAspectRatio="xMidYMid meet"
-                      viewBox="0 0 16 16"
-                      width={16}
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <svg
-                        aria-label="Open menu"
-                        focusable="false"
-                        height={16}
-                        name="chevron--down"
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
-                        />
-                        <title>
-                          Open menu
-                        </title>
-                      </svg>
-                    </Icon>
-                  </ForwardRef(ChevronDown16)>
-                </div>
-              </ListBoxMenuIcon>
+                    <path
+                      d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
+                    />
+                    <title>
+                      Open menu
+                    </title>
+                  </svg>
+                </Icon>
+              </ForwardRef(ChevronDown16)>
             </div>
-          </ListBoxField>
-          <ListBoxMenu
-            aria-labelledby="test-dropdown"
-            id="test-dropdown"
-          >
-            <div
-              aria-labelledby="test-dropdown"
-              className="bx--list-box__menu"
-              id="test-dropdown__menu"
-              role="listbox"
-            >
-              <ListBoxMenuItem
-                id="downshift-0-item-0"
-                isActive={false}
-                isHighlighted={false}
-                key="downshift-0-item-0"
-                onClick={[Function]}
-                onMouseDown={[Function]}
-                onMouseMove={[Function]}
-                title="Item 0"
-              >
-                <div
-                  className="bx--list-box__menu-item"
-                  id="downshift-0-item-0"
-                  onClick={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseMove={[Function]}
-                  title="Item 0"
-                >
-                  <div
-                    className="bx--list-box__menu-item__option"
-                  >
-                    Item 0
-                  </div>
-                </div>
-              </ListBoxMenuItem>
-              <ListBoxMenuItem
-                id="downshift-0-item-1"
-                isActive={false}
-                isHighlighted={false}
-                key="downshift-0-item-1"
-                onClick={[Function]}
-                onMouseDown={[Function]}
-                onMouseMove={[Function]}
-                title="Item 1"
-              >
-                <div
-                  className="bx--list-box__menu-item"
-                  id="downshift-0-item-1"
-                  onClick={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseMove={[Function]}
-                  title="Item 1"
-                >
-                  <div
-                    className="bx--list-box__menu-item__option"
-                  >
-                    Item 1
-                  </div>
-                </div>
-              </ListBoxMenuItem>
-              <ListBoxMenuItem
-                id="downshift-0-item-2"
-                isActive={false}
-                isHighlighted={false}
-                key="downshift-0-item-2"
-                onClick={[Function]}
-                onMouseDown={[Function]}
-                onMouseMove={[Function]}
-                title="Item 2"
-              >
-                <div
-                  className="bx--list-box__menu-item"
-                  id="downshift-0-item-2"
-                  onClick={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseMove={[Function]}
-                  title="Item 2"
-                >
-                  <div
-                    className="bx--list-box__menu-item__option"
-                  >
-                    Item 2
-                  </div>
-                </div>
-              </ListBoxMenuItem>
-              <ListBoxMenuItem
-                id="downshift-0-item-3"
-                isActive={false}
-                isHighlighted={false}
-                key="downshift-0-item-3"
-                onClick={[Function]}
-                onMouseDown={[Function]}
-                onMouseMove={[Function]}
-                title="Item 3"
-              >
-                <div
-                  className="bx--list-box__menu-item"
-                  id="downshift-0-item-3"
-                  onClick={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseMove={[Function]}
-                  title="Item 3"
-                >
-                  <div
-                    className="bx--list-box__menu-item__option"
-                  >
-                    Item 3
-                  </div>
-                </div>
-              </ListBoxMenuItem>
-              <ListBoxMenuItem
-                id="downshift-0-item-4"
-                isActive={false}
-                isHighlighted={false}
-                key="downshift-0-item-4"
-                onClick={[Function]}
-                onMouseDown={[Function]}
-                onMouseMove={[Function]}
-                title="Item 4"
-              >
-                <div
-                  className="bx--list-box__menu-item"
-                  id="downshift-0-item-4"
-                  onClick={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseMove={[Function]}
-                  title="Item 4"
-                >
-                  <div
-                    className="bx--list-box__menu-item__option"
-                  >
-                    Item 4
-                  </div>
-                </div>
-              </ListBoxMenuItem>
-            </div>
-          </ListBoxMenu>
-        </div>
-      </ListBox>
-    </Downshift>
+          </ListBoxMenuIcon>
+        </button>
+        <ListBoxMenu
+          aria-labelledby="downshift-0-label"
+          id="downshift-0-menu"
+          onBlur={[Function]}
+          onKeyDown={[Function]}
+          onMouseLeave={[Function]}
+          role="listbox"
+          tabIndex={-1}
+        >
+          <div
+            aria-labelledby="downshift-0-label"
+            className="bx--list-box__menu"
+            id="downshift-0-menu"
+            onBlur={[Function]}
+            onKeyDown={[Function]}
+            onMouseLeave={[Function]}
+            role="listbox"
+            tabIndex={-1}
+          />
+        </ListBoxMenu>
+      </div>
+    </ListBox>
   </div>
 </Dropdown>
 `;
@@ -354,307 +191,280 @@ exports[`Dropdown should render custom item components 1`] = `
   <div
     className="bx--dropdown__wrapper bx--list-box__wrapper"
   >
-    <Downshift
-      breakingChanges={Object {}}
-      defaultHighlightedIndex={null}
-      defaultInputValue=""
-      defaultIsOpen={false}
-      defaultSelectedItem={null}
-      environment={[Window]}
-      getA11yStatusMessage={[Function]}
-      itemToString={[Function]}
-      onChange={[Function]}
-      onInputValueChange={[Function]}
-      onOuterClick={[Function]}
-      onSelect={[Function]}
-      onStateChange={[Function]}
-      onUserAction={[Function]}
-      selectedItemChanged={[Function]}
-      stateReducer={[Function]}
+    <ListBox
+      className="bx--dropdown bx--dropdown--open"
+      disabled={false}
+      isOpen={true}
+      light={false}
+      type="default"
     >
-      <ListBox
-        className="bx--dropdown bx--dropdown--open"
-        disabled={false}
-        id="test-dropdown"
-        innerRef={[Function]}
-        isOpen={true}
-        light={false}
-        type="default"
+      <div
+        className="bx--dropdown bx--dropdown--open bx--list-box bx--list-box--expanded"
+        onClick={[Function]}
+        onKeyDown={[Function]}
       >
-        <div
-          className="bx--dropdown bx--dropdown--open bx--list-box bx--list-box--expanded"
-          id="test-dropdown"
+        <button
+          aria-disabled={false}
+          aria-expanded={true}
+          aria-haspopup="listbox"
+          aria-labelledby="downshift-6-label downshift-6-toggle-button"
+          className="bx--list-box__field"
+          disabled={false}
+          id="downshift-6-toggle-button"
           onClick={[Function]}
           onKeyDown={[Function]}
         >
-          <ListBoxField
-            aria-disabled={false}
-            aria-expanded={true}
-            aria-haspopup={true}
-            aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown"
-            data-toggle={true}
-            disabled={false}
-            id="test-dropdown"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            role="button"
-            tabIndex="0"
-            type="button"
+          <span
+            className="bx--list-box__label"
+          >
+            input
+          </span>
+          <ListBoxMenuIcon
+            isOpen={true}
+            translateWithId={[Function]}
           >
             <div
-              aria-controls="test-dropdown__menu"
-              aria-disabled={false}
-              aria-expanded={true}
-              aria-haspopup={true}
-              aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown"
-              aria-owns="test-dropdown__menu"
-              className="bx--list-box__field"
-              data-toggle={true}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              role="button"
-              tabIndex="0"
-              type="button"
+              className="bx--list-box__menu-icon bx--list-box__menu-icon--open"
             >
-              <span
-                className="bx--list-box__label"
-                htmlFor="downshift-4-input"
-                id="dropdown-field-label-test-dropdown"
-                title="input"
+              <ForwardRef(ChevronDown16)
+                aria-label="Close menu"
+                name="chevron--down"
               >
-                input
-              </span>
-              <ListBoxMenuIcon
-                isOpen={true}
-                translateWithId={[Function]}
-              >
-                <div
-                  className="bx--list-box__menu-icon bx--list-box__menu-icon--open"
+                <Icon
+                  aria-label="Close menu"
+                  height={16}
+                  name="chevron--down"
+                  preserveAspectRatio="xMidYMid meet"
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <ForwardRef(ChevronDown16)
+                  <svg
                     aria-label="Close menu"
+                    focusable="false"
+                    height={16}
                     name="chevron--down"
+                    preserveAspectRatio="xMidYMid meet"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width={16}
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <Icon
-                      aria-label="Close menu"
-                      height={16}
-                      name="chevron--down"
-                      preserveAspectRatio="xMidYMid meet"
-                      viewBox="0 0 16 16"
-                      width={16}
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <svg
-                        aria-label="Close menu"
-                        focusable="false"
-                        height={16}
-                        name="chevron--down"
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
-                        />
-                        <title>
-                          Close menu
-                        </title>
-                      </svg>
-                    </Icon>
-                  </ForwardRef(ChevronDown16)>
-                </div>
-              </ListBoxMenuIcon>
+                    <path
+                      d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
+                    />
+                    <title>
+                      Close menu
+                    </title>
+                  </svg>
+                </Icon>
+              </ForwardRef(ChevronDown16)>
             </div>
-          </ListBoxField>
-          <ListBoxMenu
-            aria-labelledby="test-dropdown"
-            id="test-dropdown"
+          </ListBoxMenuIcon>
+        </button>
+        <ListBoxMenu
+          aria-labelledby="downshift-6-label"
+          id="downshift-6-menu"
+          onBlur={[Function]}
+          onKeyDown={[Function]}
+          onMouseLeave={[Function]}
+          role="listbox"
+          tabIndex={-1}
+        >
+          <div
+            aria-labelledby="downshift-6-label"
+            className="bx--list-box__menu"
+            id="downshift-6-menu"
+            onBlur={[Function]}
+            onKeyDown={[Function]}
+            onMouseLeave={[Function]}
+            role="listbox"
+            tabIndex={-1}
           >
-            <div
-              aria-labelledby="test-dropdown"
-              className="bx--list-box__menu"
-              id="test-dropdown__menu"
-              role="listbox"
+            <ListBoxMenuItem
+              aria-selected="false"
+              id="downshift-6-item-0"
+              isActive={false}
+              isHighlighted={false}
+              key="downshift-6-item-0"
+              onClick={[Function]}
+              onMouseMove={[Function]}
+              role="option"
             >
-              <ListBoxMenuItem
-                id="downshift-4-item-0"
-                isActive={false}
-                isHighlighted={false}
-                key="downshift-4-item-0"
+              <div
+                aria-selected="false"
+                className="bx--list-box__menu-item"
+                id="downshift-6-item-0"
                 onClick={[Function]}
-                onMouseDown={[Function]}
                 onMouseMove={[Function]}
+                role="option"
               >
                 <div
-                  className="bx--list-box__menu-item"
-                  id="downshift-4-item-0"
-                  onClick={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseMove={[Function]}
+                  className="bx--list-box__menu-item__option"
                 >
-                  <div
-                    className="bx--list-box__menu-item__option"
+                  <itemToElement
+                    id="id-0"
+                    key="downshift-6-item-0"
+                    label="Item 0"
+                    value={0}
                   >
-                    <itemToElement
-                      id="id-0"
-                      key="downshift-4-item-0"
-                      label="Item 0"
-                      value={0}
+                    <div
+                      className="mock-item"
                     >
-                      <div
-                        className="mock-item"
-                      >
-                        Item 0
-                      </div>
-                    </itemToElement>
-                  </div>
+                      Item 0
+                    </div>
+                  </itemToElement>
                 </div>
-              </ListBoxMenuItem>
-              <ListBoxMenuItem
-                id="downshift-4-item-1"
-                isActive={false}
-                isHighlighted={false}
-                key="downshift-4-item-1"
+              </div>
+            </ListBoxMenuItem>
+            <ListBoxMenuItem
+              aria-selected="false"
+              id="downshift-6-item-1"
+              isActive={false}
+              isHighlighted={false}
+              key="downshift-6-item-1"
+              onClick={[Function]}
+              onMouseMove={[Function]}
+              role="option"
+            >
+              <div
+                aria-selected="false"
+                className="bx--list-box__menu-item"
+                id="downshift-6-item-1"
                 onClick={[Function]}
-                onMouseDown={[Function]}
                 onMouseMove={[Function]}
+                role="option"
               >
                 <div
-                  className="bx--list-box__menu-item"
-                  id="downshift-4-item-1"
-                  onClick={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseMove={[Function]}
+                  className="bx--list-box__menu-item__option"
                 >
-                  <div
-                    className="bx--list-box__menu-item__option"
+                  <itemToElement
+                    id="id-1"
+                    key="downshift-6-item-1"
+                    label="Item 1"
+                    value={1}
                   >
-                    <itemToElement
-                      id="id-1"
-                      key="downshift-4-item-1"
-                      label="Item 1"
-                      value={1}
+                    <div
+                      className="mock-item"
                     >
-                      <div
-                        className="mock-item"
-                      >
-                        Item 1
-                      </div>
-                    </itemToElement>
-                  </div>
+                      Item 1
+                    </div>
+                  </itemToElement>
                 </div>
-              </ListBoxMenuItem>
-              <ListBoxMenuItem
-                id="downshift-4-item-2"
-                isActive={false}
-                isHighlighted={false}
-                key="downshift-4-item-2"
+              </div>
+            </ListBoxMenuItem>
+            <ListBoxMenuItem
+              aria-selected="false"
+              id="downshift-6-item-2"
+              isActive={false}
+              isHighlighted={false}
+              key="downshift-6-item-2"
+              onClick={[Function]}
+              onMouseMove={[Function]}
+              role="option"
+            >
+              <div
+                aria-selected="false"
+                className="bx--list-box__menu-item"
+                id="downshift-6-item-2"
                 onClick={[Function]}
-                onMouseDown={[Function]}
                 onMouseMove={[Function]}
+                role="option"
               >
                 <div
-                  className="bx--list-box__menu-item"
-                  id="downshift-4-item-2"
-                  onClick={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseMove={[Function]}
+                  className="bx--list-box__menu-item__option"
                 >
-                  <div
-                    className="bx--list-box__menu-item__option"
+                  <itemToElement
+                    id="id-2"
+                    key="downshift-6-item-2"
+                    label="Item 2"
+                    value={2}
                   >
-                    <itemToElement
-                      id="id-2"
-                      key="downshift-4-item-2"
-                      label="Item 2"
-                      value={2}
+                    <div
+                      className="mock-item"
                     >
-                      <div
-                        className="mock-item"
-                      >
-                        Item 2
-                      </div>
-                    </itemToElement>
-                  </div>
+                      Item 2
+                    </div>
+                  </itemToElement>
                 </div>
-              </ListBoxMenuItem>
-              <ListBoxMenuItem
-                id="downshift-4-item-3"
-                isActive={false}
-                isHighlighted={false}
-                key="downshift-4-item-3"
+              </div>
+            </ListBoxMenuItem>
+            <ListBoxMenuItem
+              aria-selected="false"
+              id="downshift-6-item-3"
+              isActive={false}
+              isHighlighted={false}
+              key="downshift-6-item-3"
+              onClick={[Function]}
+              onMouseMove={[Function]}
+              role="option"
+            >
+              <div
+                aria-selected="false"
+                className="bx--list-box__menu-item"
+                id="downshift-6-item-3"
                 onClick={[Function]}
-                onMouseDown={[Function]}
                 onMouseMove={[Function]}
+                role="option"
               >
                 <div
-                  className="bx--list-box__menu-item"
-                  id="downshift-4-item-3"
-                  onClick={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseMove={[Function]}
+                  className="bx--list-box__menu-item__option"
                 >
-                  <div
-                    className="bx--list-box__menu-item__option"
+                  <itemToElement
+                    id="id-3"
+                    key="downshift-6-item-3"
+                    label="Item 3"
+                    value={3}
                   >
-                    <itemToElement
-                      id="id-3"
-                      key="downshift-4-item-3"
-                      label="Item 3"
-                      value={3}
+                    <div
+                      className="mock-item"
                     >
-                      <div
-                        className="mock-item"
-                      >
-                        Item 3
-                      </div>
-                    </itemToElement>
-                  </div>
+                      Item 3
+                    </div>
+                  </itemToElement>
                 </div>
-              </ListBoxMenuItem>
-              <ListBoxMenuItem
-                id="downshift-4-item-4"
-                isActive={false}
-                isHighlighted={false}
-                key="downshift-4-item-4"
+              </div>
+            </ListBoxMenuItem>
+            <ListBoxMenuItem
+              aria-selected="false"
+              id="downshift-6-item-4"
+              isActive={false}
+              isHighlighted={false}
+              key="downshift-6-item-4"
+              onClick={[Function]}
+              onMouseMove={[Function]}
+              role="option"
+            >
+              <div
+                aria-selected="false"
+                className="bx--list-box__menu-item"
+                id="downshift-6-item-4"
                 onClick={[Function]}
-                onMouseDown={[Function]}
                 onMouseMove={[Function]}
+                role="option"
               >
                 <div
-                  className="bx--list-box__menu-item"
-                  id="downshift-4-item-4"
-                  onClick={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseMove={[Function]}
+                  className="bx--list-box__menu-item__option"
                 >
-                  <div
-                    className="bx--list-box__menu-item__option"
+                  <itemToElement
+                    id="id-4"
+                    key="downshift-6-item-4"
+                    label="Item 4"
+                    value={4}
                   >
-                    <itemToElement
-                      id="id-4"
-                      key="downshift-4-item-4"
-                      label="Item 4"
-                      value={4}
+                    <div
+                      className="mock-item"
                     >
-                      <div
-                        className="mock-item"
-                      >
-                        Item 4
-                      </div>
-                    </itemToElement>
-                  </div>
+                      Item 4
+                    </div>
+                  </itemToElement>
                 </div>
-              </ListBoxMenuItem>
-            </div>
-          </ListBoxMenu>
-        </div>
-      </ListBox>
-    </Downshift>
+              </div>
+            </ListBoxMenuItem>
+          </div>
+        </ListBoxMenu>
+      </div>
+    </ListBox>
   </div>
 </Dropdown>
 `;
@@ -683,187 +493,154 @@ exports[`Dropdown should render with strings as items 1`] = `
   <div
     className="bx--dropdown__wrapper bx--list-box__wrapper"
   >
-    <Downshift
-      breakingChanges={Object {}}
-      defaultHighlightedIndex={null}
-      defaultInputValue=""
-      defaultIsOpen={false}
-      defaultSelectedItem={null}
-      environment={[Window]}
-      getA11yStatusMessage={[Function]}
-      itemToString={[Function]}
-      onChange={[Function]}
-      onInputValueChange={[Function]}
-      onOuterClick={[Function]}
-      onSelect={[Function]}
-      onStateChange={[Function]}
-      onUserAction={[Function]}
-      selectedItemChanged={[Function]}
-      stateReducer={[Function]}
+    <ListBox
+      className="bx--dropdown bx--dropdown--open"
+      disabled={false}
+      isOpen={true}
+      light={false}
+      type="default"
     >
-      <ListBox
-        className="bx--dropdown bx--dropdown--open"
-        disabled={false}
-        id="test-dropdown"
-        innerRef={[Function]}
-        isOpen={true}
-        light={false}
-        type="default"
+      <div
+        className="bx--dropdown bx--dropdown--open bx--list-box bx--list-box--expanded"
+        onClick={[Function]}
+        onKeyDown={[Function]}
       >
-        <div
-          className="bx--dropdown bx--dropdown--open bx--list-box bx--list-box--expanded"
-          id="test-dropdown"
+        <button
+          aria-disabled={false}
+          aria-expanded={true}
+          aria-haspopup="listbox"
+          aria-labelledby="downshift-4-label downshift-4-toggle-button"
+          className="bx--list-box__field"
+          disabled={false}
+          id="downshift-4-toggle-button"
           onClick={[Function]}
           onKeyDown={[Function]}
         >
-          <ListBoxField
-            aria-disabled={false}
-            aria-expanded={true}
-            aria-haspopup={true}
-            aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown"
-            data-toggle={true}
-            disabled={false}
-            id="test-dropdown"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            role="button"
-            tabIndex="0"
-            type="button"
+          <span
+            className="bx--list-box__label"
+          >
+            input
+          </span>
+          <ListBoxMenuIcon
+            isOpen={true}
+            translateWithId={[Function]}
           >
             <div
-              aria-controls="test-dropdown__menu"
-              aria-disabled={false}
-              aria-expanded={true}
-              aria-haspopup={true}
-              aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown"
-              aria-owns="test-dropdown__menu"
-              className="bx--list-box__field"
-              data-toggle={true}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              role="button"
-              tabIndex="0"
-              type="button"
+              className="bx--list-box__menu-icon bx--list-box__menu-icon--open"
             >
-              <span
-                className="bx--list-box__label"
-                htmlFor="downshift-3-input"
-                id="dropdown-field-label-test-dropdown"
-                title="input"
-              >
-                input
-              </span>
-              <ListBoxMenuIcon
-                isOpen={true}
-                translateWithId={[Function]}
+              <ForwardRef(ChevronDown16)
+                aria-label="Close menu"
+                name="chevron--down"
               >
-                <div
-                  className="bx--list-box__menu-icon bx--list-box__menu-icon--open"
+                <Icon
+                  aria-label="Close menu"
+                  height={16}
+                  name="chevron--down"
+                  preserveAspectRatio="xMidYMid meet"
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <ForwardRef(ChevronDown16)
+                  <svg
                     aria-label="Close menu"
+                    focusable="false"
+                    height={16}
                     name="chevron--down"
+                    preserveAspectRatio="xMidYMid meet"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width={16}
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <Icon
-                      aria-label="Close menu"
-                      height={16}
-                      name="chevron--down"
-                      preserveAspectRatio="xMidYMid meet"
-                      viewBox="0 0 16 16"
-                      width={16}
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <svg
-                        aria-label="Close menu"
-                        focusable="false"
-                        height={16}
-                        name="chevron--down"
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
-                        />
-                        <title>
-                          Close menu
-                        </title>
-                      </svg>
-                    </Icon>
-                  </ForwardRef(ChevronDown16)>
-                </div>
-              </ListBoxMenuIcon>
+                    <path
+                      d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
+                    />
+                    <title>
+                      Close menu
+                    </title>
+                  </svg>
+                </Icon>
+              </ForwardRef(ChevronDown16)>
             </div>
-          </ListBoxField>
-          <ListBoxMenu
-            aria-labelledby="test-dropdown"
-            id="test-dropdown"
+          </ListBoxMenuIcon>
+        </button>
+        <ListBoxMenu
+          aria-labelledby="downshift-4-label"
+          id="downshift-4-menu"
+          onBlur={[Function]}
+          onKeyDown={[Function]}
+          onMouseLeave={[Function]}
+          role="listbox"
+          tabIndex={-1}
+        >
+          <div
+            aria-labelledby="downshift-4-label"
+            className="bx--list-box__menu"
+            id="downshift-4-menu"
+            onBlur={[Function]}
+            onKeyDown={[Function]}
+            onMouseLeave={[Function]}
+            role="listbox"
+            tabIndex={-1}
           >
-            <div
-              aria-labelledby="test-dropdown"
-              className="bx--list-box__menu"
-              id="test-dropdown__menu"
-              role="listbox"
+            <ListBoxMenuItem
+              aria-selected="false"
+              id="downshift-4-item-0"
+              isActive={false}
+              isHighlighted={false}
+              key="downshift-4-item-0"
+              onClick={[Function]}
+              onMouseMove={[Function]}
+              role="option"
+              title="zar"
             >
-              <ListBoxMenuItem
-                id="downshift-3-item-0"
-                isActive={false}
-                isHighlighted={false}
-                key="downshift-3-item-0"
+              <div
+                aria-selected="false"
+                className="bx--list-box__menu-item"
+                id="downshift-4-item-0"
                 onClick={[Function]}
-                onMouseDown={[Function]}
                 onMouseMove={[Function]}
+                role="option"
                 title="zar"
               >
                 <div
-                  className="bx--list-box__menu-item"
-                  id="downshift-3-item-0"
-                  onClick={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseMove={[Function]}
-                  title="zar"
+                  className="bx--list-box__menu-item__option"
                 >
-                  <div
-                    className="bx--list-box__menu-item__option"
-                  >
-                    zar
-                  </div>
+                  zar
                 </div>
-              </ListBoxMenuItem>
-              <ListBoxMenuItem
-                id="downshift-3-item-1"
-                isActive={false}
-                isHighlighted={false}
-                key="downshift-3-item-1"
+              </div>
+            </ListBoxMenuItem>
+            <ListBoxMenuItem
+              aria-selected="false"
+              id="downshift-4-item-1"
+              isActive={false}
+              isHighlighted={false}
+              key="downshift-4-item-1"
+              onClick={[Function]}
+              onMouseMove={[Function]}
+              role="option"
+              title="doz"
+            >
+              <div
+                aria-selected="false"
+                className="bx--list-box__menu-item"
+                id="downshift-4-item-1"
                 onClick={[Function]}
-                onMouseDown={[Function]}
                 onMouseMove={[Function]}
+                role="option"
                 title="doz"
               >
                 <div
-                  className="bx--list-box__menu-item"
-                  id="downshift-3-item-1"
-                  onClick={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseMove={[Function]}
-                  title="doz"
+                  className="bx--list-box__menu-item__option"
                 >
-                  <div
-                    className="bx--list-box__menu-item__option"
-                  >
-                    doz
-                  </div>
+                  doz
                 </div>
-              </ListBoxMenuItem>
-            </div>
-          </ListBoxMenu>
-        </div>
-      </ListBox>
-    </Downshift>
+              </div>
+            </ListBoxMenuItem>
+          </div>
+        </ListBoxMenu>
+      </div>
+    </ListBox>
   </div>
 </Dropdown>
 `;
diff --git a/packages/react/src/components/ListBox/ListBox.js b/packages/react/src/components/ListBox/ListBox.js
index c7602fc9f9e9..a2b8fc4ec9e6 100644
--- a/packages/react/src/components/ListBox/ListBox.js
+++ b/packages/react/src/components/ListBox/ListBox.js
@@ -28,19 +28,21 @@ const handleClick = event => {
  * `ListBox` is a generic container component that handles creating the
  * container class name in response to certain props.
  */
-const ListBox = ({
-  children,
-  className: containerClassName,
-  disabled,
-  innerRef,
-  type,
-  size,
-  invalid,
-  invalidText,
-  light,
-  isOpen,
-  ...rest
-}) => {
+const ListBox = React.forwardRef(function ListBox(
+  {
+    children,
+    className: containerClassName,
+    disabled,
+    type,
+    size,
+    invalid,
+    invalidText,
+    light,
+    isOpen,
+    ...rest
+  },
+  ref
+) {
   const className = cx({
     [containerClassName]: !!containerClassName,
     [`${prefix}--list-box`]: true,
@@ -55,7 +57,7 @@ const ListBox = ({
       <div
         {...rest}
         className={className}
-        ref={innerRef}
+        ref={ref}
         onKeyDown={handleOnKeyDown}
         onClick={handleClick}
         data-invalid={invalid || undefined}>
@@ -66,8 +68,9 @@ const ListBox = ({
       ) : null}
     </>
   );
-};
+});
 
+ListBox.displayName = 'ListBox';
 ListBox.propTypes = {
   /**
    * Provide the contents of your ListBox
@@ -79,12 +82,6 @@ ListBox.propTypes = {
    */
   className: PropTypes.string,
 
-  /**
-   * `innerRef` hook used for libraries like Downshift that require a reference
-   * on a container node when it is not a native element
-   */
-  innerRef: PropTypes.func.isRequired,
-
   /**
    * Specify whether the ListBox is currently disabled
    */
@@ -103,7 +100,6 @@ ListBox.propTypes = {
 };
 
 ListBox.defaultProps = {
-  innerRef: () => {},
   disabled: false,
   type: 'default',
 };
diff --git a/packages/react/src/components/ListBox/ListBoxMenu.js b/packages/react/src/components/ListBox/ListBoxMenu.js
index 8a499b7eab40..022e43672fec 100644
--- a/packages/react/src/components/ListBox/ListBoxMenu.js
+++ b/packages/react/src/components/ListBox/ListBoxMenu.js
@@ -18,21 +18,29 @@ const { prefix } = settings;
  * class into a single component. It is also being used to validate given
  * `children` components.
  */
-const ListBoxMenu = ({ children, id, ...rest }) => (
-  <div
-    id={`${id}__menu`}
-    className={`${prefix}--list-box__menu`}
-    role="listbox"
-    {...rest}>
-    {children}
-  </div>
-);
+const ListBoxMenu = React.forwardRef(function ListBoxMenu(
+  { children, id, ...rest },
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      id={id}
+      className={`${prefix}--list-box__menu`}
+      role="listbox"
+      {...rest}>
+      {children}
+    </div>
+  );
+});
 
+ListBoxMenu.displayName = 'ListBoxMenu';
 ListBoxMenu.propTypes = {
   /**
    * Provide the contents of your ListBoxMenu
    */
   children: childrenOfType(ListBoxMenuItem),
+
   /**
    * Specify a custom `id`
    */
diff --git a/packages/react/src/components/ListBox/__tests__/ListBox-test.js b/packages/react/src/components/ListBox/__tests__/ListBox-test.js
index 31671dccfbef..ace43b0e2a1a 100644
--- a/packages/react/src/components/ListBox/__tests__/ListBox-test.js
+++ b/packages/react/src/components/ListBox/__tests__/ListBox-test.js
@@ -22,7 +22,6 @@ describe('ListBox', () => {
       children: <ListBox.Field id="test-listbox" />,
       className: `${prefix}--list-box__container`,
       disabled: false,
-      innerRef: jest.fn(),
     };
   });
 
@@ -41,11 +40,6 @@ describe('ListBox', () => {
     expect(wrapper.find(`.${prefix}--list-box--disabled`).length).toBe(1);
   });
 
-  it('should call the provided `innerRef` function with a ref to the node', () => {
-    mount(<ListBox {...mockProps} />);
-    expect(mockProps.innerRef).toHaveBeenCalled();
-  });
-
   it('should add the provided `className` to the root node', () => {
     const wrapper = mount(<ListBox {...mockProps} />);
     expect(
diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBox-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBox-test.js.snap
index a710feb9638e..4d97e570b4eb 100644
--- a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBox-test.js.snap
+++ b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBox-test.js.snap
@@ -5,31 +5,6 @@ exports[`ListBox should render 1`] = `
   className="bx--list-box__container"
   disabled={false}
   id="test-listbox"
-  innerRef={
-    [MockFunction] {
-      "calls": Array [
-        Array [
-          <div
-            class="bx--list-box__container bx--list-box"
-            id="test-listbox"
-          >
-            <div
-              aria-haspopup="listbox"
-              class="bx--list-box__field"
-              role="combobox"
-              tabindex="-1"
-            />
-          </div>,
-        ],
-      ],
-      "results": Array [
-        Object {
-          "type": "return",
-          "value": undefined,
-        },
-      ],
-    }
-  }
   type="default"
 >
   <div
diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenu-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenu-test.js.snap
index 94531125d5c0..52cc01053551 100644
--- a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenu-test.js.snap
+++ b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenu-test.js.snap
@@ -6,7 +6,7 @@ exports[`ListBoxMenu should render 1`] = `
 >
   <div
     className="bx--list-box__menu"
-    id="test-listbox__menu"
+    id="test-listbox"
     role="listbox"
   >
     <ListBoxMenuItem
diff --git a/packages/react/src/components/ListBox/test-helpers.js b/packages/react/src/components/ListBox/test-helpers.js
index ce86ed416100..af84d0ecd005 100644
--- a/packages/react/src/components/ListBox/test-helpers.js
+++ b/packages/react/src/components/ListBox/test-helpers.js
@@ -19,6 +19,10 @@ export const findMenuIconNode = wrapper =>
   wrapper.find(`.${prefix}--list-box__menu-icon`);
 export const findFieldNode = wrapper =>
   wrapper.find(`.${prefix}--list-box__field`);
+export const findComboboxNode = wrapper =>
+  wrapper.find(`.${prefix}--list-box[role="combobox"]`);
+export const findPopupNode = wrapper =>
+  wrapper.find('[aria-haspopup="listbox"]').hostNodes();
 
 // Actions
 export const openMenu = wrapper => findFieldNode(wrapper).simulate('click');
@@ -29,12 +33,7 @@ export const assertMenuOpen = (wrapper, mockProps) => {
   expect(findMenuIconNode(wrapper).prop('className')).toEqual(
     expect.stringContaining(`${prefix}--list-box__menu-icon--open`)
   );
-  expect(findFieldNode(wrapper).props()).toEqual(
-    expect.objectContaining({
-      'aria-expanded': true,
-      'aria-haspopup': true,
-    })
-  );
+  expect(findPopupNode(wrapper).prop('aria-expanded')).toBe(true);
 };
 export const assertMenuClosed = wrapper => {
   expect(findMenuIconNode(wrapper).prop('className')).toEqual(
@@ -43,12 +42,7 @@ export const assertMenuClosed = wrapper => {
   expect(findMenuIconNode(wrapper).prop('className')).not.toEqual(
     expect.stringContaining(`${prefix}--list-box__menu-icon--open`)
   );
-  expect(findFieldNode(wrapper).props()).toEqual(
-    expect.objectContaining({
-      'aria-expanded': false,
-      'aria-haspopup': true,
-    })
-  );
+  expect(findPopupNode(wrapper).prop('aria-expanded')).toBe(false);
 };
 
 /**
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
index cf89b1224796..bdb030722fdf 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -160,7 +160,6 @@ export default class FilterableMultiSelect extends React.Component {
     super(props);
     this.filterableMultiSelectInstanceId = getInstanceId();
     this.state = {
-      highlightedIndex: null,
       isOpen: props.open,
       inputValue: '',
       topItems: [],
@@ -327,13 +326,21 @@ export default class FilterableMultiSelect extends React.Component {
             isOpen={isOpen}
             inputValue={inputValue}
             onInputValueChange={this.handleOnInputValueChange}
-            onChange={onItemChange}
+            onChange={selectedItem => {
+              // `selectedItem`: The item that was just selected. null if the selection was cleared.
+              // https://github.com/downshift-js/downshift#onchange
+              if (selectedItem === null) {
+                clearSelection();
+                return;
+              }
+              onItemChange(selectedItem);
+            }}
             itemToString={itemToString}
             onStateChange={this.handleOnStateChange}
             onOuterClick={this.handleOnOuterClick}
-            selectedItem={selectedItems}
-            render={({
-              getButtonProps,
+            selectedItem={selectedItems}>
+            {({
+              getToggleButtonProps,
               getInputProps,
               getItemProps,
               getRootProps,
@@ -355,7 +362,7 @@ export default class FilterableMultiSelect extends React.Component {
                 }
               );
               const buttonProps = {
-                ...getButtonProps({ disabled }),
+                ...getToggleButtonProps({ disabled }),
                 'aria-label': undefined,
               };
               return (
@@ -367,7 +374,7 @@ export default class FilterableMultiSelect extends React.Component {
                   invalidText={invalidText}
                   isOpen={isOpen}
                   size={size}
-                  {...getRootProps({ refKey: 'innerRef' })}>
+                  {...getRootProps()}>
                   <ListBox.Field
                     id={id}
                     disabled={disabled}
@@ -410,50 +417,56 @@ export default class FilterableMultiSelect extends React.Component {
                       translateWithId={translateWithId}
                     />
                   </ListBox.Field>
-                  <ListBox.Menu aria-label={ariaLabel} id={id}>
-                    {sortItems(
-                      filterItems(items, { itemToString, inputValue }),
-                      {
-                        selectedItems: {
-                          top: selectedItems,
-                          fixed: [],
-                          'top-after-reopen': this.state.topItems,
-                        }[this.props.selectionFeedback],
-                        itemToString,
-                        compareItems,
-                        locale,
-                      }
-                    ).map((item, index) => {
-                      const itemProps = getItemProps({ item });
-                      const itemText = itemToString(item);
-                      const isChecked =
-                        selectedItem.filter(selected => isEqual(selected, item))
-                          .length > 0;
-                      return (
-                        <ListBox.MenuItem
-                          key={itemProps.id}
-                          isActive={isChecked}
-                          isHighlighted={highlightedIndex === index}
-                          title={itemText}
-                          {...itemProps}>
-                          <Checkbox
-                            id={itemProps.id}
-                            title={useTitleInItem ? itemText : null}
-                            name={itemText}
-                            checked={isChecked}
-                            disabled={disabled}
-                            readOnly={true}
-                            tabIndex="-1"
-                            labelText={itemText}
-                          />
-                        </ListBox.MenuItem>
-                      );
-                    })}
-                  </ListBox.Menu>
+                  {isOpen && (
+                    <ListBox.Menu
+                      role="group"
+                      aria-label={ariaLabel}
+                      id={`${id}-menu`}>
+                      {sortItems(
+                        filterItems(items, { itemToString, inputValue }),
+                        {
+                          selectedItems: {
+                            top: selectedItems,
+                            fixed: [],
+                            'top-after-reopen': this.state.topItems,
+                          }[this.props.selectionFeedback],
+                          itemToString,
+                          compareItems,
+                          locale,
+                        }
+                      ).map((item, index) => {
+                        const itemProps = getItemProps({ item });
+                        const itemText = itemToString(item);
+                        const isChecked =
+                          selectedItem.filter(selected =>
+                            isEqual(selected, item)
+                          ).length > 0;
+                        return (
+                          <ListBox.MenuItem
+                            key={itemProps.id}
+                            isActive={isChecked}
+                            isHighlighted={highlightedIndex === index}
+                            title={itemText}
+                            {...itemProps}>
+                            <Checkbox
+                              id={`${itemProps.id}-item`}
+                              title={useTitleInItem ? itemText : null}
+                              name={itemText}
+                              checked={isChecked}
+                              disabled={disabled}
+                              readOnly={true}
+                              tabIndex="-1"
+                              labelText={itemText}
+                            />
+                          </ListBox.MenuItem>
+                        );
+                      })}
+                    </ListBox.Menu>
+                  )}
                 </ListBox>
               );
             }}
-          />
+          </Downshift>
         )}
       />
     );
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index 7d631cba0235..ea9d1932da0b 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -5,425 +5,372 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { WarningFilled16 } from '@carbon/icons-react';
+import { settings } from 'carbon-components';
 import cx from 'classnames';
-import React from 'react';
-import PropTypes from 'prop-types';
-import Downshift from 'downshift';
+import Downshift, { useSelect } from 'downshift';
 import isEqual from 'lodash.isequal';
-import { settings } from 'carbon-components';
-import { WarningFilled16 } from '@carbon/icons-react';
+import PropTypes from 'prop-types';
+import React, { useRef, useState } from 'react';
 import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
-import Selection from '../../internal/Selection';
 import { sortingPropTypes } from './MultiSelectPropTypes';
 import { defaultItemToString } from './tools/itemToString';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting';
+import { useSelection } from '../../internal/Selection';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 
 const { prefix } = settings;
-const noop = () => undefined;
+const noop = () => {};
 const getInstanceId = setupGetInstanceId();
-
-export default class MultiSelect extends React.Component {
-  static propTypes = {
-    ...sortingPropTypes,
-
-    /**
-     * Disable the control
-     */
-    disabled: PropTypes.bool,
-
-    /**
-     * Specify a custom `id`
-     */
-    id: PropTypes.string.isRequired,
-
-    /**
-     * We try to stay as generic as possible here to allow individuals to pass
-     * in a collection of whatever kind of data structure they prefer
-     */
-    items: PropTypes.array.isRequired,
-
-    /**
-     * Allow users to pass in arbitrary items from their collection that are
-     * pre-selected
-     */
-    initialSelectedItems: PropTypes.array,
-
-    /**
-     * Helper function passed to downshift that allows the library to render a
-     * given item to a string label. By default, it extracts the `label` field
-     * from a given item to serve as the item label in the list.
-     */
-    itemToString: PropTypes.func,
-
-    /**
-     * Generic `label` that will be used as the textual representation of what
-     * this field is for
-     */
-    label: PropTypes.node.isRequired,
-
-    /**
-     * Specify the locale of the control. Used for the default `compareItems`
-     * used for sorting the list of items in the control.
-     */
-    locale: PropTypes.string,
-
-    /**
-     * `onChange` is a utility for this controlled component to communicate to a
-     * consuming component what kind of internal state changes are occuring.
-     */
-    onChange: PropTypes.func,
-
-    /**
-     * Specify 'inline' to create an inline multi-select.
-     */
-    type: PropTypes.oneOf(['default', 'inline']),
-
-    /**
-     * Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.
-     */
-    size: ListBoxPropTypes.ListBoxSize,
-
-    /**
-     * Specify title to show title on hover
-     */
-    useTitleInItem: PropTypes.bool,
-
-    /**
-     * `true` to use the light version.
-     */
-    light: PropTypes.bool,
-
-    /**
-     * Is the current selection invalid?
-     */
-    invalid: PropTypes.bool,
-
-    /**
-     * If invalid, what is the error?
-     */
-    invalidText: PropTypes.string,
-
-    /**
-     * Initialize the component with an open(`true`)/closed(`false`) menu.
-     */
-    open: PropTypes.bool,
-
-    /**
-     * Callback function for translating ListBoxMenuIcon SVG title
-     */
-    translateWithId: PropTypes.func,
-
-    /**
-     * Specify feedback (mode) of the selection.
-     * `top`: selected item jumps to top
-     * `fixed`: selected item stays at it's position
-     * `top-after-reopen`: selected item jump to top after reopen dropdown
-     */
-    selectionFeedback: PropTypes.oneOf(['top', 'fixed', 'top-after-reopen']),
-
-    /**
-     * Additional props passed to Downshift
-     */
-    downshiftProps: PropTypes.shape(Downshift.propTypes),
-
-    /**
-     * Specify the direction of the multiselect dropdown. Can be either top or bottom.
-     */
-    direction: PropTypes.oneOf(['top', 'bottom']),
-  };
-
-  static getDerivedStateFromProps({ open }, state) {
-    /**
-     * programmatically control this `open` prop
-     */
-    const { prevOpen } = state;
-    return prevOpen === open
-      ? null
-      : {
-          isOpen: open,
-          prevOpen: open,
-        };
+const {
+  ItemClick,
+  MenuBlur,
+  MenuKeyDownArrowDown,
+  MenuKeyDownArrowUp,
+  MenuKeyDownEnter,
+  MenuKeyDownEscape,
+  MenuKeyDownSpaceButton,
+  ToggleButtonClick,
+} = useSelect.stateChangeTypes;
+
+function MultiSelect({
+  className: containerClassName,
+  id,
+  items,
+  itemToString,
+  titleText,
+  helperText,
+  label,
+  type,
+  size,
+  disabled,
+  initialSelectedItems,
+  sortItems,
+  compareItems,
+  light,
+  invalid,
+  invalidText,
+  useTitleInItem,
+  translateWithId,
+  downshiftProps,
+  open,
+  selectionFeedback,
+  onChange,
+  direction,
+}) {
+  const { current: multiSelectInstanceId } = useRef(getInstanceId());
+  const [highlightedIndex, setHighlightedIndex] = useState(null);
+  const [isOpen, setIsOpen] = useState(open);
+  const [prevOpenProp, setPrevOpenProp] = useState(open);
+  const [topItems, setTopItems] = useState([]);
+  const {
+    selectedItems: controlledSelectedItems,
+    onItemChange,
+    clearSelection,
+  } = useSelection({
+    disabled,
+    initialSelectedItems,
+    onChange,
+  });
+
+  const {
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getItemProps,
+    selectedItem: selectedItems,
+  } = useSelect({
+    ...downshiftProps,
+    highlightedIndex,
+    isOpen,
+    itemToString,
+    onStateChange,
+    selectedItem: controlledSelectedItems,
+    items,
+  });
+
+  /**
+   * programmatically control this `open` prop
+   */
+  if (prevOpenProp !== open) {
+    setIsOpen(open);
+    setPrevOpenProp(open);
   }
 
-  static defaultProps = {
-    compareItems: defaultCompareItems,
-    disabled: false,
+  const inline = type === 'inline';
+  const wrapperClasses = cx(
+    `${prefix}--multi-select__wrapper`,
+    `${prefix}--list-box__wrapper`,
+    {
+      [`${prefix}--multi-select__wrapper--inline`]: inline,
+      [`${prefix}--list-box__wrapper--inline`]: inline,
+      [`${prefix}--multi-select__wrapper--inline--invalid`]: inline && invalid,
+      [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
+    }
+  );
+  const titleClasses = cx(`${prefix}--label`, {
+    [`${prefix}--label--disabled`]: disabled,
+  });
+  const helperId = !helperText
+    ? undefined
+    : `multiselect-helper-text-${multiSelectInstanceId}`;
+  const labelId = `multiselect-label-${multiSelectInstanceId}`;
+  const fieldLabelId = `multiselect-field-label-${multiSelectInstanceId}`;
+  const helperClasses = cx(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled,
+  });
+
+  const className = cx(`${prefix}--multi-select`, containerClassName, {
+    [`${prefix}--multi-select--invalid`]: invalid,
+    [`${prefix}--multi-select--inline`]: inline,
+    [`${prefix}--multi-select--selected`]:
+      selectedItems && selectedItems.length > 0,
+    [`${prefix}--list-box--up`]: direction === 'top',
+  });
+
+  const sortOptions = {
+    selectedItems: controlledSelectedItems,
+    itemToString,
+    compareItems,
     locale: 'en',
-    itemToString: defaultItemToString,
-    initialSelectedItems: [],
-    sortItems: defaultSortItems,
-    type: 'default',
-    light: false,
-    title: false,
-    open: false,
-    selectionFeedback: 'top-after-reopen',
-    direction: 'bottom',
   };
 
-  constructor(props) {
-    super(props);
-    this.multiSelectInstanceId = getInstanceId();
-    this.state = {
-      highlightedIndex: null,
-      isOpen: props.open,
-      topItems: [],
-    };
+  if (selectionFeedback === 'fixed') {
+    sortOptions.selectedItems = [];
+  } else if (selectionFeedback === 'top-after-reopen') {
+    sortOptions.selectedItems = topItems;
   }
 
-  handleOnChange = changes => {
-    if (this.props.onChange) {
-      this.props.onChange(changes);
-    }
-  };
-
-  handleOnOuterClick = () => {
-    this.setState({
-      isOpen: false,
-    });
-  };
-
-  handleOnStateChange = (changes, downshift) => {
-    if (changes.isOpen && !this.state.isOpen) {
-      this.setState({ topItems: downshift.selectedItem });
+  function onStateChange(changes) {
+    if (changes.isOpen && !isOpen) {
+      setTopItems(controlledSelectedItems);
     }
 
     const { type } = changes;
     switch (type) {
-      case Downshift.stateChangeTypes.keyDownArrowDown:
-      case Downshift.stateChangeTypes.keyDownArrowUp:
-      case Downshift.stateChangeTypes.itemMouseEnter:
-        this.setState({
-          highlightedIndex: changes.highlightedIndex,
-        });
+      case ItemClick:
+      case MenuKeyDownSpaceButton:
+      case MenuKeyDownEnter:
+        onItemChange(changes.selectedItem);
         break;
-      case Downshift.stateChangeTypes.keyDownEscape:
-      case Downshift.stateChangeTypes.mouseUp:
-        this.setState({ isOpen: false });
+      case MenuKeyDownArrowDown:
+      case MenuKeyDownArrowUp:
+        setHighlightedIndex(changes.highlightedIndex);
         break;
-      // Opt-in to some cases where we should be toggling the menu based on
-      // a given key press or mouse handler
-      // Reference: https://github.com/paypal/downshift/issues/206
-      case Downshift.stateChangeTypes.clickButton:
-      case Downshift.stateChangeTypes.keyDownSpaceButton:
-        this.setState(() => {
-          let nextIsOpen = changes.isOpen || false;
-
-          if (changes.isOpen === false) {
-            // If Downshift is trying to close the menu, but we know the input
-            // is the active element in the document, then keep the menu open
-            if (this.inputNode === document.activeElement) {
-              nextIsOpen = true;
-            }
-          }
-
-          return {
-            isOpen: nextIsOpen,
-          };
-        });
+      case MenuBlur:
+      case MenuKeyDownEscape:
+        setIsOpen(false);
+        setHighlightedIndex(changes.highlightedIndex);
+        break;
+      case ToggleButtonClick:
+        setIsOpen(changes.isOpen || false);
+        setHighlightedIndex(changes.highlightedIndex);
         break;
     }
-  };
+  }
 
-  render() {
-    const { highlightedIndex, isOpen } = this.state;
-    const {
-      className: containerClassName,
-      id,
-      items,
-      itemToString,
-      titleText,
-      helperText,
-      label,
-      type,
-      size,
-      disabled,
-      initialSelectedItems,
-      sortItems,
-      compareItems,
-      light,
-      invalid,
-      invalidText,
-      useTitleInItem,
-      translateWithId,
-      downshiftProps,
-      direction,
-    } = this.props;
-    const inline = type === 'inline';
-    const wrapperClasses = cx(
-      `${prefix}--multi-select__wrapper`,
-      `${prefix}--list-box__wrapper`,
-      {
-        [`${prefix}--multi-select__wrapper--inline`]: inline,
-        [`${prefix}--list-box__wrapper--inline`]: inline,
-        [`${prefix}--multi-select__wrapper--inline--invalid`]:
-          inline && invalid,
-        [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
-      }
-    );
-    const titleClasses = cx(`${prefix}--label`, {
-      [`${prefix}--label--disabled`]: disabled,
-    });
-    const helperId = !helperText
-      ? undefined
-      : `multiselect-helper-text-${this.multiSelectInstanceId}`;
-    const labelId = `multiselect-label-${this.multiSelectInstanceId}`;
-    const fieldLabelId = `multiselect-field-label-${this.multiSelectInstanceId}`;
-    const title = titleText ? (
-      <span id={labelId} className={titleClasses}>
-        {titleText}
-      </span>
-    ) : null;
-    const helperClasses = cx(`${prefix}--form__helper-text`, {
-      [`${prefix}--form__helper-text--disabled`]: disabled,
-    });
-    const helper = helperText ? (
-      <div id={helperId} className={helperClasses}>
-        {helperText}
-      </div>
-    ) : null;
-
-    const input = (
-      <Selection
+  return (
+    <div className={wrapperClasses}>
+      {titleText && (
+        <label id={labelId} className={titleClasses} {...getLabelProps()}>
+          {titleText}
+        </label>
+      )}
+      {!inline && helperText && (
+        <div id={helperId} className={helperClasses}>
+          {helperText}
+        </div>
+      )}
+      <ListBox
+        id={id}
+        type={type}
+        size={size}
+        className={className}
         disabled={disabled}
-        onChange={this.handleOnChange}
-        initialSelectedItems={initialSelectedItems}
-        render={({ selectedItems, onItemChange, clearSelection }) => (
-          <Downshift
-            {...downshiftProps}
-            highlightedIndex={highlightedIndex}
-            isOpen={isOpen}
-            itemToString={itemToString}
-            onChange={onItemChange}
-            onStateChange={this.handleOnStateChange}
-            onOuterClick={this.handleOnOuterClick}
-            selectedItem={selectedItems}
-            render={({
-              getRootProps,
-              selectedItem,
-              isOpen,
-              itemToString,
-              highlightedIndex,
-              getItemProps,
-              getButtonProps,
-            }) => {
-              const className = cx(
-                `${prefix}--multi-select`,
-                containerClassName,
-                {
-                  [`${prefix}--multi-select--invalid`]: invalid,
-                  [`${prefix}--multi-select--inline`]: inline,
-                  [`${prefix}--multi-select--selected`]:
-                    selectedItem.length > 0,
-                  [`${prefix}--list-box--up`]: direction === 'top',
-                }
-              );
-              const buttonProps = {
-                ...getButtonProps({ disabled }),
-                'aria-label': undefined,
-              };
+        light={light}
+        invalid={invalid}
+        invalidText={invalidText}
+        isOpen={isOpen}>
+        {invalid && (
+          <WarningFilled16 className={`${prefix}--list-box__invalid-icon`} />
+        )}
+        <button
+          id={id}
+          className={`${prefix}--list-box__field`}
+          disabled={disabled}
+          aria-disabled={disabled}
+          {...getToggleButtonProps()}>
+          {selectedItems.length > 0 && (
+            <ListBox.Selection
+              clearSelection={!disabled ? clearSelection : noop}
+              selectionCount={selectedItems.length}
+              translateWithId={translateWithId}
+              disabled={disabled}
+            />
+          )}
+          <span id={fieldLabelId} className={`${prefix}--list-box__label`}>
+            {label}
+          </span>
+          <ListBox.MenuIcon isOpen={isOpen} translateWithId={translateWithId} />
+        </button>
+        <ListBox.Menu aria-multiselectable="true" {...getMenuProps()}>
+          {isOpen &&
+            sortItems(items, sortOptions).map((item, index) => {
+              const itemProps = getItemProps({
+                item,
+              });
+              const itemText = itemToString(item);
+              const isChecked =
+                selectedItems.filter(selected => isEqual(selected, item))
+                  .length > 0;
               return (
-                <ListBox
-                  id={id}
-                  type={type}
-                  size={size}
-                  className={className}
-                  disabled={disabled}
-                  light={light}
-                  invalid={invalid}
-                  invalidText={invalidText}
-                  isOpen={isOpen}
-                  {...getRootProps({ refKey: 'innerRef' })}>
-                  {invalid && (
-                    <WarningFilled16
-                      className={`${prefix}--list-box__invalid-icon`}
-                    />
-                  )}
-                  <ListBox.Field
-                    id={id}
-                    tabIndex="0"
-                    disabled={disabled}
-                    aria-disabled={disabled}
-                    aria-labelledby={`${labelId} ${fieldLabelId}`}
-                    aria-describedby={helperId}
-                    {...buttonProps}>
-                    {selectedItem.length > 0 && (
-                      <ListBox.Selection
-                        clearSelection={!disabled ? clearSelection : noop}
-                        selectionCount={selectedItem.length}
-                        translateWithId={translateWithId}
-                        disabled={disabled}
-                      />
-                    )}
+                <ListBox.MenuItem
+                  aria-selected={isChecked}
+                  key={itemProps.id}
+                  isActive={isChecked}
+                  isHighlighted={highlightedIndex === index}
+                  title={itemText}
+                  {...itemProps}>
+                  <div className={`${prefix}--checkbox-wrapper`}>
                     <span
-                      id={fieldLabelId}
-                      className={`${prefix}--list-box__label`}>
-                      {label}
+                      title={useTitleInItem ? itemText : null}
+                      className={`${prefix}--checkbox-label`}
+                      data-contained-checkbox-state={isChecked}
+                      id={`${itemProps.id}__checkbox`}>
+                      {itemText}
                     </span>
-                    <ListBox.MenuIcon
-                      isOpen={isOpen}
-                      translateWithId={translateWithId}
-                    />
-                  </ListBox.Field>
-                  <ListBox.Menu
-                    aria-multiselectable="true"
-                    aria-labelledby={`${labelId}`}
-                    id={id}>
-                    {sortItems(items, {
-                      selectedItems: {
-                        top: selectedItems,
-                        fixed: [],
-                        'top-after-reopen': this.state.topItems,
-                      }[this.props.selectionFeedback],
-                      itemToString,
-                      compareItems,
-                      locale: 'en',
-                    }).map((item, index) => {
-                      const itemProps = getItemProps({ item });
-                      const itemText = itemToString(item);
-                      const isChecked =
-                        selectedItem.filter(selected => isEqual(selected, item))
-                          .length > 0;
-                      return (
-                        <ListBox.MenuItem
-                          key={itemProps.id}
-                          isActive={isChecked}
-                          role="option"
-                          aria-selected={isChecked}
-                          tabIndex={-1}
-                          isHighlighted={highlightedIndex === index}
-                          title={itemText}
-                          {...itemProps}>
-                          <div className={`${prefix}--checkbox-wrapper`}>
-                            <span
-                              title={useTitleInItem ? itemText : null}
-                              className={`${prefix}--checkbox-label`}
-                              data-contained-checkbox-state={isChecked}
-                              id={`${itemProps.id}__checkbox`}>
-                              <span
-                                className={`${prefix}--checkbox-label-text`}>
-                                {itemText}
-                              </span>
-                            </span>
-                          </div>
-                        </ListBox.MenuItem>
-                      );
-                    })}
-                  </ListBox.Menu>
-                </ListBox>
+                  </div>
+                </ListBox.MenuItem>
               );
-            }}
-          />
-        )}
-      />
-    );
-
-    return (
-      <div className={wrapperClasses}>
-        {title}
-        {!inline && helper}
-        {input}
-      </div>
-    );
-  }
+            })}
+        </ListBox.Menu>
+      </ListBox>
+    </div>
+  );
 }
+
+MultiSelect.propTypes = {
+  ...sortingPropTypes,
+
+  /**
+   * Disable the control
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify a custom `id`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * We try to stay as generic as possible here to allow individuals to pass
+   * in a collection of whatever kind of data structure they prefer
+   */
+  items: PropTypes.array.isRequired,
+
+  /**
+   * Allow users to pass in arbitrary items from their collection that are
+   * pre-selected
+   */
+  initialSelectedItems: PropTypes.array,
+
+  /**
+   * Helper function passed to downshift that allows the library to render a
+   * given item to a string label. By default, it extracts the `label` field
+   * from a given item to serve as the item label in the list.
+   */
+  itemToString: PropTypes.func,
+
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  label: PropTypes.node.isRequired,
+
+  /**
+   * Specify the locale of the control. Used for the default `compareItems`
+   * used for sorting the list of items in the control.
+   */
+  locale: PropTypes.string,
+
+  /**
+   * `onChange` is a utility for this controlled component to communicate to a
+   * consuming component what kind of internal state changes are occuring.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Specify 'inline' to create an inline multi-select.
+   */
+  type: PropTypes.oneOf(['default', 'inline']),
+
+  /**
+   * Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.
+   */
+  size: ListBoxPropTypes.ListBoxSize,
+
+  /**
+   * Specify title to show title on hover
+   */
+  useTitleInItem: PropTypes.bool,
+
+  /**
+   * `true` to use the light version.
+   */
+  light: PropTypes.bool,
+
+  /**
+   * Is the current selection invalid?
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * If invalid, what is the error?
+   */
+  invalidText: PropTypes.string,
+
+  /**
+   * Initialize the component with an open(`true`)/closed(`false`) menu.
+   */
+  open: PropTypes.bool,
+
+  /**
+   * Callback function for translating ListBoxMenuIcon SVG title
+   */
+  translateWithId: PropTypes.func,
+
+  /**
+   * Specify feedback (mode) of the selection.
+   * `top`: selected item jumps to top
+   * `fixed`: selected item stays at it's position
+   * `top-after-reopen`: selected item jump to top after reopen dropdown
+   */
+  selectionFeedback: PropTypes.oneOf(['top', 'fixed', 'top-after-reopen']),
+
+  /**
+   * Additional props passed to Downshift
+   */
+  downshiftProps: PropTypes.shape(Downshift.propTypes),
+
+  /**
+   * Specify the direction of the multiselect dropdown. Can be either top or bottom.
+   */
+  direction: PropTypes.oneOf(['top', 'bottom']),
+};
+
+MultiSelect.defaultProps = {
+  compareItems: defaultCompareItems,
+  disabled: false,
+  locale: 'en',
+  itemToString: defaultItemToString,
+  initialSelectedItems: [],
+  sortItems: defaultSortItems,
+  type: 'default',
+  light: false,
+  title: false,
+  open: false,
+  selectionFeedback: 'top-after-reopen',
+  direction: 'bottom',
+};
+
+export default MultiSelect;
diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
index 1558bf24be47..9ec8e18fc656 100644
--- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
@@ -9,8 +9,8 @@ import React from 'react';
 import { mount } from 'enzyme';
 import MultiSelect from '../../MultiSelect';
 import {
-  assertMenuClosed,
   assertMenuOpen,
+  assertMenuClosed,
   findMenuIconNode,
   openMenu,
   generateItems,
@@ -51,8 +51,9 @@ describe('MultiSelect.Filterable', () => {
 
   it('should open the menu with a down arrow', () => {
     const wrapper = mount(<MultiSelect.Filterable {...mockProps} />);
+    const menuIconNode = findMenuIconNode(wrapper);
 
-    findMenuIconNode(wrapper).simulate('keyDown', { key: 'ArrowDown' });
+    menuIconNode.simulate('keyDown', { key: 'ArrowDown' });
     assertMenuOpen(wrapper, mockProps);
   });
 
@@ -67,10 +68,10 @@ describe('MultiSelect.Filterable', () => {
   it('should not close the menu after a user makes a selection', () => {
     const wrapper = mount(<MultiSelect.Filterable {...mockProps} />);
     openMenu(wrapper);
-    wrapper
-      .find(listItemName)
-      .at(0)
-      .simulate('click');
+
+    const firstListItem = wrapper.find(listItemName).at(0);
+
+    firstListItem.simulate('click');
     assertMenuOpen(wrapper, mockProps);
   });
 
@@ -80,8 +81,8 @@ describe('MultiSelect.Filterable', () => {
     expect(wrapper.find(listItemName).length).toBe(mockProps.items.length);
 
     wrapper
-      .find('[role="combobox"]')
-      .at(0)
+      .find('[placeholder="Placeholder..."]')
+      .at(1)
       .simulate('change', { target: { value: '3' } });
 
     expect(wrapper.find(listItemName).length).toBe(1);
@@ -164,19 +165,23 @@ describe('MultiSelect.Filterable', () => {
 
   it('should not clear input value after a user makes a selection', () => {
     const wrapper = mount(<MultiSelect.Filterable {...mockProps} />);
-    const inputValue = 'Item';
     openMenu(wrapper);
 
     wrapper
-      .find('[role="combobox"]')
-      .at(0)
-      .simulate('change', { target: { value: 'Item' } });
+      .find('[placeholder="Placeholder..."]')
+      .at(1)
+      .simulate('change', { target: { value: '3' } });
 
     wrapper
       .find(listItemName)
       .at(0)
       .simulate('click');
 
-    expect(wrapper.find('[role="combobox"]').props().value).toEqual(inputValue);
+    expect(
+      wrapper
+        .find('[placeholder="Placeholder..."]')
+        .at(1)
+        .props().value
+    ).toEqual('3');
   });
 });
diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
index c08e7413ab90..d94e96b5c287 100644
--- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
@@ -9,10 +9,9 @@ import { getByText, isElementVisible } from '@carbon/test-utils/dom';
 import { pressEnter, pressSpace, pressTab } from '@carbon/test-utils/keyboard';
 import { render, cleanup } from '@carbon/test-utils/react';
 import React from 'react';
-import { Simulate } from 'react-dom/test-utils';
+import { act, Simulate } from 'react-dom/test-utils';
 import MultiSelect from '../';
 import { generateItems, generateGenericItem } from '../../ListBox/test-helpers';
-import { keys } from '../../../internal/keyboard';
 
 describe('MultiSelect', () => {
   afterEach(cleanup);
@@ -46,7 +45,7 @@ describe('MultiSelect', () => {
     expect(isElementVisible(labelNode)).toBe(true);
 
     expect(
-      container.querySelector('[aria-expanded="true"][aria-haspopup="true"]')
+      container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
     ).toBeNull();
   });
 
@@ -61,7 +60,7 @@ describe('MultiSelect', () => {
     Simulate.click(labelNode);
 
     expect(
-      container.querySelector('[aria-expanded="true"][aria-haspopup="true"]')
+      container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
     ).toBeInstanceOf(HTMLElement);
   });
 
@@ -75,11 +74,11 @@ describe('MultiSelect', () => {
     pressSpace();
 
     expect(
-      container.querySelector('[aria-expanded="true"][aria-haspopup="true"]')
+      container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
     ).toBeInstanceOf(HTMLElement);
   });
 
-  it.skip('should open the menu when a user hits enter while the field is focused', () => {
+  it('should open the menu when a user hits enter while the field is focused', () => {
     const items = generateItems(4, generateGenericItem);
     const { container } = render(
       <MultiSelect id="test" label="test-label" items={items} />
@@ -89,7 +88,7 @@ describe('MultiSelect', () => {
     pressEnter();
 
     expect(
-      container.querySelector('[aria-expanded="true"][aria-haspopup="true"]')
+      container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
     ).toBeInstanceOf(HTMLElement);
   });
 
@@ -112,15 +111,13 @@ describe('MultiSelect', () => {
 
     Simulate.click(itemNode);
 
-    expect(
-      document.querySelector('[aria-selected="true"][role="option"]')
-    ).toBeInstanceOf(HTMLElement);
+    expect(itemNode.getAttribute('data-contained-checkbox-state')).toBe('true');
 
     Simulate.click(itemNode);
 
-    expect(
-      document.querySelector('[aria-selected="true"][role="option"]')
-    ).toBeNull();
+    expect(itemNode.getAttribute('data-contained-checkbox-state')).toBe(
+      'false'
+    );
   });
 
   it('should close the menu when the user hits the Escape key', () => {
@@ -133,110 +130,72 @@ describe('MultiSelect', () => {
     pressSpace();
 
     expect(
-      container.querySelector('[aria-expanded="true"][aria-haspopup="true"]')
+      container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
     ).toBeInstanceOf(HTMLElement);
 
-    Simulate.keyDown(document.activeElement, {
+    Simulate.keyDown(container.querySelector('[role="listbox"]'), {
       key: 'Escape',
     });
 
     expect(
-      container.querySelector('[aria-expanded="true"][aria-haspopup="true"]')
+      container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
     ).toBeNull();
   });
 
-  it.skip('close menu with click outside of field', () => {
+  it('close menu with click outside of field', () => {
     const items = generateItems(4, generateGenericItem);
     const label = 'test-label';
     const { container } = render(
       <MultiSelect id="test" label={label} items={items} />
     );
     const labelNode = getByText(container, label);
-    const button = document.createElement('BUTTON');
-    button.id = 'button-id';
-    document.body.appendChild(button);
-    const buttonNode = document.getElementById('button-id');
 
     expect(
-      container.querySelector('[aria-expanded="true"][aria-haspopup="true"]')
+      container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
     ).toBeFalsy();
 
     Simulate.click(labelNode);
 
     expect(
-      container.querySelector('[aria-expanded="true"][aria-haspopup="true"]')
+      container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
     ).toBeTruthy();
 
-    Simulate.click(buttonNode);
+    Simulate.blur(container.querySelector('[role="listbox"]'));
 
     expect(
-      container.querySelector('[aria-expanded="true"][aria-haspopup="true"]')
+      container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
     ).toBeFalsy();
-
-    document.body.removeChild(button);
   });
 
-  it.skip('should toggle selection with enter', () => {
-    // yeah focus is on the field, you hit the arrows to change the active index, and keydown is on the field since it has focus
+  it('should toggle selection with enter', () => {
     const items = generateItems(4, generateGenericItem);
     const label = 'test-label';
     const { container } = render(
       <MultiSelect id="test" label={label} items={items} />
     );
 
-    const labelNode = getByText(container, label);
-    Simulate.click(labelNode);
+    pressTab();
+    pressSpace();
 
     const [item] = items;
     const itemNode = getByText(container, item.label);
-    console.log(item.label);
-
-    expect(
-      document.querySelector('[aria-selected="true"][role="option"]')
-    ).toBeNull();
-
-    Simulate.keyDown(itemNode, { key: 'Enter' });
-
-    expect(
-      document.querySelector('[aria-selected="true"][role="option"]')
-    ).toBeInstanceOf(HTMLElement);
-
-    Simulate.keyDown(itemNode, { key: 'Enter' });
-
-    expect(
-      document.querySelector('[aria-selected="true"][role="option"]')
-    ).toBeNull();
-  });
 
-  it.skip('toggle selection with space', () => {
-    // yeah focus is on the field, you hit the arrows to change the active index, and keydown is on the field since it has focus
-    const items = generateItems(4, generateGenericItem);
-    const label = 'test-label';
-    const { container } = render(
-      <MultiSelect id="test" label={label} items={items} />
+    expect(itemNode.getAttribute('data-contained-checkbox-state')).toBe(
+      'false'
     );
 
-    const labelNode = getByText(container, label);
-    Simulate.click(labelNode);
-
-    const [item] = items;
-    const itemNode = getByText(container, item.label);
-
-    expect(
-      document.querySelector('[aria-selected="true"][role="option"]')
-    ).toBeNull();
-
-    Simulate.keyDown(itemNode, keys.Space);
+    Simulate.keyDown(container.querySelector('[role="listbox"]'), {
+      key: 'ArrowDown',
+    });
+    pressEnter();
 
-    expect(
-      document.querySelector('[aria-selected="true"][role="option"]')
-    ).toBeInstanceOf(HTMLElement);
+    expect(itemNode.getAttribute('data-contained-checkbox-state')).toBe('true');
 
-    Simulate.keyDown(itemNode, keys.Space);
+    pressEnter();
 
-    expect(
-      document.querySelector('[aria-selected="true"][role="option"]')
-    ).toBeNull();
+    expect(itemNode.getAttribute('data-contained-checkbox-state')).toBe(
+      'false'
+    );
   });
 
   it('should clear selected items when the user clicks the clear selection button', () => {
@@ -273,7 +232,7 @@ describe('MultiSelect', () => {
     Simulate.click(labelNode);
 
     expect(
-      container.querySelector('[aria-expanded="true"][aria-haspopup="true"]')
+      container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
     ).toBeFalsy();
   });
 
@@ -299,7 +258,7 @@ describe('MultiSelect', () => {
       Simulate.click(labelNode);
 
       expect(
-        document.querySelector('[aria-selected="true"][role="option"]')
+        document.querySelector('[data-contained-checkbox-state="true"]')
       ).toBeInstanceOf(HTMLElement);
     });
 
@@ -383,7 +342,10 @@ describe('MultiSelect', () => {
 
       const [item] = items;
       const itemNode = getByText(container, item.label);
-      Simulate.click(itemNode);
+
+      act(() => {
+        Simulate.click(itemNode);
+      });
 
       expect(testFunction).toHaveBeenCalledTimes(1);
     });
diff --git a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
index d5817b08c30f..b47c79031e3d 100644
--- a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
+++ b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
@@ -56,14 +56,10 @@ exports[`MultiSelect.Filterable should render 1`] = `
       render={[Function]}
     >
       <Downshift
-        breakingChanges={Object {}}
         defaultHighlightedIndex={null}
-        defaultInputValue=""
         defaultIsOpen={false}
-        defaultSelectedItem={null}
         environment={[Window]}
         getA11yStatusMessage={[Function]}
-        highlightedIndex={null}
         inputValue=""
         isOpen={false}
         itemToString={[Function]}
@@ -73,26 +69,35 @@ exports[`MultiSelect.Filterable should render 1`] = `
         onSelect={[Function]}
         onStateChange={[Function]}
         onUserAction={[Function]}
-        render={[Function]}
+        scrollIntoView={[Function]}
         selectedItem={Array []}
         selectedItemChanged={[Function]}
         stateReducer={[Function]}
+        suppressRefError={false}
       >
         <ListBox
+          aria-expanded={false}
+          aria-haspopup="listbox"
+          aria-labelledby="downshift-0-label"
+          aria-owns={null}
           className="bx--multi-select bx--combo-box bx--multi-select--filterable"
           disabled={false}
-          innerRef={[Function]}
           isOpen={false}
           light={false}
+          role="combobox"
           type="default"
         >
           <div
+            aria-expanded={false}
+            aria-haspopup="listbox"
+            aria-labelledby="downshift-0-label"
+            aria-owns={null}
             className="bx--multi-select bx--combo-box bx--multi-select--filterable bx--list-box"
             onClick={[Function]}
             onKeyDown={[Function]}
+            role="combobox"
           >
             <ListBoxField
-              aria-expanded={false}
               aria-haspopup={true}
               aria-labelledby="filterablemultiselect-label-1"
               data-toggle={true}
@@ -101,12 +106,12 @@ exports[`MultiSelect.Filterable should render 1`] = `
               onBlur={[Function]}
               onClick={[Function]}
               onKeyDown={[Function]}
+              onKeyUp={[Function]}
               role="button"
               type="button"
             >
               <div
                 aria-controls={null}
-                aria-expanded={false}
                 aria-haspopup={true}
                 aria-labelledby="filterablemultiselect-label-1"
                 aria-owns={null}
@@ -115,6 +120,7 @@ exports[`MultiSelect.Filterable should render 1`] = `
                 onBlur={[Function]}
                 onClick={[Function]}
                 onKeyDown={[Function]}
+                onKeyUp={[Function]}
                 role="button"
                 tabIndex={-1}
                 type="button"
@@ -122,8 +128,8 @@ exports[`MultiSelect.Filterable should render 1`] = `
                 <input
                   aria-activedescendant={null}
                   aria-autocomplete="list"
-                  aria-controls="test-filterable-multiselect__menu"
-                  aria-expanded={false}
+                  aria-controls={null}
+                  aria-labelledby="downshift-0-label"
                   autoComplete="off"
                   className="bx--text-input bx--text-input--empty"
                   disabled={false}
@@ -132,7 +138,6 @@ exports[`MultiSelect.Filterable should render 1`] = `
                   onChange={[Function]}
                   onKeyDown={[Function]}
                   placeholder="Placeholder..."
-                  role="combobox"
                   value=""
                 />
                 <ListBoxMenuIcon
@@ -179,333 +184,6 @@ exports[`MultiSelect.Filterable should render 1`] = `
                 </ListBoxMenuIcon>
               </div>
             </ListBoxField>
-            <ListBoxMenu
-              aria-label="Choose an item"
-              id="test-filterable-multiselect"
-            >
-              <div
-                aria-label="Choose an item"
-                className="bx--list-box__menu"
-                id="test-filterable-multiselect__menu"
-                role="listbox"
-              >
-                <ListBoxMenuItem
-                  id="downshift-0-item-0"
-                  isActive={false}
-                  isHighlighted={false}
-                  key="downshift-0-item-0"
-                  onClick={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseMove={[Function]}
-                  title="Item 0"
-                >
-                  <div
-                    className="bx--list-box__menu-item"
-                    id="downshift-0-item-0"
-                    onClick={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseMove={[Function]}
-                    title="Item 0"
-                  >
-                    <div
-                      className="bx--list-box__menu-item__option"
-                    >
-                      <Checkbox
-                        checked={false}
-                        disabled={false}
-                        id="downshift-0-item-0"
-                        indeterminate={false}
-                        labelText="Item 0"
-                        name="Item 0"
-                        onChange={[Function]}
-                        readOnly={true}
-                        tabIndex="-1"
-                        title={null}
-                      >
-                        <div
-                          className="bx--form-item bx--checkbox-wrapper"
-                        >
-                          <input
-                            checked={false}
-                            className="bx--checkbox"
-                            disabled={false}
-                            id="downshift-0-item-0"
-                            name="Item 0"
-                            onChange={[Function]}
-                            readOnly={true}
-                            tabIndex="-1"
-                            type="checkbox"
-                          />
-                          <label
-                            className="bx--checkbox-label"
-                            htmlFor="downshift-0-item-0"
-                            title={null}
-                          >
-                            <span
-                              className="bx--checkbox-label-text"
-                            >
-                              Item 0
-                            </span>
-                          </label>
-                        </div>
-                      </Checkbox>
-                    </div>
-                  </div>
-                </ListBoxMenuItem>
-                <ListBoxMenuItem
-                  id="downshift-0-item-1"
-                  isActive={false}
-                  isHighlighted={false}
-                  key="downshift-0-item-1"
-                  onClick={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseMove={[Function]}
-                  title="Item 1"
-                >
-                  <div
-                    className="bx--list-box__menu-item"
-                    id="downshift-0-item-1"
-                    onClick={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseMove={[Function]}
-                    title="Item 1"
-                  >
-                    <div
-                      className="bx--list-box__menu-item__option"
-                    >
-                      <Checkbox
-                        checked={false}
-                        disabled={false}
-                        id="downshift-0-item-1"
-                        indeterminate={false}
-                        labelText="Item 1"
-                        name="Item 1"
-                        onChange={[Function]}
-                        readOnly={true}
-                        tabIndex="-1"
-                        title={null}
-                      >
-                        <div
-                          className="bx--form-item bx--checkbox-wrapper"
-                        >
-                          <input
-                            checked={false}
-                            className="bx--checkbox"
-                            disabled={false}
-                            id="downshift-0-item-1"
-                            name="Item 1"
-                            onChange={[Function]}
-                            readOnly={true}
-                            tabIndex="-1"
-                            type="checkbox"
-                          />
-                          <label
-                            className="bx--checkbox-label"
-                            htmlFor="downshift-0-item-1"
-                            title={null}
-                          >
-                            <span
-                              className="bx--checkbox-label-text"
-                            >
-                              Item 1
-                            </span>
-                          </label>
-                        </div>
-                      </Checkbox>
-                    </div>
-                  </div>
-                </ListBoxMenuItem>
-                <ListBoxMenuItem
-                  id="downshift-0-item-2"
-                  isActive={false}
-                  isHighlighted={false}
-                  key="downshift-0-item-2"
-                  onClick={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseMove={[Function]}
-                  title="Item 2"
-                >
-                  <div
-                    className="bx--list-box__menu-item"
-                    id="downshift-0-item-2"
-                    onClick={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseMove={[Function]}
-                    title="Item 2"
-                  >
-                    <div
-                      className="bx--list-box__menu-item__option"
-                    >
-                      <Checkbox
-                        checked={false}
-                        disabled={false}
-                        id="downshift-0-item-2"
-                        indeterminate={false}
-                        labelText="Item 2"
-                        name="Item 2"
-                        onChange={[Function]}
-                        readOnly={true}
-                        tabIndex="-1"
-                        title={null}
-                      >
-                        <div
-                          className="bx--form-item bx--checkbox-wrapper"
-                        >
-                          <input
-                            checked={false}
-                            className="bx--checkbox"
-                            disabled={false}
-                            id="downshift-0-item-2"
-                            name="Item 2"
-                            onChange={[Function]}
-                            readOnly={true}
-                            tabIndex="-1"
-                            type="checkbox"
-                          />
-                          <label
-                            className="bx--checkbox-label"
-                            htmlFor="downshift-0-item-2"
-                            title={null}
-                          >
-                            <span
-                              className="bx--checkbox-label-text"
-                            >
-                              Item 2
-                            </span>
-                          </label>
-                        </div>
-                      </Checkbox>
-                    </div>
-                  </div>
-                </ListBoxMenuItem>
-                <ListBoxMenuItem
-                  id="downshift-0-item-3"
-                  isActive={false}
-                  isHighlighted={false}
-                  key="downshift-0-item-3"
-                  onClick={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseMove={[Function]}
-                  title="Item 3"
-                >
-                  <div
-                    className="bx--list-box__menu-item"
-                    id="downshift-0-item-3"
-                    onClick={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseMove={[Function]}
-                    title="Item 3"
-                  >
-                    <div
-                      className="bx--list-box__menu-item__option"
-                    >
-                      <Checkbox
-                        checked={false}
-                        disabled={false}
-                        id="downshift-0-item-3"
-                        indeterminate={false}
-                        labelText="Item 3"
-                        name="Item 3"
-                        onChange={[Function]}
-                        readOnly={true}
-                        tabIndex="-1"
-                        title={null}
-                      >
-                        <div
-                          className="bx--form-item bx--checkbox-wrapper"
-                        >
-                          <input
-                            checked={false}
-                            className="bx--checkbox"
-                            disabled={false}
-                            id="downshift-0-item-3"
-                            name="Item 3"
-                            onChange={[Function]}
-                            readOnly={true}
-                            tabIndex="-1"
-                            type="checkbox"
-                          />
-                          <label
-                            className="bx--checkbox-label"
-                            htmlFor="downshift-0-item-3"
-                            title={null}
-                          >
-                            <span
-                              className="bx--checkbox-label-text"
-                            >
-                              Item 3
-                            </span>
-                          </label>
-                        </div>
-                      </Checkbox>
-                    </div>
-                  </div>
-                </ListBoxMenuItem>
-                <ListBoxMenuItem
-                  id="downshift-0-item-4"
-                  isActive={false}
-                  isHighlighted={false}
-                  key="downshift-0-item-4"
-                  onClick={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseMove={[Function]}
-                  title="Item 4"
-                >
-                  <div
-                    className="bx--list-box__menu-item"
-                    id="downshift-0-item-4"
-                    onClick={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseMove={[Function]}
-                    title="Item 4"
-                  >
-                    <div
-                      className="bx--list-box__menu-item__option"
-                    >
-                      <Checkbox
-                        checked={false}
-                        disabled={false}
-                        id="downshift-0-item-4"
-                        indeterminate={false}
-                        labelText="Item 4"
-                        name="Item 4"
-                        onChange={[Function]}
-                        readOnly={true}
-                        tabIndex="-1"
-                        title={null}
-                      >
-                        <div
-                          className="bx--form-item bx--checkbox-wrapper"
-                        >
-                          <input
-                            checked={false}
-                            className="bx--checkbox"
-                            disabled={false}
-                            id="downshift-0-item-4"
-                            name="Item 4"
-                            onChange={[Function]}
-                            readOnly={true}
-                            tabIndex="-1"
-                            type="checkbox"
-                          />
-                          <label
-                            className="bx--checkbox-label"
-                            htmlFor="downshift-0-item-4"
-                            title={null}
-                          >
-                            <span
-                              className="bx--checkbox-label-text"
-                            >
-                              Item 4
-                            </span>
-                          </label>
-                        </div>
-                      </Checkbox>
-                    </div>
-                  </div>
-                </ListBoxMenuItem>
-              </div>
-            </ListBoxMenu>
           </div>
         </ListBox>
       </Downshift>
diff --git a/packages/react/src/internal/Selection.js b/packages/react/src/internal/Selection.js
index bac3dcd0b687..664e7e3a6dc4 100644
--- a/packages/react/src/internal/Selection.js
+++ b/packages/react/src/internal/Selection.js
@@ -5,10 +5,69 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useCallback, useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash.isequal';
 
+export function useSelection({
+  disabled,
+  onChange,
+  initialSelectedItems = [],
+}) {
+  const isMounted = useRef(false);
+  const [selectedItems, setSelectedItems] = useState(initialSelectedItems);
+  const onItemChange = useCallback(
+    item => {
+      if (disabled) {
+        return;
+      }
+
+      let selectedIndex;
+      selectedItems.forEach((selectedItem, index) => {
+        if (isEqual(selectedItem, item)) {
+          selectedIndex = index;
+        }
+      });
+
+      if (selectedIndex === undefined) {
+        setSelectedItems(selectedItems => selectedItems.concat(item));
+        return;
+      }
+
+      setSelectedItems(selectedItems =>
+        removeAtIndex(selectedItems, selectedIndex)
+      );
+    },
+    [disabled, selectedItems]
+  );
+
+  const clearSelection = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    setSelectedItems([]);
+  }, [disabled]);
+
+  useEffect(() => {
+    if (isMounted.current === true && onChange) {
+      onChange({ selectedItems });
+    }
+  }, [onChange, selectedItems]);
+
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return {
+    selectedItems,
+    onItemChange,
+    clearSelection,
+  };
+}
+
 export default class Selection extends React.Component {
   static propTypes = {
     initialSelectedItems: PropTypes.array.isRequired,
@@ -55,6 +114,7 @@ export default class Selection extends React.Component {
       selectedItems: removeAtIndex(state.selectedItems, index),
     }));
   };
+
   handleOnItemChange = item => {
     if (this.props.disabled) {
       return;
diff --git a/packages/react/src/prop-types/childrenOfType.js b/packages/react/src/prop-types/childrenOfType.js
index 55825ecc9156..616ab3de1466 100644
--- a/packages/react/src/prop-types/childrenOfType.js
+++ b/packages/react/src/prop-types/childrenOfType.js
@@ -23,6 +23,9 @@ const childrenOfType = expectedChildType => {
   );
   const validate = (props, propName, componentName) => {
     Children.forEach(props[propName], child => {
+      if (!child) {
+        return;
+      }
       const childDisplayName = getDisplayName(child.type);
       if (
         child.type !== expectedChildType.type &&
diff --git a/packages/react/src/tools/createPropAdapter.js b/packages/react/src/tools/createPropAdapter.js
new file mode 100644
index 000000000000..08da0a988e11
--- /dev/null
+++ b/packages/react/src/tools/createPropAdapter.js
@@ -0,0 +1,44 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Create an adapter that converts an object of props with potentially deprecated
+ * prop names to the replacement prop names in a newer version. Useful for guarding
+ * against breaking changes when a prop has been renamed
+ *
+ * @param {Array} spec - an array of options which specify a text or regex
+ * matcher alongside a replacement if there is a match
+ * @returns {Function}
+ */
+function createPropAdapter(spec) {
+  // if props aren't passed in we should default the prop to empty object
+  return (input = {}) => {
+    const output = {};
+    Object.keys(input).forEach(key => {
+      const match = spec.find(([regex]) => {
+        return key.match(regex);
+      });
+      if (match) {
+        const [regex, replacer] = match;
+        output[key.replace(regex, replacer)] = input[key];
+        return;
+      }
+      output[key] = input[key];
+    });
+    return output;
+  };
+}
+
+/**
+ * TODO: REMOVE IN v11
+ * props staring with "default..." were changed to "initial..." in Downshift v3
+ *
+ * @see https://github.com/downshift-js/downshift/releases/tag/v3.0.0
+ */
+const mapDownshiftProps = createPropAdapter([[/^default/g, 'initial']]);
+
+export { mapDownshiftProps };
diff --git a/yarn.lock b/yarn.lock
index b0613caf2fac..575f40e5418d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7257,6 +7257,11 @@ component-inherit@0.0.3:
   resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
   integrity sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=
 
+compute-scroll-into-view@^1.0.9:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.13.tgz#be1b1663b0e3f56cd5f7713082549f562a3477e2"
+  integrity sha512-o+w9w7A98aAFi/GjK8cxSV+CdASuPa2rR5UWs3+yHkJzWqaKoBEufFNWYaXInCSmUfDCVhesG+v9MTWqOjsxFg==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -8706,6 +8711,16 @@ downshift@^1.31.14:
   resolved "https://registry.yarnpkg.com/downshift/-/downshift-1.31.16.tgz#acd81631539502d4112d01bd573654419fd9f640"
   integrity sha512-RskXmiGSoz0EHAyBrmTBGSLHg6+NYDGuLu2W3GpmuOe6hmZEWhCiQrq5g6DWzhnUaJD41xHbbfC6j1Fe86YqgA==
 
+downshift@^5.0.5:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/downshift/-/downshift-5.0.5.tgz#1cc90dc09ae62998ce28a4ce457e0f1cdd0bfcfa"
+  integrity sha512-V1idov3Rkvz1YWA1K67aIx51EgokIDvep4x6KmU7HhsayI8DvTEZBeH4O92zeFVGximKujRO7ChBzBAf4PKWFA==
+  dependencies:
+    "@babel/runtime" "^7.4.5"
+    compute-scroll-into-view "^1.0.9"
+    prop-types "^15.7.2"
+    react-is "^16.9.0"
+
 duplexer2@^0.1.2, duplexer2@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"