diff --git a/CHANGELOG.md b/CHANGELOG.md
index 378c078651..771211d278 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Add `on` and `mouseLeaveDelay` props to `Popup` component @mnajdova ([#622](https://github.com/stardust-ui/react/pull/622))
+- Add Dropdown Single Selection variant @silviuavram ([#584](https://github.com/stardust-ui/react/pull/584))
 
 ### Fixes
 - Fix unicode arrow characters to be RTL aware ([#690](https://github.com/stardust-ui/react/pull/690))
diff --git a/docs/src/examples/components/Dropdown/Types/DropdownExampleMultipleSearch.shorthand.tsx b/docs/src/examples/components/Dropdown/Types/DropdownExampleMultipleSearch.shorthand.tsx
index 4dc983cd0c..6aba57a1d9 100644
--- a/docs/src/examples/components/Dropdown/Types/DropdownExampleMultipleSearch.shorthand.tsx
+++ b/docs/src/examples/components/Dropdown/Types/DropdownExampleMultipleSearch.shorthand.tsx
@@ -13,21 +13,17 @@ const inputItems = [
   'Selina Kyle',
 ]
 
-class DropdownExample extends React.Component {
-  render() {
-    return (
-      <Dropdown
-        multiple
-        search
-        getA11ySelectionMessage={getA11ySelectionMessage}
-        getA11yStatusMessage={getA11yStatusMessage}
-        noResultsMessage="We couldn't find any matches."
-        placeholder="Start typing a name"
-        items={inputItems}
-      />
-    )
-  }
-}
+const DropdownExample = () => (
+  <Dropdown
+    multiple
+    search
+    getA11ySelectionMessage={getA11ySelectionMessage}
+    getA11yStatusMessage={getA11yStatusMessage}
+    noResultsMessage="We couldn't find any matches."
+    placeholder="Start typing a name"
+    items={inputItems}
+  />
+)
 
 const getA11ySelectionMessage = {
   onAdd: item => `${item} has been selected.`,
diff --git a/docs/src/examples/components/Dropdown/Types/DropdownExampleSingleSelection.shorthand.tsx b/docs/src/examples/components/Dropdown/Types/DropdownExampleSingleSelection.shorthand.tsx
new file mode 100644
index 0000000000..c4f046d982
--- /dev/null
+++ b/docs/src/examples/components/Dropdown/Types/DropdownExampleSingleSelection.shorthand.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react'
+import { Dropdown } from '@stardust-ui/react'
+
+const inputItems = [
+  'Bruce Wayne',
+  'Natasha Romanoff',
+  'Steven Strange',
+  'Alfred Pennyworth',
+  `Scarlett O'Hara`,
+  'Imperator Furiosa',
+  'Bruce Banner',
+  'Peter Parker',
+  'Selina Kyle',
+]
+
+const DropdownExample = () => (
+  <Dropdown
+    getA11yStatusMessage={getA11yStatusMessage}
+    getA11ySelectionMessage={{
+      onAdd: item => `${item} has been selected.`,
+    }}
+    placeholder="Select your hero"
+    items={inputItems}
+  />
+)
+
+const getA11yStatusMessage = ({
+  isOpen,
+  itemToString,
+  previousResultCount,
+  resultCount,
+  selectedItem,
+}) => {
+  if (!isOpen) {
+    return selectedItem ? itemToString(selectedItem) : ''
+  }
+  if (!resultCount) {
+    return 'No results are available.'
+  }
+  if (resultCount !== previousResultCount) {
+    return `${resultCount} result${
+      resultCount === 1 ? ' is' : 's are'
+    } available, use up and down arrow keys to navigate. Press Enter key to select.`
+  }
+  return ''
+}
+
+export default DropdownExample
diff --git a/docs/src/examples/components/Dropdown/Types/index.tsx b/docs/src/examples/components/Dropdown/Types/index.tsx
index 6a93a98f50..9b11169a48 100644
--- a/docs/src/examples/components/Dropdown/Types/index.tsx
+++ b/docs/src/examples/components/Dropdown/Types/index.tsx
@@ -4,10 +4,15 @@ import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Types = () => (
   <ExampleSection title="Types">
+    <ComponentExample
+      title="Single Selection"
+      description="A dropdown with single selection."
+      examplePath="components/Dropdown/Types/DropdownExampleSingleSelection"
+    />
     <ComponentExample
       title="Multiple Search"
       description="A dropdown with multiple selection and search."
-      examplePath="components/Dropdown/Types/DropdownExampleMultipleSearch.shorthand"
+      examplePath="components/Dropdown/Types/DropdownExampleMultipleSearch"
     />
   </ExampleSection>
 )
diff --git a/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchFluid.shorthand.tsx b/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchFluid.shorthand.tsx
index 7dd60f245a..5d1de96419 100644
--- a/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchFluid.shorthand.tsx
+++ b/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchFluid.shorthand.tsx
@@ -12,23 +12,18 @@ const inputItems = [
   'Peter Parker',
   'Selina Kyle',
 ]
-
-class DropdownExample extends React.Component {
-  render() {
-    return (
-      <Dropdown
-        multiple
-        getA11ySelectionMessage={getA11ySelectionMessage}
-        getA11yStatusMessage={getA11yStatusMessage}
-        noResultsMessage="We couldn't find any matches."
-        search
-        fluid
-        placeholder="Start typing a name"
-        items={inputItems}
-      />
-    )
-  }
-}
+const DropdownExample = () => (
+  <Dropdown
+    multiple
+    getA11ySelectionMessage={getA11ySelectionMessage}
+    getA11yStatusMessage={getA11yStatusMessage}
+    noResultsMessage="We couldn't find any matches."
+    search
+    fluid
+    placeholder="Start typing a name"
+    items={inputItems}
+  />
+)
 
 const getA11ySelectionMessage = {
   onAdd: item => `${item} has been selected.`,
diff --git a/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent.shorthand.tsx b/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent.shorthand.tsx
index ed52d80f56..248055b67a 100644
--- a/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent.shorthand.tsx
+++ b/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent.shorthand.tsx
@@ -49,21 +49,17 @@ const inputItems = [
   },
 ]
 
-class DropdownExample extends React.Component {
-  render() {
-    return (
-      <Dropdown
-        multiple
-        getA11yStatusMessage={getA11yStatusMessage}
-        search
-        getA11ySelectionMessage={getA11ySelectionMessage}
-        noResultsMessage="We couldn't find any matches."
-        placeholder="Start typing a name"
-        items={inputItems}
-      />
-    )
-  }
-}
+const DropdownExample = () => (
+  <Dropdown
+    multiple
+    getA11yStatusMessage={getA11yStatusMessage}
+    search
+    getA11ySelectionMessage={getA11ySelectionMessage}
+    noResultsMessage="We couldn't find any matches."
+    placeholder="Start typing a name"
+    items={inputItems}
+  />
+)
 
 const getA11ySelectionMessage = {
   onAdd: item => `${item.header} has been selected.`,
diff --git a/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchToggleButton.shorthand.tsx b/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchToggleButton.shorthand.tsx
index 1f85c9cc1b..3fb6470421 100644
--- a/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchToggleButton.shorthand.tsx
+++ b/docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchToggleButton.shorthand.tsx
@@ -13,22 +13,18 @@ const inputItems = [
   'Selina Kyle',
 ]
 
-class DropdownExample extends React.Component {
-  render() {
-    return (
-      <Dropdown
-        multiple
-        getA11yStatusMessage={getA11yStatusMessage}
-        getA11ySelectionMessage={getA11ySelectionMessage}
-        noResultsMessage="We couldn't find any matches."
-        search
-        placeholder="Start typing a name"
-        toggleButton
-        items={inputItems}
-      />
-    )
-  }
-}
+const DropdownExample = () => (
+  <Dropdown
+    multiple
+    getA11yStatusMessage={getA11yStatusMessage}
+    getA11ySelectionMessage={getA11ySelectionMessage}
+    noResultsMessage="We couldn't find any matches."
+    search
+    placeholder="Start typing a name"
+    toggleButton
+    items={inputItems}
+  />
+)
 
 const getA11ySelectionMessage = {
   onAdd: item => `${item} has been selected.`,
diff --git a/docs/src/examples/components/Dropdown/Variations/index.tsx b/docs/src/examples/components/Dropdown/Variations/index.tsx
index cd3ff955f8..ca3ecfd32f 100644
--- a/docs/src/examples/components/Dropdown/Variations/index.tsx
+++ b/docs/src/examples/components/Dropdown/Variations/index.tsx
@@ -7,17 +7,17 @@ const Variations = () => (
     <ComponentExample
       title="Multiple Search with Image and Content"
       description="A multiple search dropdown which items have header, content and image."
-      examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent.shorthand"
+      examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent"
     />
     <ComponentExample
       title="Multiple Search Fluid"
       description="A multiple search dropdown that fits the width of the container."
-      examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchFluid.shorthand"
+      examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchFluid"
     />
     <ComponentExample
       title="Multiple Search with Toggle Button"
       description="A multiple search dropdown with toggle button that shows/hides the items list."
-      examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchToggleButton.shorthand"
+      examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchToggleButton"
     />
   </ExampleSection>
 )
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index bb7aded10a..98b3183ffc 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -3,7 +3,11 @@ import * as PropTypes from 'prop-types'
 import * as _ from 'lodash'
 
 import { Extendable, ShorthandValue, ComponentEventHandler } from '../../../types/utils'
-import { ComponentSlotStylesInput, ComponentVariablesInput } from '../../themes/types'
+import {
+  ComponentSlotStylesInput,
+  ComponentVariablesInput,
+  ComponentSlotClasses,
+} from '../../themes/types'
 import Downshift, {
   DownshiftState,
   StateChangeOptions,
@@ -19,17 +23,17 @@ import {
   RenderResultConfig,
   customPropTypes,
   commonPropTypes,
+  handleRef,
 } from '../../lib'
 import keyboardKey from 'keyboard-key'
 import List from '../List/List'
 import Text from '../Text/Text'
-import Icon from '../Icon/Icon'
 import Ref from '../Ref/Ref'
 import { UIComponentProps } from '../../lib/commonPropInterfaces'
-import DropdownItem, { DropdownItemProps } from './DropdownItem'
+import DropdownItem from './DropdownItem'
 import DropdownLabel, { DropdownLabelProps } from './DropdownLabel'
-import DropdownSearchInput from './DropdownSearchInput'
-import { DropdownSearchInputProps } from 'semantic-ui-react'
+import DropdownSearchInput, { DropdownSearchInputProps } from './DropdownSearchInput'
+import Button from '../Button/Button'
 
 // TODO: To be replaced when Downshift will add highlightedItem in their interface.
 export interface A11yStatusMessageOptions<Item> extends DownshiftA11yStatusMessageOptions<Item> {
@@ -130,7 +134,9 @@ export default class Dropdown extends AutoControlledComponent<
   Extendable<DropdownProps>,
   DropdownState
 > {
-  private inputNode: HTMLElement
+  private buttonRef = React.createRef<HTMLElement>()
+  private inputRef = React.createRef<HTMLElement>()
+  private listRef = React.createRef<HTMLElement>()
 
   static displayName = 'Dropdown'
 
@@ -210,12 +216,18 @@ export default class Dropdown extends AutoControlledComponent<
       <ElementType className={classes.root} {...rest}>
         <Downshift
           onChange={this.handleSelectedChange}
-          inputValue={searchQuery}
+          inputValue={search ? searchQuery : undefined}
           stateReducer={this.handleDownshiftStateChanges}
           itemToString={itemToString}
-          // Downshift does not support multiple selection. We will handle everything and pass it selected as null in this case.
-          selectedItem={multiple ? null : undefined}
+          // If it's single search, don't pass anything. Pass a null otherwise, as Downshift does
+          // not handle selection by default for single/multiple selection and multiple search.
+          selectedItem={search && !multiple ? undefined : null}
           getA11yStatusMessage={getA11yStatusMessage}
+          onStateChange={changes => {
+            if (changes.isOpen && !search) {
+              this.listRef.current.focus()
+            }
+          }}
         >
           {({
             getInputProps,
@@ -224,32 +236,44 @@ export default class Dropdown extends AutoControlledComponent<
             getRootProps,
             getToggleButtonProps,
             isOpen,
+            toggleMenu,
             highlightedIndex,
             selectItemAtIndex,
           }) => {
+            const { innerRef, ...accessibilityRootPropsRest } = getRootProps(
+              { refKey: 'innerRef' },
+              { suppressRefError: true },
+            )
             return (
-              <div
-                className={classes.containerDiv}
-                onClick={this.handleContainerClick.bind(this, isOpen)}
-              >
-                {multiple && this.renderSelectedItems(styles)}
-                {search &&
-                  this.renderSearchInput(
-                    getRootProps,
-                    getInputProps,
+              <Ref innerRef={innerRef}>
+                <div
+                  className={classes.container}
+                  onClick={multiple ? this.handleContainerClick.bind(this, isOpen) : undefined}
+                >
+                  {multiple && this.renderSelectedItems(styles)}
+                  {search
+                    ? this.renderSearchInput(
+                        accessibilityRootPropsRest,
+                        getInputProps,
+                        highlightedIndex,
+                        selectItemAtIndex,
+                        variables,
+                      )
+                    : this.renderTriggerButton(styles, getToggleButtonProps)}
+                  {toggleButton && this.renderToggleButton(getToggleButtonProps, classes, isOpen)}
+                  {this.renderItemsList(
+                    styles,
+                    variables,
+                    isOpen,
                     highlightedIndex,
+                    toggleMenu,
                     selectItemAtIndex,
+                    getMenuProps,
+                    getItemProps,
+                    getInputProps,
                   )}
-                {toggleButton && this.renderToggleButton(getToggleButtonProps, styles, isOpen)}
-                {this.renderItemsList(
-                  styles,
-                  variables,
-                  getMenuProps,
-                  getItemProps,
-                  isOpen,
-                  highlightedIndex,
-                )}
-              </div>
+                </div>
+              </Ref>
             )
           }}
         </Downshift>
@@ -257,8 +281,36 @@ export default class Dropdown extends AutoControlledComponent<
     )
   }
 
+  private renderTriggerButton(
+    styles: ComponentSlotStylesInput,
+    getToggleButtonProps: (options?: GetToggleButtonPropsOptions) => any,
+  ): JSX.Element {
+    const { placeholder, itemToString, multiple } = this.props
+    const { value } = this.state
+    const content = value && !multiple ? itemToString(value) : placeholder
+
+    return (
+      <Ref innerRef={this.buttonRef}>
+        <Button
+          content={content}
+          fluid
+          styles={styles.button}
+          {...getToggleButtonProps({
+            onFocus: () => {
+              this.setState({ focused: true })
+            },
+            onBlur: () => {
+              this.setState({ focused: false })
+            },
+            'aria-label': content,
+          })}
+        />
+      </Ref>
+    )
+  }
+
   private renderSearchInput(
-    getRootProps: (options?: GetMenuPropsOptions, otherOptions?: GetPropsCommonOptions) => any,
+    accessibilityComboboxProps: Object,
     getInputProps: (options?: GetInputPropsOptions) => any,
     highlightedIndex: number,
     selectItemAtIndex: (
@@ -266,8 +318,9 @@ export default class Dropdown extends AutoControlledComponent<
       otherStateToSet?: Partial<StateChangeOptions<any>>,
       cb?: () => void,
     ) => void,
+    variables,
   ): JSX.Element {
-    const { searchInput, multiple, placeholder } = this.props
+    const { searchInput, multiple, placeholder, toggleButton } = this.props
     const { searchQuery, value } = this.state
 
     const noPlaceholder =
@@ -276,16 +329,16 @@ export default class Dropdown extends AutoControlledComponent<
     return DropdownSearchInput.create(searchInput || {}, {
       defaultProps: {
         placeholder: noPlaceholder ? '' : placeholder,
-        inputRef: (inputNode: HTMLElement) => {
-          this.inputNode = inputNode
-        },
+        hasToggleButton: !!toggleButton,
+        variables,
+        inputRef: this.inputRef,
       },
       overrideProps: (predefinedProps: DropdownSearchInputProps) =>
         this.handleSearchInputOverrides(
           predefinedProps,
           highlightedIndex,
           selectItemAtIndex,
-          getRootProps,
+          accessibilityComboboxProps,
           getInputProps,
         ),
     })
@@ -293,36 +346,57 @@ export default class Dropdown extends AutoControlledComponent<
 
   private renderToggleButton(
     getToggleButtonProps: (options?: GetToggleButtonPropsOptions) => any,
-    styles: ComponentSlotStylesInput,
+    classes: ComponentSlotClasses,
     isOpen: boolean,
   ) {
+    const { onClick } = getToggleButtonProps()
     return (
-      <Icon
-        name={`chevron ${isOpen ? 'up' : 'down'}`}
-        as="button"
-        tabIndex="-1"
-        styles={styles.toggleButton}
-        {...getToggleButtonProps()}
-      />
+      <span className={classes.toggleButton} onClick={onClick}>
+        {isOpen ? String.fromCharCode(9650) : String.fromCharCode(9660)}
+      </span>
     )
   }
 
   private renderItemsList(
     styles: ComponentSlotStylesInput,
     variables: ComponentVariablesInput,
-    getMenuProps: (options?: GetMenuPropsOptions, otherOptions?: GetPropsCommonOptions) => any,
-    getItemProps: (options: GetItemPropsOptions<ShorthandValue>) => any,
     isOpen: boolean,
     highlightedIndex: number,
+    toggleMenu: () => void,
+    selectItemAtIndex: (index: number) => void,
+    getMenuProps: (options?: GetMenuPropsOptions, otherOptions?: GetPropsCommonOptions) => any,
+    getItemProps: (options: GetItemPropsOptions<ShorthandValue>) => any,
+    getInputProps: (options?: GetInputPropsOptions) => any,
   ) {
-    const accessibilityMenuProps = getMenuProps({ refKey: 'innerRef' })
+    const accessibilityMenuProps = getMenuProps({ refKey: 'innerRef' }, { suppressRefError: true })
+    const { search } = this.props
+    // If it's just a selection, some attributes and listeners from Downshift input need to go on the menu list.
+    if (!search) {
+      const accessibilityInputProps = getInputProps()
+      accessibilityMenuProps['aria-activedescendant'] =
+        accessibilityInputProps['aria-activedescendant']
+      accessibilityMenuProps['onKeyDown'] = e => {
+        this.handleListKeyDown(
+          e,
+          highlightedIndex,
+          accessibilityInputProps['onKeyDown'],
+          toggleMenu,
+          selectItemAtIndex,
+        )
+      }
+    }
     const { innerRef, ...accessibilityMenuPropsRest } = accessibilityMenuProps
-
     return (
-      <Ref innerRef={innerRef}>
+      <Ref
+        innerRef={(listElement: HTMLElement) => {
+          handleRef(this.listRef, listElement)
+          handleRef(innerRef, listElement)
+        }}
+      >
         <List
           {...accessibilityMenuPropsRest}
           styles={styles.list}
+          tabIndex={search ? undefined : -1} // needs to be focused when trigger button is activated.
           aria-hidden={!isOpen}
           items={isOpen ? this.renderItems(styles, variables, getItemProps, highlightedIndex) : []}
         />
@@ -336,18 +410,12 @@ export default class Dropdown extends AutoControlledComponent<
     getItemProps: (options: GetItemPropsOptions<ShorthandValue>) => any,
     highlightedIndex: number,
   ) {
-    const { items, noResultsMessage } = this.props
-    const filteredItems = this.getItemsFilteredBySearchQuery(items)
+    const { noResultsMessage } = this.props
+    const filteredItems = this.getItemsFilteredBySearchQuery()
 
     if (filteredItems.length > 0) {
       return filteredItems.map((item, index) => {
-        let itemAsListItem = item
-        if (typeof item === 'object') {
-          itemAsListItem = _.pickBy(item, (value, key) =>
-            _.includes(['key', ...DropdownItem.handledProps], key),
-          )
-        }
-        return DropdownItem.create(itemAsListItem, {
+        return DropdownItem.create(item, {
           defaultProps: {
             active: highlightedIndex === index,
             variables,
@@ -356,8 +424,7 @@ export default class Dropdown extends AutoControlledComponent<
                 key: (item as any).header,
               }),
           },
-          overrideProps: (predefinedProps: DropdownItemProps) =>
-            this.handleItemOverrides(item, index, getItemProps),
+          overrideProps: () => this.handleItemOverrides(item, index, getItemProps),
         })
       })
     }
@@ -414,30 +481,38 @@ export default class Dropdown extends AutoControlledComponent<
           { ...this.props, searchQuery: changes.inputValue },
         )
         return changes
+      case Downshift.stateChangeTypes.blurButton:
+        // Downshift closes the list by default on trigger blur. It does not support the case when dropdown is
+        // single selection and focuses list on trigger click/up/down/space/enter. Treating that here.
+        if (state.isOpen && document.activeElement === this.listRef.current) {
+          return {} // won't change state in this case.
+        }
       default:
         return changes
     }
   }
 
-  private getItemsFilteredBySearchQuery = (items: ShorthandValue[]): ShorthandValue[] => {
-    const { itemToString, multiple, search } = this.props
+  private getItemsFilteredBySearchQuery = (): ShorthandValue[] => {
+    const { items, itemToString, multiple, search } = this.props
     const { searchQuery, value } = this.state
+    let filteredItems = items
 
-    const nonSelectedItems = items.filter(item =>
-      multiple ? (value as ShorthandValue[]).indexOf(item) === -1 : true,
-    )
-
-    const itemsMatchSearchQuery = nonSelectedItems.filter(item =>
-      search
-        ? _.isFunction(search)
-          ? search(itemsMatchSearchQuery, searchQuery)
-          : itemToString(item)
-              .toLowerCase()
-              .indexOf(searchQuery.toLowerCase()) !== -1
-        : true,
-    )
+    if (multiple) {
+      filteredItems = _.difference(filteredItems, value as ShorthandValue[])
+    }
+    if (search) {
+      if (_.isFunction(search)) {
+        return search(filteredItems, searchQuery)
+      }
+      return filteredItems.filter(
+        item =>
+          itemToString(item)
+            .toLowerCase()
+            .indexOf(searchQuery.toLowerCase()) !== -1,
+      )
+    }
 
-    return itemsMatchSearchQuery
+    return filteredItems
   }
 
   private setA11yStatus = (statusMessage: string) => {
@@ -496,7 +571,7 @@ export default class Dropdown extends AutoControlledComponent<
       otherStateToSet?: Partial<StateChangeOptions<any>>,
       cb?: () => void,
     ) => void,
-    getRootProps: (options?: GetMenuPropsOptions, otherOptions?: GetPropsCommonOptions) => any,
+    accessibilityComboboxProps: Object,
     getInputProps: (options?: GetInputPropsOptions) => any,
   ) => {
     const handleInputBlur = (
@@ -511,7 +586,7 @@ export default class Dropdown extends AutoControlledComponent<
       e: React.SyntheticEvent,
       searchInputProps: DropdownSearchInputProps,
     ) => {
-      if (keyboardKey.getCode(e) === keyboardKey.Tab && highlightedIndex !== undefined) {
+      if (keyboardKey.getCode(e) === keyboardKey.Tab && !_.isNil(highlightedIndex)) {
         selectItemAtIndex(highlightedIndex)
       }
 
@@ -536,9 +611,7 @@ export default class Dropdown extends AutoControlledComponent<
         }),
       },
       // same story as above for getRootProps.
-      accessibilityWrapperProps: {
-        ...getRootProps({ refKey: 'innerRef' }, { suppressRefError: true }),
-      },
+      accessibilityComboboxProps,
       onFocus: (e: React.SyntheticEvent, searchInputProps: DropdownSearchInputProps) => {
         this.setState({ focused: true })
 
@@ -571,11 +644,36 @@ export default class Dropdown extends AutoControlledComponent<
   }
 
   private handleContainerClick = (isOpen: boolean) => {
-    !isOpen && this.inputNode.focus()
+    !isOpen && this.inputRef.current.focus()
+  }
+
+  private handleListKeyDown = (
+    e: React.SyntheticEvent,
+    highlightedIndex: number,
+    accessibilityInputPropsKeyDown: (e) => any,
+    toggleMenu: () => void,
+    selectItemAtIndex: (index: number) => void,
+  ) => {
+    switch (keyboardKey.getCode(e)) {
+      case keyboardKey.Tab:
+        if (_.isNil(highlightedIndex)) {
+          toggleMenu()
+        } else {
+          selectItemAtIndex(highlightedIndex)
+        }
+        return
+      case keyboardKey.Escape:
+        accessibilityInputPropsKeyDown(e)
+        this.buttonRef.current.focus()
+        return
+      default:
+        accessibilityInputPropsKeyDown(e)
+        return
+    }
   }
 
   private handleSelectedChange = (item: ShorthandValue) => {
-    const { multiple, getA11ySelectionMessage } = this.props
+    const { multiple, getA11ySelectionMessage, search } = this.props
     const newValue = multiple ? [...(this.state.value as ShorthandValue[]), item] : item
 
     this.trySetState({
@@ -585,6 +683,9 @@ export default class Dropdown extends AutoControlledComponent<
     if (getA11ySelectionMessage && getA11ySelectionMessage.onAdd) {
       this.setA11yStatus(getA11ySelectionMessage.onAdd(item))
     }
+    if (!search) {
+      this.buttonRef.current.focus()
+    }
 
     // we don't have event for it, but want to keep the event handling interface, event is empty.
     _.invoke(this.props, 'onSelectedChange', {}, { ...this.props, value: newValue })
@@ -592,7 +693,7 @@ export default class Dropdown extends AutoControlledComponent<
 
   private handleSelectedItemRemove(e: React.SyntheticEvent, item: ShorthandValue) {
     this.removeItemFromValue(item)
-    this.inputNode.focus()
+    this.inputRef.current.focus()
     e.stopPropagation()
   }
 
@@ -611,7 +712,7 @@ export default class Dropdown extends AutoControlledComponent<
       value,
     })
     if (getA11ySelectionMessage && getA11ySelectionMessage.onRemove) {
-      this.setA11yStatus(getA11ySelectionMessage.onRemove(item))
+      this.setA11yStatus(getA11ySelectionMessage.onRemove(poppedItem))
     }
 
     // we don't have event for it, but want to keep the event handling interface, event is empty.
diff --git a/src/components/Dropdown/DropdownSearchInput.tsx b/src/components/Dropdown/DropdownSearchInput.tsx
index 63cec50f1d..5d967a245d 100644
--- a/src/components/Dropdown/DropdownSearchInput.tsx
+++ b/src/components/Dropdown/DropdownSearchInput.tsx
@@ -6,15 +6,13 @@ import { UIComponent, RenderResultConfig, createShorthandFactory, commonPropType
 import { ComponentEventHandler, ReactProps } from '../../../types/utils'
 import { UIComponentProps } from '../../lib/commonPropInterfaces'
 import Input from '../Input/Input'
-import Ref from '../Ref/Ref'
 
 export interface DropdownSearchInputProps extends UIComponentProps<DropdownSearchInputProps> {
-  /**
-   * Ref callback with an input DOM node.
-   *
-   * @param {JSX.Element} node - input DOM node.
-   */
-  inputRef?: (inputNode: HTMLElement) => void
+  /** Informs the search input about an existing toggle button. */
+  hasToggleButton?: boolean
+
+  /** Ref for input DOM node. */
+  inputRef?: React.Ref<HTMLElement>
 
   /**
    * Called on input element focus.
@@ -68,8 +66,9 @@ class DropdownSearchInput extends UIComponent<ReactProps<DropdownSearchInputProp
       content: false,
     }),
     accessibilityInputProps: PropTypes.object,
-    accessibilityWrapperProps: PropTypes.object,
-    inputRef: PropTypes.func,
+    accessibilityComboboxProps: PropTypes.object,
+    hasToggleButton: PropTypes.bool,
+    inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     onFocus: PropTypes.func,
     onInputBlur: PropTypes.func,
     onInputKeyDown: PropTypes.func,
@@ -77,10 +76,6 @@ class DropdownSearchInput extends UIComponent<ReactProps<DropdownSearchInputProp
     placeholder: PropTypes.string,
   }
 
-  private handleInputRef = (inputNode: HTMLElement) => {
-    _.invoke(this.props, 'inputRef', inputNode)
-  }
-
   private handleFocus = (e: React.SyntheticEvent) => {
     _.invoke(this.props, 'onFocus', e, this.props)
   }
@@ -98,29 +93,31 @@ class DropdownSearchInput extends UIComponent<ReactProps<DropdownSearchInputProp
   }
 
   public renderComponent({ rest, styles }: RenderResultConfig<DropdownSearchInputProps>) {
-    const { accessibilityWrapperProps, accessibilityInputProps, placeholder } = this.props
-    const { innerRef, ...accessibilityWrapperPropsRest } = accessibilityWrapperProps
+    const {
+      accessibilityComboboxProps,
+      accessibilityInputProps,
+      inputRef,
+      placeholder,
+    } = this.props
     return (
-      <Ref innerRef={innerRef}>
-        <Input
-          inputRef={this.handleInputRef}
-          onFocus={this.handleFocus}
-          onKeyUp={this.handleKeyUp}
-          wrapper={{
-            styles: styles.wrapper,
-            ...accessibilityWrapperPropsRest,
-          }}
-          input={{
-            type: 'text',
-            styles: styles.input,
-            placeholder,
-            onBlur: this.handleInputBlur,
-            onKeyDown: this.handleInputKeyDown,
-            ...accessibilityInputProps,
-          }}
-          {...rest}
-        />
-      </Ref>
+      <Input
+        inputRef={inputRef}
+        onFocus={this.handleFocus}
+        onKeyUp={this.handleKeyUp}
+        wrapper={{
+          styles: styles.combobox,
+          ...accessibilityComboboxProps,
+        }}
+        input={{
+          type: 'text',
+          styles: styles.input,
+          placeholder,
+          onBlur: this.handleInputBlur,
+          onKeyDown: this.handleInputKeyDown,
+          ...accessibilityInputProps,
+        }}
+        {...rest}
+      />
     )
   }
 }
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 8eee55fa30..73da8e5f84 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -11,6 +11,7 @@ import {
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  handleRef,
 } from '../../lib'
 import { ReactProps, ShorthandValue, ComponentEventHandler } from '../../../types/utils'
 import Icon from '../Icon/Icon'
@@ -50,12 +51,8 @@ export interface InputProps extends UIComponentProps, ChildrenComponentProps {
   /** The HTML input type. */
   type?: string
 
-  /**
-   * Ref callback with an input DOM node.
-   *
-   * @param {JSX.Element} node - input DOM node.
-   */
-  inputRef?: (node: HTMLElement) => void
+  /** Ref for input DOM node. */
+  inputRef?: React.Ref<HTMLElement>
 
   /** The value of the input. */
   value?: React.ReactText
@@ -77,7 +74,7 @@ export interface InputState {
  *  - if input is search, then use "role='search'"
  */
 class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState> {
-  private inputDomElement: HTMLInputElement
+  private inputRef = React.createRef<HTMLElement>()
 
   static className = 'ui-input'
 
@@ -93,7 +90,7 @@ class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState>
     icon: customPropTypes.itemShorthand,
     iconPosition: PropTypes.oneOf(['start', 'end']),
     input: customPropTypes.itemShorthand,
-    inputRef: PropTypes.func,
+    inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     inline: PropTypes.bool,
     onChange: PropTypes.func,
     type: PropTypes.string,
@@ -116,7 +113,7 @@ class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState>
     styles,
     variables,
   }: RenderResultConfig<InputProps>) {
-    const { className, input, type, wrapper } = this.props
+    const { className, input, inputRef, type, wrapper } = this.props
     const { value = '' } = this.state
     const [htmlInputProps, rest] = partitionHTMLProps(restProps)
 
@@ -125,7 +122,12 @@ class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState>
         className: cx(Input.className, className),
         children: (
           <>
-            <Ref innerRef={this.handleInputRef}>
+            <Ref
+              innerRef={(inputElement: HTMLElement) => {
+                handleRef(this.inputRef, inputElement)
+                handleRef(inputRef, inputElement)
+              }}
+            >
               {Slot.create(input || type, {
                 defaultProps: {
                   ...htmlInputProps,
@@ -155,16 +157,10 @@ class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState>
     })
   }
 
-  private handleInputRef = (inputNode: HTMLElement) => {
-    this.inputDomElement = inputNode as HTMLInputElement
-
-    _.invoke(this.props, 'inputRef', inputNode)
-  }
-
   private handleIconOverrides = predefinedProps => ({
     onClick: (e: React.SyntheticEvent) => {
       this.handleOnClear()
-      this.inputDomElement.focus()
+      this.inputRef.current.focus()
       _.invoke(predefinedProps, 'onClick', e, this.props)
     },
     ...(predefinedProps.onClick && { tabIndex: '0' }),
diff --git a/src/themes/teams/components/Dropdown/dropdownItemStyles.ts b/src/themes/teams/components/Dropdown/dropdownItemStyles.ts
index bf5347c4cd..4e28dbe216 100644
--- a/src/themes/teams/components/Dropdown/dropdownItemStyles.ts
+++ b/src/themes/teams/components/Dropdown/dropdownItemStyles.ts
@@ -9,8 +9,8 @@ const dropdownItemStyles: ComponentSlotStylesInput<DropdownItemProps, DropdownVa
 
     ...(active && {
       [`&.${ListItem.className}`]: {
-        backgroundColor: v.listItemHighlightedBackgroundColor,
-        color: v.listItemHighlightedTextColor,
+        backgroundColor: v.listItemBackgroundColorActive,
+        color: v.listItemColorActive,
       },
     }),
   }),
diff --git a/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts b/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts
index 193a05a58c..16c52581ff 100644
--- a/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts
+++ b/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts
@@ -6,18 +6,25 @@ const dropdownSearchInputStyles: ComponentSlotStylesInput<
   DropdownSearchInputProps,
   DropdownVariables
 > = {
-  input: ({ variables: { backgroundColor } }): ICSSInJSStyle => ({
+  input: ({ variables: { backgroundColor, comboboxPaddingInput } }): ICSSInJSStyle => ({
     width: '100%',
     backgroundColor,
+    padding: comboboxPaddingInput,
 
     ':focus': {
       borderBottomColor: 'transparent',
     },
   }),
 
-  wrapper: ({ variables: { editTextFlexBasis } }): ICSSInJSStyle => ({
-    flexBasis: editTextFlexBasis,
+  combobox: ({
+    variables: { comboboxFlexBasis, toggleButtonSize },
+    props: { hasToggleButton },
+  }): ICSSInJSStyle => ({
+    flexBasis: comboboxFlexBasis,
     flexGrow: 1,
+    ...(hasToggleButton && {
+      marginRight: toggleButtonSize,
+    }),
   }),
 }
 
diff --git a/src/themes/teams/components/Dropdown/dropdownStyles.ts b/src/themes/teams/components/Dropdown/dropdownStyles.ts
index 62436c7499..f06a82774f 100644
--- a/src/themes/teams/components/Dropdown/dropdownStyles.ts
+++ b/src/themes/teams/components/Dropdown/dropdownStyles.ts
@@ -1,19 +1,21 @@
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { DropdownProps } from '../../../../components/Dropdown/Dropdown'
 import { DropdownVariables } from './dropdownVariables'
+import { pxToRem } from '../../utils'
 
 const dropdownStyles: ComponentSlotStylesInput<DropdownProps, DropdownVariables> = {
-  containerDiv: ({
-    props: { focused, toggleButton, fluid },
+  root: (): ICSSInJSStyle => ({}),
+
+  container: ({
+    props: { focused, fluid },
     variables: {
       backgroundColor,
-      containerDivBorderBottom,
-      containerDivBorderRadius,
-      containerDivBorderColor,
-      containerDivFocusBorderColor,
-      containerDivFocusBorderRadius,
-      containerDivColor,
-      toggleButtonSize,
+      borderBottom,
+      borderRadius,
+      borderColor,
+      borderColorFocus,
+      borderRadiusFocus,
+      color,
       width,
     },
   }): ICSSInJSStyle => ({
@@ -22,32 +24,57 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownProps, DropdownVariables>
     outline: 0,
     border: 0,
     backgroundColor,
-    borderRadius: containerDivBorderRadius,
-    borderBottom: containerDivBorderBottom,
-    borderColor: containerDivBorderColor,
-    color: containerDivColor,
+    borderBottom,
+    borderColor,
+    borderRadius,
+    color,
     width: fluid ? '100%' : width,
     position: 'relative',
-    ...(toggleButton && {
-      paddingRight: toggleButtonSize,
-    }),
     ...(focused && {
-      borderColor: containerDivFocusBorderColor,
-      borderRadius: containerDivFocusBorderRadius,
+      borderColor: borderColorFocus,
+      borderRadius: borderRadiusFocus,
     }),
   }),
 
+  button: ({ variables: { comboboxPaddingButton } }): ICSSInJSStyle => {
+    const transparentColorStyle = {
+      backgroundColor: 'transparent',
+      borderColor: 'transparent',
+    }
+    return {
+      boxShadow: 'none',
+      margin: '0',
+      justifyContent: 'left',
+      padding: comboboxPaddingButton,
+      ...transparentColorStyle,
+      height: pxToRem(30),
+      ':hover': transparentColorStyle,
+      ':focus': {
+        ...transparentColorStyle,
+        ':after': {
+          borderColor: 'transparent',
+        },
+        ':active': transparentColorStyle,
+      },
+      ':active': transparentColorStyle,
+    }
+  },
+
   label: (): ICSSInJSStyle => ({
     margin: '.4rem 0 0 .4rem',
   }),
 
-  list: ({ variables: { listMaxHeight, width }, props: { fluid } }): ICSSInJSStyle => ({
+  list: ({
+    variables: { listMaxHeight, width, listBackgroundColor },
+    props: { fluid },
+  }): ICSSInJSStyle => ({
     position: 'absolute',
     zIndex: 1000,
     maxHeight: listMaxHeight,
     overflowY: 'auto',
     width: fluid ? '100%' : width,
     top: 'calc(100% + 2px)', // leave room for container + its border
+    background: listBackgroundColor,
   }),
 
   emptyListItem: ({ variables: { listItemBackgroundColor } }) => ({
@@ -58,9 +85,13 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownProps, DropdownVariables>
     position: 'absolute',
     height: toggleButtonSize,
     width: toggleButtonSize,
-    border: 0,
+    cursor: 'pointer',
     backgroundColor: 'transparent',
     margin: 0,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    userSelect: 'none',
     ...(fluid ? { right: 0 } : { left: `calc(${width} - ${toggleButtonSize})` }),
   }),
 }
diff --git a/src/themes/teams/components/Dropdown/dropdownVariables.ts b/src/themes/teams/components/Dropdown/dropdownVariables.ts
index 32c59c7fd2..489bbccc4a 100644
--- a/src/themes/teams/components/Dropdown/dropdownVariables.ts
+++ b/src/themes/teams/components/Dropdown/dropdownVariables.ts
@@ -1,39 +1,42 @@
 import { pxToRem } from '../../utils'
 export interface DropdownVariables {
   backgroundColor: string
-  containerDivBorderRadius: string
-  containerDivBorderBottom: string
-  containerDivBorderColor: string
-  containerDivColor: string
-  containerDivFocusBorderColor: string
-  containerDivFocusBorderRadius: string
-  editTextFlexBasis: string
+  borderBottom: string
+  borderColor: string
+  borderColorFocus: string
+  borderRadius: string
+  borderRadiusFocus: string
+  color: string
+  comboboxPaddingButton: string
+  comboboxPaddingInput: string
+  comboboxFlexBasis: string
+  listBackgroundColor: string
   listItemBackgroundColor: string
-  listItemHighlightedBackgroundColor: string
-  listItemHighlightedTextColor: string
+  listItemBackgroundColorActive: string
+  listItemColorActive: string
   listMaxHeight: string
   toggleButtonSize: string
   width: string
 }
 
-const [_2px_asRem, _3px_asRem] = [2, 3].map(v => pxToRem(v))
+const [_2px_asRem, _3px_asRem, _6px_asRem, _12px_asRem] = [2, 3, 6, 12].map(v => pxToRem(v))
 
 export default (siteVars): DropdownVariables => ({
   backgroundColor: siteVars.gray10,
-
-  containerDivBorderRadius: _3px_asRem,
-  containerDivBorderBottom: `${_2px_asRem} solid transparent`,
-  containerDivBorderColor: 'transparent',
-  containerDivColor: siteVars.bodyColor,
-  containerDivFocusBorderColor: siteVars.brand,
-  containerDivFocusBorderRadius: `${_3px_asRem} ${_3px_asRem} ${_2px_asRem} ${_2px_asRem}`,
-  editTextFlexBasis: '100px',
-
+  borderRadius: _3px_asRem,
+  borderBottom: `${_2px_asRem} solid transparent`,
+  borderColor: 'transparent',
+  borderColorFocus: siteVars.brand,
+  borderRadiusFocus: `${_3px_asRem} ${_3px_asRem} ${_2px_asRem} ${_2px_asRem}`,
+  color: siteVars.bodyColor,
+  comboboxPaddingButton: `0 ${_12px_asRem}`,
+  comboboxPaddingInput: `${_6px_asRem} ${_12px_asRem}`,
+  comboboxFlexBasis: '50px',
+  listBackgroundColor: siteVars.white,
   listItemBackgroundColor: siteVars.white,
-  listItemHighlightedBackgroundColor: siteVars.brand,
-  listItemHighlightedTextColor: siteVars.white,
+  listItemBackgroundColorActive: siteVars.brand,
+  listItemColorActive: siteVars.white,
   listMaxHeight: '20rem',
-
-  toggleButtonSize: pxToRem(30),
+  toggleButtonSize: pxToRem(32),
   width: pxToRem(356),
 })