Repository: uber-web/baseui
Pull request #975 (2019-03-01 23:55:01)

fix(select): render the dropdown in a popover
#### Description

Changes a solid amount of code to enable this. Greatest hits outlined below:

- **adds innerRef prop to dropdown component** - to ensure that the dropdown element renders with the same width as the input element, I added a ref here so it can be inspected from the parent `Select` component. 
- **removes most styles from dropdown-container** - leaving these alone added extra padding inside of the popover.
- **popover onClickOutside callback now passes the event** - did this to maintain a consistent api on select.
- **inlines the renderMenu code** - since this was not re-used, avoided passing args through a function.
- **removes one test** - because the dropdown is now rendering in a portal, enzyme can't access the element. I may be able to add it back once https://github.com/uber-web/baseui/pull/901 lands.
- **removes aria-activedescendant from menu** - it was being [used incorrectly](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships#aria-activedescendant) and threw errors in e2e tests. making a note to properly implement after this pr.
- **updates scrollItemIntoView util in menu** - this was causing 'jumping' because it would scroll the outer-most window as well as the select dropdown scroll. I noticed some pref degradation with selects over 200 items long. Will add another pr to possibly debounce the call.
- **fixes popover mounting prematurely** - when transitioning `isMounted` from `false` to `true`, it would call the popover unmount code unintentionally. this lead to a bug where page loads followed by fast clicks on the select component would choose an option in the dropdown menu.
- **makes some e2e tests more reliable** - select and datepicker tests were failing maybe 1 out of 5-6 runs. adds some more waits to ensure proper execution.

#### Scope

- [x] Patch: Bug Fix


tajo: It looks and works good!
nadiia: The focused state doesn't go away when select loses focus: 
<img width="739" alt="screen shot 2019-03-05 at 4 27 53 pm" src="https://user-images.githubusercontent.com/1920399/53846943-bb685580-3f63-11e9-80cb-6c40a52805ac.png">

nadiia: The dropdown doesn't stick to the input when the height changes: 
![dropdown](https://user-images.githubusercontent.com/1920399/53847312-0afb5100-3f65-11e9-917f-a9a056f98442.gif)

nadiia: Opening the dropdown makes the page jump, got two examples on datepicker (checked it since e2e tests fail on it and it reused select for the month and year select). The second one is actually reproduceable on the master too, probably not related. But the first one is not on master but I'm not 100% sure is related to your change:

![jump](https://user-images.githubusercontent.com/1920399/53979883-c20dde80-40c3-11e9-87a2-1c5d51c88851.gif)

![jump2](https://user-images.githubusercontent.com/1920399/53979685-5461b280-40c3-11e9-9b63-6c410ee31dbe.gif)

chasestarr: isolated the datepicker bugs to `scrollItemIntoView` function https://github.com/uber-web/baseui/blob/d40039869c5198095c2a752d65c393ec8201fddb/src/menu/utils.js#L36-L68
chasestarr: added more fixes here. updated the top comment but duplicating the changes below.

- **adds innerRef prop to dropdown component** - to ensure that the dropdown element renders with the same width as the input element, I added a ref here so it can be inspected from the parent `Select` component. 
- **removes aria-activedescendant from menu** - it was being used incorrectly and threw errors in e2e tests. making a note to properly implement after this pr.
- **updates scrollItemIntoView util in menu** - this was causing 'jumping' because it would scroll the outer-most window as well as the select dropdown scroll. I noticed some pref degradation with selects over 200 items long. Will add another pr to possibly debounce the call.
- **fixes popover mounting prematurely** - when transitioning `isMounted` from `false` to `true`, it would call the popover unmount code unintentionally. this lead to a bug where page loads followed by fast clicks on the select component would choose an option in the dropdown menu.
- **makes some e2e tests more reliable** - select and datepicker tests were failing maybe 1 out of 5-6 runs. adds some more waits to ensure proper execution.
gergelyke: this is great! if I am correct, this closes https://github.com/uber-web/baseui/issues/813 too?
chasestarr: Yes - it should fix that

Patch:
diff --git a/src/menu/stateful-container.js b/src/menu/stateful-container.js
index f61de0e93..1a4846758 100644
--- a/src/menu/stateful-container.js
+++ b/src/menu/stateful-container.js
@@ -43,13 +43,17 @@ export default class MenuStatefulContainer extends React.Component<
     if (__BROWSER__) {
       // TODO(#185): perhaps only bind event listener on focus
       document.addEventListener('keydown', this.onKeyDown);
-      this.state.highlightedIndex > -1 &&
-        scrollItemIntoView({
-          node: this.refList[this.state.highlightedIndex],
-          parentNode: this.rootRef,
-          isFirst: this.state.highlightedIndex === 0,
-          isLast: this.state.highlightedIndex === this.props.items.length - 1,
-        });
+      if (
+        this.state.highlightedIndex > -1 &&
+        this.refList[this.state.highlightedIndex]
+      ) {
+        scrollItemIntoView(
+          this.refList[this.state.highlightedIndex].current,
+          this.rootRef.current,
+          this.state.highlightedIndex === 0,
+          this.state.highlightedIndex === this.props.items.length - 1,
+        );
+      }
     }
   }
 
@@ -105,12 +109,14 @@ export default class MenuStatefulContainer extends React.Component<
       highlightedIndex = Math.min(oldIndex + 1, items.length - 1);
       stateChangeType = STATE_CHANGE_TYPES.moveDown;
     }
-    scrollItemIntoView({
-      node: this.refList[highlightedIndex],
-      parentNode: this.rootRef,
-      isFirst: highlightedIndex === 0,
-      isLast: highlightedIndex === items.length - 1,
-    });
+    if (this.refList[highlightedIndex]) {
+      scrollItemIntoView(
+        this.refList[highlightedIndex].current,
+        this.rootRef.current,
+        highlightedIndex === 0,
+        highlightedIndex === items.length - 1,
+      );
+    }
     this.internalSetState(stateChangeType, {highlightedIndex});
   }
 
@@ -150,7 +156,6 @@ export default class MenuStatefulContainer extends React.Component<
       ref: itemRef,
       isHighlighted: highlightedIndex === index,
       onClick: onClickHandler,
-      'aria-activedescendant': highlightedIndex === index,
       ...getRequiredItemProps(item, index),
     };
   };
diff --git a/src/menu/utils.js b/src/menu/utils.js
index dd689aa4e..98a2561fc 100644
--- a/src/menu/utils.js
+++ b/src/menu/utils.js
@@ -29,40 +29,42 @@ export function getSharedProps(
   }, {});
 }
 
-/**
- * Helps scroll a list item into view when cycling through list via
- * keybindings and highlighted item is not in view.
- */
-export function scrollItemIntoView({
-  node,
-  parentNode,
-  isFirst,
-  isLast,
-}: {
-  node: React$ElementRef<*>,
-  parentNode: React$ElementRef<*>,
+// Helps scroll a list item into view when cycling through list via
+// keybindings and highlighted item is not in view.
+
+// Previously, this util had been using `scrollIntoView`. The issue with that method is that
+// it will not only scroll the parent scroll but also the window scroll bar - causing a jump.
+// propblem description https://lists.w3.org/Archives/Public/www-style/2014Jul/0386.html
+
+// CHASE: I've noticed some performance issues when testing this with many items in the list.
+// I imagine the browser can debounce the `node.scrollIntoView` calls. Callers of this function
+// will likely want to debounce themselves.
+export function scrollItemIntoView(
+  child: ?HTMLElement,
+  parent: HTMLElement,
   isFirst?: boolean,
   isLast?: boolean,
-}) {
-  const nodeDOM = node.current;
-  const parentNodeDOM = parentNode.current;
-  if (!nodeDOM) return;
-  const nodeRect = nodeDOM.getBoundingClientRect();
-  const parentNodeRect = parentNodeDOM.getBoundingClientRect();
+) {
+  if (!child) return;
+
+  const childRect = child.getBoundingClientRect();
+  const parentRect = parent.getBoundingClientRect();
+
   // while scrolling down, if element is below view
-  if (nodeRect.bottom > parentNodeRect.bottom) {
+  if (childRect.bottom > parentRect.bottom) {
     if (isLast) {
-      parentNodeDOM.scrollTop =
-        parentNodeDOM.scrollHeight - parentNodeRect.height;
+      parent.scrollTop = parent.scrollHeight - parentRect.height;
     } else {
-      nodeDOM.scrollIntoView(false);
+      const targetBottom = child.offsetTop + childRect.height;
+      parent.scrollTop = targetBottom - parentRect.height;
     }
+
     // while scrolling up, if element is above view
-  } else if (nodeRect.top < parentNodeRect.top) {
+  } else if (childRect.top < parentRect.top) {
     if (isFirst) {
-      parentNodeDOM.scrollTop = 0;
+      parent.scrollTop = 0;
     } else {
-      nodeDOM.scrollIntoView();
+      parent.scrollTop = child.offsetTop;
     }
   }
 }
diff --git a/src/popover/popover.js b/src/popover/popover.js
index 89b14af54..dcaad4a5a 100644
--- a/src/popover/popover.js
+++ b/src/popover/popover.js
@@ -48,6 +48,7 @@ class Popover extends React.Component<PopoverPropsT, PopoverPrivateStateT> {
   anchorRef = (React.createRef(): {current: *});
   popperRef = (React.createRef(): {current: *});
   arrowRef = (React.createRef(): {current: *});
+  popperHeight = 0;
   /* eslint-enable react/sort-comp */
 
   /**
@@ -66,21 +67,37 @@ class Popover extends React.Component<PopoverPropsT, PopoverPrivateStateT> {
     prevProps: PopoverPropsT,
     prevState: PopoverPrivateStateT,
   ) {
+    // Handles the case where popover content changes size and creates a gap between the anchor and
+    // the popover. Popper.js only schedules updates on resize and scroll events. In the case of
+    // the Select component, when options were filtered in the dropdown menu it creates a gap
+    // between it and the input element.
+    if (this.popperRef.current) {
+      const {height} = this.popperRef.current.getBoundingClientRect();
+      if (this.popperHeight !== height) {
+        this.popperHeight = height;
+        this.popper && this.popper.scheduleUpdate();
+      }
+    }
+
     if (
       this.props.isOpen !== prevProps.isOpen ||
       this.state.isMounted !== prevState.isMounted
     ) {
+      // Transition from closed to open.
       if (this.props.isOpen) {
         // Clear any existing timers (like previous animateOutCompleteTimer)
         this.clearTimers();
-        // Opening
         this.initializePopper();
         this.addDomEvents();
-      } else {
-        // Closing
+        return;
+      }
+
+      // Transition from open to closed.
+      if (!this.props.isOpen && prevProps.isOpen) {
         this.destroyPopover();
         this.removeDomEvents();
         this.animateOutTimer = setTimeout(this.animateOut, 20);
+        return;
       }
     }
   }
@@ -283,7 +300,7 @@ class Popover extends React.Component<PopoverPropsT, PopoverPrivateStateT> {
       return;
     }
     if (this.props.onClickOutside) {
-      this.props.onClickOutside();
+      this.props.onClickOutside(evt);
     }
   };
 
@@ -488,10 +505,7 @@ class Popover extends React.Component<PopoverPropsT, PopoverPrivateStateT> {
         (this.props.isOpen || this.state.isAnimating)
       ) {
         const mountNode = this.getMountNode();
-        rendered.push(
-          // $FlowFixMe
-          ReactDOM.createPortal(this.renderPopover(), mountNode),
-        );
+        rendered.push(ReactDOM.createPortal(this.renderPopover(), mountNode));
       }
     }
     return rendered;
diff --git a/src/popover/types.js b/src/popover/types.js
index b65445514..0d24485bf 100644
--- a/src/popover/types.js
+++ b/src/popover/types.js
@@ -89,7 +89,7 @@ export type PopoverPropsT = BasePopoverPropsT & {
   /** Handler for click events on trigger element. */
   onClick?: (e: Event) => void,
   /** Handler for clicks outside the anchor/popover elements. */
-  onClickOutside?: () => void,
+  onClickOutside?: (event: MouseEvent) => void,
   /** Handler for click events on trigger element. */
   onEsc?: () => void,
   /** Handler for 'Esc' keypress events */
diff --git a/src/select/dropdown.js b/src/select/dropdown.js
index f1cc1b82c..ae30e9e05 100644
--- a/src/select/dropdown.js
+++ b/src/select/dropdown.js
@@ -26,6 +26,7 @@ export default class SelectDropdown extends React.Component<DropdownPropsT> {
       size,
       searchable,
       type,
+      width,
     } = this.props;
     return {
       $error: error,
@@ -35,6 +36,7 @@ export default class SelectDropdown extends React.Component<DropdownPropsT> {
       $searchable: searchable,
       $size: size,
       $type: type,
+      $width: width,
     };
   }
   // eslint-disable-next-line flowtype/no-weak-types
@@ -99,6 +101,7 @@ export default class SelectDropdown extends React.Component<DropdownPropsT> {
     );
     return (
       <DropdownContainer
+        $ref={this.props.innerRef}
         role="listbox"
         {...this.getSharedProps()}
         {...dropdownContainerProps}
diff --git a/src/select/select.js b/src/select/select.js
index f58bae876..0ab680e14 100644
--- a/src/select/select.js
+++ b/src/select/select.js
@@ -6,6 +6,23 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
+
+import {getOverrides} from '../helpers/overrides.js';
+import {
+  Delete as DeleteIcon,
+  TriangleDown as TriangleDownIcon,
+  Search as SearchIconComponent,
+} from '../icon/index.js';
+import {LocaleContext} from '../locale/index.js';
+import type {LocaleT} from '../locale/types.js';
+import {Popover, PLACEMENT} from '../popover/index.js';
+import {Spinner} from '../spinner/index.js';
+
+import AutosizeInput from './autosize-input.js';
+import {TYPE, STATE_CHANGE_TYPE} from './constants.js';
+import defaultProps from './default-props.js';
+import SelectDropdown from './dropdown.js';
+import MultiValue from './multi-value.js';
 import {
   StyledRoot,
   StyledControlContainer,
@@ -18,26 +35,6 @@ import {
   getLoadingIconStyles,
   StyledSearchIcon,
 } from './styled-components.js';
-import AutosizeInput from './autosize-input.js';
-import Value from './value.js';
-import MultiValue from './multi-value.js';
-import SelectDropdown from './dropdown.js';
-import {
-  shouldShowValue,
-  shouldShowPlaceholder,
-  expandValue,
-} from './utils/index.js';
-import {TYPE, STATE_CHANGE_TYPE} from './constants.js';
-import {getOverrides} from '../helpers/overrides.js';
-import {Spinner} from '../spinner/index.js';
-import {
-  Delete as DeleteIcon,
-  TriangleDown as TriangleDownIcon,
-  Search as SearchIconComponent,
-} from '../icon/index.js';
-import defaultProps from './default-props.js';
-import {LocaleContext} from '../locale/index.js';
-
 import type {
   PropsT,
   SelectStateT,
@@ -45,17 +42,58 @@ import type {
   OptionT,
   ChangeActionT,
 } from './types.js';
-import type {LocaleT} from '../locale/types.js';
+import {
+  shouldShowValue,
+  shouldShowPlaceholder,
+  expandValue,
+} from './utils/index.js';
+import Value from './value.js';
+
+const isClick = event => event.type === 'click';
+const isLeftClick = event =>
+  event.button !== null && event.button !== undefined && event.button === 0;
+
+const containsNode = (parent, child) => {
+  if (__BROWSER__) {
+    return child instanceof Node && parent && parent.contains(child);
+  }
+};
+
+export function isInteractive(rootTarget: EventTarget, rootElement: Element) {
+  if (rootTarget instanceof Element) {
+    let target: ?Element = rootTarget;
+    while (target && target !== rootElement) {
+      const role = target.getAttribute('role');
+      if (role === 'button' || role === 'link') {
+        return true;
+      }
+      if (target.tagName) target = target.parentElement;
+    }
+  }
+
+  return false;
+}
 
 class Select extends React.Component<PropsT, SelectStateT> {
   static defaultProps = defaultProps;
 
-  wrapper: ?HTMLElement;
+  // anchor is a ref that refers to the outermost element rendered when the dropdown menu is not
+  // open. This is required so that we can check if clicks are on/off the anchor element.
+  anchor: {current: ?HTMLElement} = React.createRef();
+  // dropdown is a ref that refers to the popover element. This is required so that we can check if
+  // clicks are on/off the dropdown element.
+  dropdown: {current: ?HTMLElement} = React.createRef();
   input: ?HTMLInputElement;
+  // dragging is a flag to track whether a mobile device in currently scrolling versus clicking.
   dragging: boolean;
+  // focusAfterClear is a flag to indicate that the dropdowm menu should open after a selected
+  // option has been cleared.
   focusAfterClear: boolean;
+  // openAfterFocus is a flag to indicate that the dropdown menu should open when the component is
+  // focused. Developers have the option to disable initial clicks opening the dropdown menu. If not
+  // disabled, clicks will set this flag true. Upon focusing, look to this to see if the menu should
+  // be opened, or only focus.
   openAfterFocus: boolean;
-  isValueJustSelected: boolean;
 
   state = {
     inputValue: '',
@@ -69,168 +107,126 @@ class Select extends React.Component<PropsT, SelectStateT> {
       this.focus();
     }
   }
+
   componentDidUpdate(prevProps: PropsT, prevState: SelectStateT) {
-    if (prevState.isOpen !== this.state.isOpen) {
-      this.toggleTouchOutsideEvent(this.state.isOpen);
-      const handler = this.state.isOpen
-        ? this.props.onOpen
-        : this.props.onClose;
-      handler && handler();
-    }
-    if (prevState.isFocused !== this.state.isFocused && this.state.isFocused) {
-      if (__BROWSER__) {
+    if (__BROWSER__) {
+      if (prevState.isOpen !== this.state.isOpen) {
+        if (this.state.isOpen) {
+          this.props.onOpen && this.props.onOpen();
+          document.addEventListener('touchstart', this.handleTouchOutside);
+        } else {
+          this.props.onClose && this.props.onClose();
+          document.removeEventListener('touchstart', this.handleTouchOutside);
+        }
+      }
+
+      if (!prevState.isFocused && this.state.isFocused) {
         document.addEventListener('click', this.handleClickOutside);
       }
     }
   }
 
   componentWillUnmount() {
-    this.toggleTouchOutsideEvent(false);
-  }
-
-  toggleTouchOutsideEvent(enabled: boolean) {
     if (__BROWSER__) {
-      if (enabled) {
-        document.addEventListener('touchstart', this.handleTouchOutside);
-      } else {
-        document.removeEventListener('touchstart', this.handleTouchOutside);
-      }
+      document.removeEventListener('touchstart', this.handleTouchOutside);
     }
   }
 
-  handleTouchOutside = (event: Event) => {
-    // Handle touch outside on ios to dismiss menu
-    // $FlowFixMe
-    if (this.wrapper && !this.wrapper.contains(event.target)) {
-      this.closeMenu();
-    }
-  };
-
   focus() {
     if (!this.input) return;
     this.input.focus();
   }
 
-  handleTouchMove = () => {
-    // Set a flag that the view is being dragged
-    this.dragging = true;
-  };
-
-  handleTouchStart = () => {
-    // Set a flag that the view is not being dragged
-    this.dragging = false;
+  // Handle touch outside on mobile to dismiss menu, ensures that the
+  // touch target is not within the anchor DOM node.
+  handleTouchOutside = (event: TouchEvent) => {
+    if (!containsNode(this.anchor.current, event.target)) {
+      this.closeMenu();
+    }
   };
 
-  handleTouchEnd = (event: Event) => {
-    // Check if the view is being dragged. In this case
-    // we don't want to fire the click event (because the user only wants to scroll)
+  // Track dragging state to filter false-positive actions where a user
+  // intends to drag/scroll the page.
+  handleTouchMove = () => (this.dragging = true);
+  handleTouchStart = () => (this.dragging = false);
+  handleTouchEnd = (event: TouchEvent) => {
     if (this.dragging) return;
-    // Fire the mouse events
     this.handleClick(event);
   };
-
-  handleTouchEndClearValue = (event: Event) => {
-    // Check if the view is being dragged. In this case
-    // we don't want to fire the click event (because the user only wants to scroll)
+  handleTouchEndClearValue = (event: TouchEvent) => {
     if (this.dragging) return;
-    // Clear the value
     this.clearValue(event);
   };
 
-  handleClickOutside = (event: Event) => {
-    if (this.isValueJustSelected) {
-      this.isValueJustSelected = false;
+  handleClick = (event: MouseEvent | TouchEvent) => {
+    if (this.props.disabled || (!isClick(event) && !isLeftClick(event))) {
       return;
     }
-    const isFocused = this.state.isFocused || this.state.isPseudoFocused;
-    // $FlowFixMe
-    if (isFocused && this.wrapper && !this.wrapper.contains(event.target)) {
-      this.handleInputBlur(event);
-    }
-  };
 
-  handleClick = (event: Event) => {
-    // If the event was triggered by a mouse click and not the primary
-    // button, or if the component is disabled, ignore it
-    if (
-      this.props.disabled ||
-      // $FlowFixMe
-      (event.type === 'click' && event.button !== 0)
-    ) {
-      return;
-    }
-    // $FlowFixMe
-    if (event.target.tagName === 'INPUT') {
+    // Case comes up when text has been typed into the input field. If no text provided,
+    // the 'input' element will have essentially 0 width therefore will not be clickable.
+    // When click outside does not reset input, text provided will stay rendered after clicks away
+    // from the select component. Upon subsequent clicks on the provided text, open the dropdown
+    // menu, in addition to text edit operations.
+    if (event.target === this.input) {
+      // CHASE: not sure why this condition is here. I cannot replicate a situation where clicks
+      // on provided text break into here.
       if (!this.state.isFocused) {
         this.openAfterFocus = this.props.openOnClick;
         this.focus();
-      } else if (!this.state.isOpen) {
+        return;
+      }
+
+      if (!this.state.isOpen) {
         this.setState({
           isOpen: true,
           isPseudoFocused: false,
         });
+        return;
       }
+    }
+
+    // Ensures that interactive elements within the Select component do not trigger the outer click
+    // handler. For example, after an option is selected clicks on the 'clear' icon call here. We
+    // should ignore those events. This comes after case where click is on input element, so that
+    // those are handled on their own.
+    if (this.input && isInteractive(event.target, this.input)) {
       return;
     }
-    event.preventDefault();
-    // For the non-searchable select, toggle the menu
+
+    // For the simple case where clicking on the Select does not allow for providing
+    // text input to filter the dropdown options.
     if (!this.props.searchable) {
-      // This code means that if a select is searchable,
-      // onClick the options menu will not appear, only on
-      // subsequent click will it open.
       this.focus();
-      return this.setState({
-        isOpen: !this.state.isOpen,
-      });
+      this.setState(prev => ({isOpen: !prev.isOpen}));
+      return;
     }
+
+    // Cases below only apply to searchable Select component.
     if (this.state.isFocused) {
-      // On iOS, we can get into a state where we think the input is
-      // focused but it isn't really, since iOS ignores programmatic
-      // calls to input.focus() that weren't triggered by a click event.
-      // Call focus() again here to be safe.
+      // iOS ignores programmaitc calls to input.focus() that were not triggered by a click event.
+      // This component can get into a state where isFocused is true, but the DOM node is not
+      // focused. Call focus here again to ensure.
       this.focus();
-      let toOpen = !this.state.isOpen;
-      // clears the value so that the cursor will be at the end of input when the component re-renders
+
+      // Case comes up when click outside does not reset input - once text has been provided to
+      // the input, and the user closes the dropdown menu the provided text is maintained. After
+      // this, if the user focuses back into the select component then clicks on the component,
+      // the provided text highlights rather than position's the cursor at the end of the input.
       if (this.input) this.input.value = '';
-      if (this.focusAfterClear) {
-        toOpen = false;
-        this.focusAfterClear = false;
-      }
-      // if the input is focused, ensure the menu is open
-      this.setState({
-        isOpen: toOpen,
+
+      this.setState(prev => ({
+        isOpen: this.focusAfterClear ? false : !prev.isOpen,
         isPseudoFocused: false,
-      });
+      }));
+
+      this.focusAfterClear = false;
     } else {
-      // otherwise, focus the input and open the menu
       this.openAfterFocus = this.props.openOnClick;
       this.focus();
     }
   };
 
-  handleClickOnArrow = (event: Event) => {
-    // if the event was triggered by a mouse click and not the primary
-    // button, or if the component is disabled, ignore it.
-    if (
-      this.props.disabled ||
-      // $FlowFixMe
-      (event.type === 'click' && event.button !== 0)
-    ) {
-      return;
-    }
-    if (this.state.isOpen) {
-      // prevent default event handlers
-      event.stopPropagation();
-      event.preventDefault();
-      this.closeMenu();
-    } else {
-      // If the menu isn't open, let the event bubble to the main handleClick
-      this.setState({
-        isOpen: true,
-      });
-    }
-  };
-
   closeMenu() {
     if (this.props.onCloseResetsInput) {
       this.setState({
@@ -248,15 +244,12 @@ class Select extends React.Component<PropsT, SelectStateT> {
 
   handleInputFocus = (event: SyntheticEvent<HTMLElement>) => {
     if (this.props.disabled) return;
+    if (this.props.onFocus) this.props.onFocus(event);
 
     let toOpen = this.state.isOpen || this.openAfterFocus;
-    //if focus happens after clear values, don't open dropdown yet.
+    // if focus happens after clear values, don't open dropdown yet.
     toOpen = this.focusAfterClear ? false : toOpen;
 
-    if (this.props.onFocus) {
-      this.props.onFocus(event);
-    }
-
     this.setState({
       isFocused: true,
       isOpen: !!toOpen,
@@ -266,25 +259,41 @@ class Select extends React.Component<PropsT, SelectStateT> {
     this.openAfterFocus = false;
   };
 
-  handleInputBlur = (event: Event) => {
+  handleBlur = (event: Event) => {
+    if (containsNode(this.anchor.current, event.target)) {
+      return;
+    }
+
     if (this.props.onBlur) {
       this.props.onBlur(event);
     }
-    const onBlurredState = {
+
+    const onBlurredState: $Shape<SelectStateT> = {
       isFocused: false,
       isOpen: false,
       isPseudoFocused: false,
     };
+
     if (this.props.onBlurResetsInput) {
-      // $FlowFixMe
       onBlurredState.inputValue = '';
     }
+
     this.setState(onBlurredState);
+
     if (__BROWSER__) {
       document.removeEventListener('click', this.handleClickOutside);
     }
   };
 
+  handleClickOutside = (event: MouseEvent) => {
+    if (containsNode(this.dropdown.current, event.target)) return;
+
+    const isFocused = this.state.isFocused || this.state.isPseudoFocused;
+    if (isFocused && !containsNode(this.anchor.current, event.target)) {
+      this.handleBlur(event);
+    }
+  };
+
   handleInputChange = (event: SyntheticInputEvent<HTMLInputElement>) => {
     let newInputValue = event.target.value;
     this.setState({
@@ -328,6 +337,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
           event.stopPropagation();
         } else if (this.props.clearable && this.props.escapeClearsValue) {
           this.clearValue(event);
+          this.setState({isFocused: false, isPseudoFocused: false});
           event.stopPropagation();
         }
         break;
@@ -430,9 +440,6 @@ class Select extends React.Component<PropsT, SelectStateT> {
   }
 
   selectValue = ({item}: {item: OptionT}) => {
-    // NOTE: we check this is in handleClickOutside to not count
-    // menu clicks as outside clicks
-    this.isValueJustSelected = true;
     if (item.disabled) {
       return;
     }
@@ -502,32 +509,22 @@ class Select extends React.Component<PropsT, SelectStateT> {
     this.focus();
   };
 
-  clearValue = (event: Event) => {
-    // if the event was triggered by a mouse click and not the primary
-    // button, ignore it.
-    // $FlowFixMe
-    if (event && event.type === 'click' && event.button !== 0) {
-      return;
-    }
-    event.preventDefault();
-    this.setValue(this.getResetValue(), null, STATE_CHANGE_TYPE.clear);
-    this.setState(
-      {
-        inputValue: '',
-        isOpen: false,
-      },
-      this.focus,
+  clearValue = (event: KeyboardEvent | MouseEvent | TouchEvent) => {
+    if (isClick(event) && !isLeftClick(event)) return;
+
+    const resetValue = this.props.value.filter(
+      item => item.clearableValue === false,
     );
+    this.setValue(resetValue, null, STATE_CHANGE_TYPE.clear);
+    this.setState({
+      inputValue: '',
+      isOpen: false,
+    });
+
+    this.focus();
     this.focusAfterClear = true;
   };
 
-  getResetValue(): ValueT {
-    // Clear all except not clearable values
-    return this.props.value.filter(item => {
-      return item.clearableValue === false;
-    });
-  }
-
   renderLoading() {
     if (!this.props.isLoading) return;
     const sharedProps = this.getSharedProps();
@@ -578,9 +575,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
           <MultiValue
             value={value}
             key={`value-${i}-${value[this.props.valueKey]}`}
-            removeValue={() => {
-              this.removeValue(value);
-            }}
+            removeValue={() => this.removeValue(value)}
             disabled={disabled}
             overrides={{MultiValue: overrides.MultiValue}}
             {...sharedProps}
@@ -626,6 +621,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
           aria-label={this.props['aria-label']}
           aria-labelledby={this.props['aria-labelledby']}
           aria-required={this.props.required || null}
+          onBlur={this.handleBlur}
           onFocus={this.handleInputFocus}
           $ref={ref => (this.input = ref)}
           tabIndex={0}
@@ -634,6 +630,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
         />
       );
     }
+
     return (
       <InputContainer {...sharedProps} {...inputContainerProps}>
         <AutosizeInput
@@ -647,6 +644,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
           aria-required={this.props.required || null}
           disabled={this.props.disabled || null}
           inputRef={ref => (this.input = ref)}
+          onBlur={this.handleBlur}
           onChange={this.handleInputChange}
           onFocus={this.handleInputFocus}
           overrides={{Input: overrides.Input}}
@@ -686,6 +684,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
         onTouchMove={this.handleTouchMove}
         onTouchStart={this.handleTouchStart}
         overrides={{Svg: StyledClearIcon}}
+        role="button"
         {...sharedProps}
         {...clearIconProps}
       />
@@ -706,7 +705,6 @@ class Select extends React.Component<PropsT, SelectStateT> {
       <SelectArrow
         size={16}
         title={'open'}
-        onClick={this.handleClickOnArrow}
         overrides={{Svg: StyledSelectArrow}}
         {...sharedProps}
         {...selectArrowProps}
@@ -728,7 +726,6 @@ class Select extends React.Component<PropsT, SelectStateT> {
       <SearchIcon
         size={16}
         title={'search'}
-        onClick={this.handleClickOnArrow}
         overrides={{Svg: StyledSearchIcon}}
         {...sharedProps}
         {...searchIconProps}
@@ -749,53 +746,6 @@ class Select extends React.Component<PropsT, SelectStateT> {
     }
   }
 
-  renderMenu(options: ValueT, valueArray: ValueT, locale: LocaleT) {
-    const {
-      error,
-      getOptionLabel,
-      isLoading,
-      labelKey,
-      maxDropdownHeight,
-      multi,
-      noResultsMsg,
-      overrides,
-      required,
-      searchable,
-      size,
-      type,
-      valueKey,
-    } = this.props;
-    const dropdownProps = {
-      error,
-      getOptionLabel: getOptionLabel || this.getOptionLabel,
-      isLoading,
-      labelKey,
-      maxDropdownHeight,
-      multi,
-      onItemSelect: this.selectValue,
-      options,
-      overrides,
-      required,
-      searchable,
-      size,
-      type,
-      value: valueArray,
-      valueKey,
-    };
-    if (options && options.length) {
-      return <SelectDropdown {...dropdownProps} />;
-    } else if (noResultsMsg) {
-      const noResults = {
-        [valueKey]: 'NO_RESULTS_FOUND',
-        [labelKey]: noResultsMsg || locale.select.noResultsMsg,
-        disabled: true,
-      };
-      return <SelectDropdown {...dropdownProps} options={[noResults]} />;
-    } else {
-      return null;
-    }
-  }
-
   getSharedProps() {
     const {
       clearable,
@@ -856,36 +806,90 @@ class Select extends React.Component<PropsT, SelectStateT> {
       isOpen = false;
     }
     sharedProps.$isOpen = isOpen;
+
     return (
       <LocaleContext.Consumer>
         {locale => (
-          <Root
-            $ref={ref => (this.wrapper = ref)}
-            {...sharedProps}
-            {...rootProps}
+          <Popover
+            // Popover does not provide ability to forward refs through, and if we were to simply
+            // apply the ref to the Root component below it would be overwritten before the popover
+            // renders it. Using this strategy, we will get a ref to the popover, then reuse its
+            // anchorRef so we can check if clicks are on the select component or not.
+            ref={ref => {
+              if (!ref) return;
+              this.anchor = ref.anchorRef;
+            }}
+            isOpen={isOpen}
+            content={() => {
+              const dropdownProps = {
+                error: this.props.error,
+                getOptionLabel:
+                  this.props.getOptionLabel || this.getOptionLabel,
+                isLoading: this.props.isLoading,
+                labelKey: this.props.labelKey,
+                maxDropdownHeight: this.props.maxDropdownHeight,
+                multi,
+                onItemSelect: this.selectValue,
+                options,
+                overrides,
+                required: this.props.required,
+                searchable: this.props.searchable,
+                size: this.props.size,
+                type,
+                value: valueArray,
+                valueKey: this.props.valueKey,
+                width: this.anchor.current
+                  ? this.anchor.current.clientWidth
+                  : null,
+              };
+
+              if (options && options.length) {
+                return (
+                  <SelectDropdown innerRef={this.dropdown} {...dropdownProps} />
+                );
+              } else if (this.props.noResultsMsg) {
+                const noResults = {
+                  [this.props.valueKey]: 'NO_RESULTS_FOUND',
+                  [this.props.labelKey]:
+                    this.props.noResultsMsg || locale.select.noResultsMsg,
+                  disabled: true,
+                };
+                return (
+                  <SelectDropdown
+                    innerRef={this.dropdown}
+                    {...dropdownProps}
+                    options={[noResults]}
+                  />
+                );
+              } else {
+                return null;
+              }
+            }}
+            placement={PLACEMENT.bottom}
           >
-            <ControlContainer
-              onKeyDown={this.handleKeyDown}
-              onClick={this.handleClick}
-              onTouchEnd={this.handleTouchEnd}
-              onTouchMove={this.handleTouchMove}
-              onTouchStart={this.handleTouchStart}
-              {...sharedProps}
-              {...controlContainerProps}
-            >
-              {type === TYPE.search ? this.renderSearch() : null}
-              <ValueContainer {...sharedProps} {...valueContainerProps}>
-                {this.renderValue(valueArray, isOpen, locale)}
-                {this.renderInput()}
-              </ValueContainer>
-              <IconsContainer {...sharedProps} {...iconsContainerProps}>
-                {this.renderLoading()}
-                {this.renderClear()}
-                {type === TYPE.select ? this.renderArrow() : null}
-              </IconsContainer>
-            </ControlContainer>
-            {isOpen ? this.renderMenu(options, valueArray, locale) : null}
-          </Root>
+            <Root {...sharedProps} {...rootProps}>
+              <ControlContainer
+                onKeyDown={this.handleKeyDown}
+                onClick={this.handleClick}
+                onTouchEnd={this.handleTouchEnd}
+                onTouchMove={this.handleTouchMove}
+                onTouchStart={this.handleTouchStart}
+                {...sharedProps}
+                {...controlContainerProps}
+              >
+                {type === TYPE.search ? this.renderSearch() : null}
+                <ValueContainer {...sharedProps} {...valueContainerProps}>
+                  {this.renderValue(valueArray, isOpen, locale)}
+                  {this.renderInput()}
+                </ValueContainer>
+                <IconsContainer {...sharedProps} {...iconsContainerProps}>
+                  {this.renderLoading()}
+                  {this.renderClear()}
+                  {type === TYPE.select ? this.renderArrow() : null}
+                </IconsContainer>
+              </ControlContainer>
+            </Root>
+          </Popover>
         )}
       </LocaleContext.Consumer>
     );
diff --git a/src/select/styled-components.js b/src/select/styled-components.js
index ebe7ba010..60cf3d189 100644
--- a/src/select/styled-components.js
+++ b/src/select/styled-components.js
@@ -63,19 +63,8 @@ function getControlPadding(props, emptyValue) {
 }
 
 export const StyledDropdownContainer = styled('div', props => {
-  const {
-    $theme: {sizing},
-  } = props;
   return {
-    boxSizing: 'border-box',
-    position: 'absolute',
-    width: '100%',
-    zIndex: 1,
-    marginTop: sizing.scale300,
-    paddingTop: '0',
-    paddingBottom: '0',
-    paddingLeft: sizing.scale300,
-    paddingRight: sizing.scale300,
+    width: `${props.$width}px`,
   };
 });
 
diff --git a/src/select/types.js b/src/select/types.js
index 692ab55c5..af39a8a08 100644
--- a/src/select/types.js
+++ b/src/select/types.js
@@ -194,6 +194,7 @@ export type DropdownPropsT = {
       $isHighlighted: boolean,
     },
   }) => React.Node,
+  innerRef: {current: ?HTMLElement},
   isLoading: boolean,
   labelKey: string,
   maxDropdownHeight: string,
@@ -207,6 +208,7 @@ export type DropdownPropsT = {
   type: TypeT,
   value: ValueT,
   valueKey: string,
+  width: ?number,
 };
 
 export type AutosizeInputOverridesT = {


Test patch:
diff --git a/src/datepicker/__tests__/datepicker.e2e.js b/src/datepicker/__tests__/datepicker.e2e.js
index 2fb086f1f..af6dee09e 100644
--- a/src/datepicker/__tests__/datepicker.e2e.js
+++ b/src/datepicker/__tests__/datepicker.e2e.js
@@ -155,8 +155,7 @@ describe('Datepicker', () => {
     await page.waitFor(selectors.calendar);
     await page.waitFor(selectors.day);
     await page.click(selectors.yearSelect);
-    const dropdown = `${selectors.yearSelect} ${selectors.selectDropdown}`;
-    await page.waitFor(dropdown);
+    await page.waitFor(selectors.selectDropdown);
 
     await page.$$eval('ul[role="listbox"] li', items => {
       const option = items.find(item => {
@@ -165,7 +164,7 @@ describe('Datepicker', () => {
       option.click();
       return option;
     });
-    await page.waitFor(dropdown, {hidden: true});
+
     await page.waitFor(selectors.calendar);
     await page.waitFor(selectors.day5);
   });
@@ -177,8 +176,7 @@ describe('Datepicker', () => {
     await page.waitFor(selectors.calendar);
     await page.waitFor(selectors.day);
     await page.click(selectors.monthSelect);
-    const dropdown = `${selectors.monthSelect} ${selectors.selectDropdown}`;
-    await page.waitFor(dropdown);
+    await page.waitFor(selectors.selectDropdown);
 
     await page.$$eval('ul[role="listbox"] li', items => {
       const option = items.find(item => {
@@ -187,7 +185,7 @@ describe('Datepicker', () => {
       option.click();
       return option;
     });
-    await page.waitFor(dropdown, {hidden: true});
+
     await page.waitFor(selectors.calendar);
     await page.waitFor(selectors.day6);
   });
diff --git a/src/menu/__tests__/menu-stateful.scenario.js b/src/menu/__tests__/menu-stateful.scenario.js
new file mode 100644
index 000000000..f7ec7cbca
--- /dev/null
+++ b/src/menu/__tests__/menu-stateful.scenario.js
@@ -0,0 +1,47 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+import React from 'react';
+
+import {StatefulMenu} from '../index.js';
+
+export const name = 'menu-stateful';
+
+const ITEMS = [
+  {label: 'Item One'},
+  {label: 'Item Two'},
+  {disabled: true, label: 'Item Three'},
+  {label: 'Item Four'},
+  {label: 'Item Five'},
+  {label: 'Item Six'},
+  {label: 'Item Seven'},
+  {label: 'Item Eight'},
+  {label: 'Item Nine'},
+  {label: 'Item Ten'},
+  {label: 'Item Eleven'},
+  {label: 'Item Twelve'},
+];
+
+export const component = () => (
+  <StatefulMenu
+    items={ITEMS}
+    overrides={{
+      List: {
+        style: {
+          height: '100px',
+          width: '350px',
+        },
+      },
+      Option: {
+        props: {
+          getItemLabel: item => item.label,
+        },
+      },
+    }}
+  />
+);
diff --git a/src/menu/__tests__/stateful-container.test.js b/src/menu/__tests__/stateful-container.test.js
index c621f2af9..f82852939 100644
--- a/src/menu/__tests__/stateful-container.test.js
+++ b/src/menu/__tests__/stateful-container.test.js
@@ -94,7 +94,6 @@ describe('Menu StatefulContainer', () => {
       ref: React.createRef(),
       isHighlighted: false,
       onClick: props.onClick,
-      'aria-activedescendant': false,
     });
     props.onClick();
     expect(mockItemSelect.mock.calls[0][0]).toEqual({
@@ -110,7 +109,6 @@ describe('Menu StatefulContainer', () => {
       disabled: true,
       ref: React.createRef(),
       isHighlighted: false,
-      'aria-activedescendant': false,
     });
   });
 
@@ -125,7 +123,6 @@ describe('Menu StatefulContainer', () => {
       ref: React.createRef(),
       isHighlighted: true,
       onClick: props.onClick,
-      'aria-activedescendant': true,
     });
   });
 
@@ -146,13 +143,15 @@ describe('Menu StatefulContainer', () => {
       {highlightedIndex: 0},
       {highlightedIndex: -1},
     ]);
+    const parent = React.createRef();
+    const child = React.createRef();
     // $FlowFixMe
-    expect(scrollItemIntoView.mock.calls[0][0]).toEqual({
-      node: React.createRef(),
-      parentNode: React.createRef(),
-      isFirst: true,
-      isLast: false,
-    });
+    expect(scrollItemIntoView.mock.calls[0][0]).toEqual(
+      child.current,
+      parent.current,
+      true,
+      false,
+    );
 
     component.instance().onKeyDown({
       key: KEY_STRINGS.ArrowDown,
diff --git a/src/menu/__tests__/utils.test.js b/src/menu/__tests__/utils.test.js
index e84d5ba92..ff7cd9e9b 100644
--- a/src/menu/__tests__/utils.test.js
+++ b/src/menu/__tests__/utils.test.js
@@ -23,101 +23,152 @@ describe('Menu Utils - getSharedProps', () => {
   });
 });
 
-describe('Menu Utils - scrollItemIntoView', () => {
-  test('scrolling down', () => {
-    const mockNode = {
-      current: {
-        getBoundingClientRect: jest
-          .fn()
-          .mockReturnValue({bottom: 100})
-          .mockReturnValueOnce({bottom: 0}),
-        scrollIntoView: jest.fn(),
-      },
+describe.only('Menu Utils - scrollItemIntoView', () => {
+  // |=======================| <-- top of parent window (at 0)
+  // | |-------------------| |
+  // | |       50 ht       | |
+  // | |-------------------| |
+  // |=======================| <-- bottom of parent window (at 50)
+  // | |-------------------| |
+  // | |       50 ht       | | <-- child to scroll into view
+  // | |-------------------| |
+  // |_______________________| <-- bottom of parent scroll height (at 100)
+
+  it('scrolls down to second item', () => {
+    const parent = {
+      getBoundingClientRect: jest.fn().mockReturnValue({
+        height: 50,
+        bottom: 50,
+        top: 0,
+      }),
+      scrollHeight: 100,
+      scrollTop: 0,
     };
-    const mockParentNode = {
-      current: {
-        getBoundingClientRect: jest.fn().mockReturnValue({
-          bottom: 50,
-          height: 50,
-        }),
-        scrollHeight: 50,
-        scrollTop: 100,
-      },
+
+    const child = {
+      getBoundingClientRect: jest.fn().mockReturnValue({
+        height: 50,
+        bottom: 100,
+        top: 50,
+      }),
+      offsetTop: 50,
     };
 
-    // First call
-    Utils.scrollItemIntoView({
-      // $FlowFixMe
-      node: mockNode,
-      // $FlowFixMe
-      parentNode: mockParentNode,
-    });
-    expect(mockNode.current.scrollIntoView).not.toHaveBeenCalled();
-
-    // Subsequent calls
-    Utils.scrollItemIntoView({
-      // $FlowFixMe
-      node: mockNode,
-      // $FlowFixMe
-      parentNode: mockParentNode,
-    });
-    expect(mockNode.current.scrollIntoView).toHaveBeenCalledWith(false);
-
-    // Last item
-    Utils.scrollItemIntoView({
-      // $FlowFixMe
-      node: mockNode,
-      // $FlowFixMe
-      parentNode: mockParentNode,
-      isLast: true,
-    });
-    expect(mockParentNode.current.scrollTop).toBe(0);
+    // $FlowFixMe <-- this is because we are not testing with full elements.
+    Utils.scrollItemIntoView(child, parent);
+    expect(parent.scrollTop).toBe(50);
   });
 
-  test('scrolling up', () => {
-    const mockNode = {
-      current: {
-        getBoundingClientRect: jest
-          .fn()
-          .mockReturnValue({top: 0})
-          .mockReturnValueOnce({top: 100}),
-        scrollIntoView: jest.fn(),
-      },
+  // -------------------------
+  // | |-------------------| |
+  // | |       50 ht       | |
+  // | |-------------------| |
+  // |=======================| <-- top of parent window (at 50)
+  // | |-------------------| |
+  // | |       50 ht       | |
+  // | |-------------------| |
+  // |=======================| <-- bottom of parent window (at 100)
+  // | |-------------------| |
+  // | |       50 ht       | | <-- child to scroll into view
+  // | |-------------------| |
+  // |_______________________| <-- bottom of parent scroll height (at 150)
+
+  it('scrolls down to subsequent item', () => {
+    const parent = {
+      getBoundingClientRect: jest.fn().mockReturnValue({
+        height: 50,
+        bottom: 100,
+        top: 50,
+      }),
+      scrollHeight: 150,
+      scrollTop: 50,
     };
-    const mockParentNode = {
-      current: {
-        getBoundingClientRect: jest.fn().mockReturnValue({top: 50}),
-        scrollTop: 100,
-      },
+
+    const child = {
+      getBoundingClientRect: jest.fn().mockReturnValue({
+        height: 50,
+        bottom: 150,
+        top: 100,
+      }),
+      offsetTop: 100,
     };
 
-    // First call
-    Utils.scrollItemIntoView({
-      // $FlowFixMe
-      node: mockNode,
-      // $FlowFixMe
-      parentNode: mockParentNode,
-    });
-    expect(mockNode.current.scrollIntoView).not.toHaveBeenCalled();
-
-    // Subsequent calls
-    Utils.scrollItemIntoView({
-      // $FlowFixMe
-      node: mockNode,
-      // $FlowFixMe
-      parentNode: mockParentNode,
-    });
-    expect(mockNode.current.scrollIntoView).toHaveBeenCalled();
-    expect(mockNode.current.scrollIntoView.mock.calls[0][0]).toBe(undefined);
-
-    // First item
-    Utils.scrollItemIntoView({
-      // $FlowFixMe
-      node: mockNode,
-      // $FlowFixMe
-      parentNode: mockParentNode,
-      isFirst: true,
-    });
-    expect(mockParentNode.current.scrollTop).toBe(0);
+    // $FlowFixMe <-- this is because we are not testing with full elements.
+    Utils.scrollItemIntoView(child, parent);
+    expect(parent.scrollTop).toBe(100);
+  });
+
+  // -------------------------
+  // | |-------------------| |
+  // | |       50 ht       | | <-- child to scroll into view
+  // | |-------------------| |
+  // |=======================| <-- top of parent window (at 50)
+  // | |-------------------| |
+  // | |       50 ht       | |
+  // | |-------------------| |
+  // |=======================| <-- bottom of parent window (at 100)
+
+  it('scrolls up to fist item', () => {
+    const parent = {
+      getBoundingClientRect: jest.fn().mockReturnValue({
+        top: 50,
+        height: 50,
+        bottom: 100,
+      }),
+      scrollHeight: 100,
+      scrollTop: 50,
+    };
+
+    const child = {
+      getBoundingClientRect: jest.fn().mockReturnValue({
+        height: 50,
+        bottom: 50,
+        top: 0,
+      }),
+      offsetTop: 0,
+    };
+
+    // $FlowFixMe <-- this is because we are not testing with full elements.
+    Utils.scrollItemIntoView(child, parent);
+    expect(parent.scrollTop).toBe(0);
+  });
+
+  // -------------------------
+  // | |-------------------| |
+  // | |       50 ht       | | <-- child to scroll into view
+  // | |-------------------| |
+  // |=======================| <-- top of parent window (at 50)
+  // | |-------------------| |
+  // | |       50 ht       | |
+  // | |-------------------| |
+  // |=======================| <-- bottom of parent window (at 100)
+  // | |-------------------| |
+  // | |       50 ht       | |
+  // | |-------------------| |
+  // |_______________________| <-- bottom of parent scroll height (at 150)
+
+  it('scrolls up to subsequent item', () => {
+    const parent = {
+      getBoundingClientRect: jest.fn().mockReturnValue({
+        top: 50,
+        height: 50,
+        bottom: 100,
+      }),
+      scrollHeight: 150,
+      scrollTop: 50,
+    };
+
+    const child = {
+      getBoundingClientRect: jest.fn().mockReturnValue({
+        height: 50,
+        bottom: 50,
+        top: 0,
+      }),
+      offsetTop: 0,
+    };
+
+    // $FlowFixMe <-- this is because we are not testing with full elements.
+    Utils.scrollItemIntoView(child, parent);
+    expect(parent.scrollTop).toBe(0);
   });
 });
diff --git a/src/select/__tests__/__snapshots__/dropdown.test.js.snap b/src/select/__tests__/__snapshots__/dropdown.test.js.snap
index 88e727092..3e4d9f027 100644
--- a/src/select/__tests__/__snapshots__/dropdown.test.js.snap
+++ b/src/select/__tests__/__snapshots__/dropdown.test.js.snap
@@ -12,6 +12,7 @@ Object {
   "$selected": true,
   "$size": "default",
   "$type": "select",
+  "$width": 100,
   "aria-readonly": undefined,
   "aria-selected": true,
   "children": <span>
@@ -32,6 +33,7 @@ Object {
   "$selected": false,
   "$size": "default",
   "$type": "select",
+  "$width": 100,
   "aria-readonly": undefined,
   "aria-selected": false,
   "children": <span>
diff --git a/src/select/__tests__/__snapshots__/select.test.js.snap b/src/select/__tests__/__snapshots__/select.test.js.snap
index 694f9c18e..bcbfa682b 100644
--- a/src/select/__tests__/__snapshots__/select.test.js.snap
+++ b/src/select/__tests__/__snapshots__/select.test.js.snap
@@ -56,74 +56,77 @@ exports[`Select component renders component in search mode and false for multipl
   value={Array []}
   valueKey="id"
 >
-  <MockStyledComponent
-    $clearable={true}
-    $disabled={false}
-    $error={false}
-    $isFocused={false}
-    $isLoading={false}
-    $isOpen={false}
-    $isPseudoFocused={false}
-    $multi={false}
-    $ref={[Function]}
-    $required={false}
-    $searchable={true}
-    $size="default"
-    $type="search"
+  <Popover
+    accessibilityType="menu"
+    content={[Function]}
+    ignoreBoundary={false}
+    isOpen={false}
+    onMouseEnterDelay={200}
+    onMouseLeaveDelay={200}
+    overrides={Object {}}
+    placement="bottom"
+    showArrow={false}
+    triggerType="click"
   >
-    <div
-      styled-component="true"
+    <MockStyledComponent
+      $clearable={true}
+      $disabled={false}
+      $error={false}
+      $isFocused={false}
+      $isLoading={false}
+      $isOpen={false}
+      $isPseudoFocused={false}
+      $multi={false}
+      $ref={
+        Object {
+          "current": null,
+        }
+      }
+      $required={false}
+      $searchable={true}
+      $size="default"
+      $type="search"
+      aria-controls={null}
+      aria-expanded="false"
+      aria-haspopup="true"
+      key="popover-anchor"
+      onClick={[Function]}
     >
-      <MockStyledComponent
-        $clearable={true}
-        $disabled={false}
-        $error={false}
-        $isFocused={false}
-        $isLoading={false}
-        $isOpen={false}
-        $isPseudoFocused={false}
-        $multi={false}
-        $required={false}
-        $searchable={true}
-        $size="default"
-        $type="search"
+      <div
+        aria-controls={null}
+        aria-expanded="false"
+        aria-haspopup="true"
         onClick={[Function]}
-        onKeyDown={[Function]}
-        onTouchEnd={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
+        styled-component="true"
       >
-        <div
+        <MockStyledComponent
+          $clearable={true}
+          $disabled={false}
+          $error={false}
+          $isFocused={false}
+          $isLoading={false}
+          $isOpen={false}
+          $isPseudoFocused={false}
+          $multi={false}
+          $required={false}
+          $searchable={true}
+          $size="default"
+          $type="search"
           onClick={[Function]}
           onKeyDown={[Function]}
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          styled-component="true"
         >
-          <Search
-            $clearable={true}
-            $disabled={false}
-            $error={false}
-            $isFocused={false}
-            $isLoading={false}
-            $isOpen={false}
-            $isPseudoFocused={false}
-            $multi={false}
-            $required={false}
-            $searchable={true}
-            $size="default"
-            $type="search"
+          <div
             onClick={[Function]}
-            overrides={
-              Object {
-                "Svg": [Function],
-              }
-            }
-            size={16}
-            title="search"
+            onKeyDown={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+            styled-component="true"
           >
-            <Icon
+            <Search
               $clearable={true}
               $disabled={false}
               $error={false}
@@ -136,7 +139,6 @@ exports[`Select component renders component in search mode and false for multipl
               $searchable={true}
               $size="default"
               $type="search"
-              onClick={[Function]}
               overrides={
                 Object {
                   "Svg": [Function],
@@ -144,9 +146,8 @@ exports[`Select component renders component in search mode and false for multipl
               }
               size={16}
               title="search"
-              viewBox="0 0 24 24"
             >
-              <MockStyledComponent
+              <Icon
                 $clearable={true}
                 $disabled={false}
                 $error={false}
@@ -157,117 +158,103 @@ exports[`Select component renders component in search mode and false for multipl
                 $multi={false}
                 $required={false}
                 $searchable={true}
-                $size={16}
+                $size="default"
                 $type="search"
-                onClick={[Function]}
+                overrides={
+                  Object {
+                    "Svg": [Function],
+                  }
+                }
+                size={16}
+                title="search"
                 viewBox="0 0 24 24"
               >
-                <svg
-                  onClick={[Function]}
-                  styled-component="true"
+                <MockStyledComponent
+                  $clearable={true}
+                  $disabled={false}
+                  $error={false}
+                  $isFocused={false}
+                  $isLoading={false}
+                  $isOpen={false}
+                  $isPseudoFocused={false}
+                  $multi={false}
+                  $required={false}
+                  $searchable={true}
+                  $size={16}
+                  $type="search"
                   viewBox="0 0 24 24"
                 >
-                  <title>
-                    search
-                  </title>
-                  <path
-                    clipRule="evenodd"
-                    d="M11 6C8.79086 6 7 7.79086 7 10C7 12.2091 8.79086 14 11 14C13.2091 14 15 12.2091 15 10C15 7.79086 13.2091 6 11 6ZM5 10C5 6.68629 7.68629 4 11 4C14.3137 4 17 6.68629 17 10C17 11.2958 16.5892 12.4957 15.8907 13.4765L19.7071 17.2929C20.0976 17.6834 20.0976 18.3166 19.7071 18.7071C19.3166 19.0976 18.6834 19.0976 18.2929 18.7071L14.4765 14.8907C13.4957 15.5892 12.2958 16 11 16C7.68629 16 5 13.3137 5 10Z"
-                    fillRule="evenodd"
-                  />
-                </svg>
-              </MockStyledComponent>
-            </Icon>
-          </Search>
-          <MockStyledComponent
-            $clearable={true}
-            $disabled={false}
-            $error={false}
-            $isFocused={false}
-            $isLoading={false}
-            $isOpen={false}
-            $isPseudoFocused={false}
-            $multi={false}
-            $required={false}
-            $searchable={true}
-            $size="default"
-            $type="search"
-          >
-            <span
-              styled-component="true"
+                  <svg
+                    styled-component="true"
+                    viewBox="0 0 24 24"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      clipRule="evenodd"
+                      d="M11 6C8.79086 6 7 7.79086 7 10C7 12.2091 8.79086 14 11 14C13.2091 14 15 12.2091 15 10C15 7.79086 13.2091 6 11 6ZM5 10C5 6.68629 7.68629 4 11 4C14.3137 4 17 6.68629 17 10C17 11.2958 16.5892 12.4957 15.8907 13.4765L19.7071 17.2929C20.0976 17.6834 20.0976 18.3166 19.7071 18.7071C19.3166 19.0976 18.6834 19.0976 18.2929 18.7071L14.4765 14.8907C13.4957 15.5892 12.2958 16 11 16C7.68629 16 5 13.3137 5 10Z"
+                      fillRule="evenodd"
+                    />
+                  </svg>
+                </MockStyledComponent>
+              </Icon>
+            </Search>
+            <MockStyledComponent
+              $clearable={true}
+              $disabled={false}
+              $error={false}
+              $isFocused={false}
+              $isLoading={false}
+              $isOpen={false}
+              $isPseudoFocused={false}
+              $multi={false}
+              $required={false}
+              $searchable={true}
+              $size="default"
+              $type="search"
             >
-              <MockStyledComponent
-                $clearable={true}
-                $disabled={false}
-                $error={false}
-                $isFocused={false}
-                $isLoading={false}
-                $isOpen={false}
-                $isPseudoFocused={false}
-                $multi={false}
-                $required={false}
-                $searchable={true}
-                $size="default"
-                $type="search"
+              <span
+                styled-component="true"
               >
-                <div
-                  styled-component="true"
+                <MockStyledComponent
+                  $clearable={true}
+                  $disabled={false}
+                  $error={false}
+                  $isFocused={false}
+                  $isLoading={false}
+                  $isOpen={false}
+                  $isPseudoFocused={false}
+                  $multi={false}
+                  $required={false}
+                  $searchable={true}
+                  $size="default"
+                  $type="search"
                 >
-                  Select...
-                </div>
-              </MockStyledComponent>
-              <MockStyledComponent
-                $clearable={true}
-                $disabled={false}
-                $error={false}
-                $isFocused={false}
-                $isLoading={false}
-                $isOpen={false}
-                $isPseudoFocused={false}
-                $multi={false}
-                $required={false}
-                $searchable={true}
-                $size="default"
-                $type="search"
-              >
-                <div
-                  styled-component="true"
+                  <div
+                    styled-component="true"
+                  >
+                    Select...
+                  </div>
+                </MockStyledComponent>
+                <MockStyledComponent
+                  $clearable={true}
+                  $disabled={false}
+                  $error={false}
+                  $isFocused={false}
+                  $isLoading={false}
+                  $isOpen={false}
+                  $isPseudoFocused={false}
+                  $multi={false}
+                  $required={false}
+                  $searchable={true}
+                  $size="default"
+                  $type="search"
                 >
-                  <AutosizeInput
-                    $clearable={true}
-                    $disabled={false}
-                    $error={false}
-                    $isFocused={false}
-                    $isLoading={false}
-                    $isOpen={false}
-                    $isPseudoFocused={false}
-                    $multi={false}
-                    $required={false}
-                    $searchable={true}
-                    $size="default"
-                    $type="search"
-                    aria-autocomplete="list"
-                    aria-describedby={null}
-                    aria-disabled={null}
-                    aria-expanded={false}
-                    aria-haspopup={false}
-                    aria-label={null}
-                    aria-labelledby={null}
-                    aria-required={null}
-                    disabled={null}
-                    inputRef={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    overrides={
-                      Object {
-                        "Input": undefined,
-                      }
-                    }
-                    required={null}
-                    role="combobox"
-                    value=""
+                  <div
+                    styled-component="true"
                   >
-                    <MockStyledComponent
+                    <AutosizeInput
                       $clearable={true}
                       $disabled={false}
                       $error={false}
@@ -276,12 +263,10 @@ exports[`Select component renders component in search mode and false for multipl
                       $isOpen={false}
                       $isPseudoFocused={false}
                       $multi={false}
-                      $ref={[Function]}
                       $required={false}
                       $searchable={true}
                       $size="default"
                       $type="search"
-                      $width="5px"
                       aria-autocomplete="list"
                       aria-describedby={null}
                       aria-disabled={null}
@@ -291,13 +276,34 @@ exports[`Select component renders component in search mode and false for multipl
                       aria-labelledby={null}
                       aria-required={null}
                       disabled={null}
+                      inputRef={[Function]}
+                      onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
+                      overrides={
+                        Object {
+                          "Input": undefined,
+                        }
+                      }
                       required={null}
                       role="combobox"
                       value=""
                     >
-                      <input
+                      <MockStyledComponent
+                        $clearable={true}
+                        $disabled={false}
+                        $error={false}
+                        $isFocused={false}
+                        $isLoading={false}
+                        $isOpen={false}
+                        $isPseudoFocused={false}
+                        $multi={false}
+                        $ref={[Function]}
+                        $required={false}
+                        $searchable={true}
+                        $size="default"
+                        $type="search"
+                        $width="5px"
                         aria-autocomplete="list"
                         aria-describedby={null}
                         aria-disabled={null}
@@ -307,48 +313,67 @@ exports[`Select component renders component in search mode and false for multipl
                         aria-labelledby={null}
                         aria-required={null}
                         disabled={null}
+                        onBlur={[Function]}
                         onChange={[Function]}
                         onFocus={[Function]}
                         required={null}
                         role="combobox"
-                        styled-component="true"
                         value=""
-                      />
-                    </MockStyledComponent>
-                    <MockStyledComponent
-                      $ref={[Function]}
-                    >
-                      <div
-                        styled-component="true"
-                      />
-                    </MockStyledComponent>
-                  </AutosizeInput>
-                </div>
-              </MockStyledComponent>
-            </span>
-          </MockStyledComponent>
-          <MockStyledComponent
-            $clearable={true}
-            $disabled={false}
-            $error={false}
-            $isFocused={false}
-            $isLoading={false}
-            $isOpen={false}
-            $isPseudoFocused={false}
-            $multi={false}
-            $required={false}
-            $searchable={true}
-            $size="default"
-            $type="search"
-          >
-            <div
-              styled-component="true"
-            />
-          </MockStyledComponent>
-        </div>
-      </MockStyledComponent>
-    </div>
-  </MockStyledComponent>
+                      >
+                        <input
+                          aria-autocomplete="list"
+                          aria-describedby={null}
+                          aria-disabled={null}
+                          aria-expanded={false}
+                          aria-haspopup={false}
+                          aria-label={null}
+                          aria-labelledby={null}
+                          aria-required={null}
+                          disabled={null}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={null}
+                          role="combobox"
+                          styled-component="true"
+                          value=""
+                        />
+                      </MockStyledComponent>
+                      <MockStyledComponent
+                        $ref={[Function]}
+                      >
+                        <div
+                          styled-component="true"
+                        />
+                      </MockStyledComponent>
+                    </AutosizeInput>
+                  </div>
+                </MockStyledComponent>
+              </span>
+            </MockStyledComponent>
+            <MockStyledComponent
+              $clearable={true}
+              $disabled={false}
+              $error={false}
+              $isFocused={false}
+              $isLoading={false}
+              $isOpen={false}
+              $isPseudoFocused={false}
+              $multi={false}
+              $required={false}
+              $searchable={true}
+              $size="default"
+              $type="search"
+            >
+              <div
+                styled-component="true"
+              />
+            </MockStyledComponent>
+          </div>
+        </MockStyledComponent>
+      </div>
+    </MockStyledComponent>
+  </Popover>
 </Select>
 `;
 
@@ -408,74 +433,77 @@ exports[`Select component renders component in search mode and true for multiple
   value={Array []}
   valueKey="id"
 >
-  <MockStyledComponent
-    $clearable={true}
-    $disabled={false}
-    $error={false}
-    $isFocused={false}
-    $isLoading={false}
-    $isOpen={false}
-    $isPseudoFocused={false}
-    $multi={false}
-    $ref={[Function]}
-    $required={false}
-    $searchable={true}
-    $size="default"
-    $type="search"
+  <Popover
+    accessibilityType="menu"
+    content={[Function]}
+    ignoreBoundary={false}
+    isOpen={false}
+    onMouseEnterDelay={200}
+    onMouseLeaveDelay={200}
+    overrides={Object {}}
+    placement="bottom"
+    showArrow={false}
+    triggerType="click"
   >
-    <div
-      styled-component="true"
+    <MockStyledComponent
+      $clearable={true}
+      $disabled={false}
+      $error={false}
+      $isFocused={false}
+      $isLoading={false}
+      $isOpen={false}
+      $isPseudoFocused={false}
+      $multi={false}
+      $ref={
+        Object {
+          "current": null,
+        }
+      }
+      $required={false}
+      $searchable={true}
+      $size="default"
+      $type="search"
+      aria-controls={null}
+      aria-expanded="false"
+      aria-haspopup="true"
+      key="popover-anchor"
+      onClick={[Function]}
     >
-      <MockStyledComponent
-        $clearable={true}
-        $disabled={false}
-        $error={false}
-        $isFocused={false}
-        $isLoading={false}
-        $isOpen={false}
-        $isPseudoFocused={false}
-        $multi={false}
-        $required={false}
-        $searchable={true}
-        $size="default"
-        $type="search"
+      <div
+        aria-controls={null}
+        aria-expanded="false"
+        aria-haspopup="true"
         onClick={[Function]}
-        onKeyDown={[Function]}
-        onTouchEnd={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
+        styled-component="true"
       >
-        <div
+        <MockStyledComponent
+          $clearable={true}
+          $disabled={false}
+          $error={false}
+          $isFocused={false}
+          $isLoading={false}
+          $isOpen={false}
+          $isPseudoFocused={false}
+          $multi={false}
+          $required={false}
+          $searchable={true}
+          $size="default"
+          $type="search"
           onClick={[Function]}
           onKeyDown={[Function]}
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          styled-component="true"
         >
-          <Search
-            $clearable={true}
-            $disabled={false}
-            $error={false}
-            $isFocused={false}
-            $isLoading={false}
-            $isOpen={false}
-            $isPseudoFocused={false}
-            $multi={false}
-            $required={false}
-            $searchable={true}
-            $size="default"
-            $type="search"
+          <div
             onClick={[Function]}
-            overrides={
-              Object {
-                "Svg": [Function],
-              }
-            }
-            size={16}
-            title="search"
+            onKeyDown={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+            styled-component="true"
           >
-            <Icon
+            <Search
               $clearable={true}
               $disabled={false}
               $error={false}
@@ -488,7 +516,6 @@ exports[`Select component renders component in search mode and true for multiple
               $searchable={true}
               $size="default"
               $type="search"
-              onClick={[Function]}
               overrides={
                 Object {
                   "Svg": [Function],
@@ -496,9 +523,8 @@ exports[`Select component renders component in search mode and true for multiple
               }
               size={16}
               title="search"
-              viewBox="0 0 24 24"
             >
-              <MockStyledComponent
+              <Icon
                 $clearable={true}
                 $disabled={false}
                 $error={false}
@@ -509,117 +535,103 @@ exports[`Select component renders component in search mode and true for multiple
                 $multi={false}
                 $required={false}
                 $searchable={true}
-                $size={16}
+                $size="default"
                 $type="search"
-                onClick={[Function]}
+                overrides={
+                  Object {
+                    "Svg": [Function],
+                  }
+                }
+                size={16}
+                title="search"
                 viewBox="0 0 24 24"
               >
-                <svg
-                  onClick={[Function]}
-                  styled-component="true"
+                <MockStyledComponent
+                  $clearable={true}
+                  $disabled={false}
+                  $error={false}
+                  $isFocused={false}
+                  $isLoading={false}
+                  $isOpen={false}
+                  $isPseudoFocused={false}
+                  $multi={false}
+                  $required={false}
+                  $searchable={true}
+                  $size={16}
+                  $type="search"
                   viewBox="0 0 24 24"
                 >
-                  <title>
-                    search
-                  </title>
-                  <path
-                    clipRule="evenodd"
-                    d="M11 6C8.79086 6 7 7.79086 7 10C7 12.2091 8.79086 14 11 14C13.2091 14 15 12.2091 15 10C15 7.79086 13.2091 6 11 6ZM5 10C5 6.68629 7.68629 4 11 4C14.3137 4 17 6.68629 17 10C17 11.2958 16.5892 12.4957 15.8907 13.4765L19.7071 17.2929C20.0976 17.6834 20.0976 18.3166 19.7071 18.7071C19.3166 19.0976 18.6834 19.0976 18.2929 18.7071L14.4765 14.8907C13.4957 15.5892 12.2958 16 11 16C7.68629 16 5 13.3137 5 10Z"
-                    fillRule="evenodd"
-                  />
-                </svg>
-              </MockStyledComponent>
-            </Icon>
-          </Search>
-          <MockStyledComponent
-            $clearable={true}
-            $disabled={false}
-            $error={false}
-            $isFocused={false}
-            $isLoading={false}
-            $isOpen={false}
-            $isPseudoFocused={false}
-            $multi={false}
-            $required={false}
-            $searchable={true}
-            $size="default"
-            $type="search"
-          >
-            <span
-              styled-component="true"
+                  <svg
+                    styled-component="true"
+                    viewBox="0 0 24 24"
+                  >
+                    <title>
+                      search
+                    </title>
+                    <path
+                      clipRule="evenodd"
+                      d="M11 6C8.79086 6 7 7.79086 7 10C7 12.2091 8.79086 14 11 14C13.2091 14 15 12.2091 15 10C15 7.79086 13.2091 6 11 6ZM5 10C5 6.68629 7.68629 4 11 4C14.3137 4 17 6.68629 17 10C17 11.2958 16.5892 12.4957 15.8907 13.4765L19.7071 17.2929C20.0976 17.6834 20.0976 18.3166 19.7071 18.7071C19.3166 19.0976 18.6834 19.0976 18.2929 18.7071L14.4765 14.8907C13.4957 15.5892 12.2958 16 11 16C7.68629 16 5 13.3137 5 10Z"
+                      fillRule="evenodd"
+                    />
+                  </svg>
+                </MockStyledComponent>
+              </Icon>
+            </Search>
+            <MockStyledComponent
+              $clearable={true}
+              $disabled={false}
+              $error={false}
+              $isFocused={false}
+              $isLoading={false}
+              $isOpen={false}
+              $isPseudoFocused={false}
+              $multi={false}
+              $required={false}
+              $searchable={true}
+              $size="default"
+              $type="search"
             >
-              <MockStyledComponent
-                $clearable={true}
-                $disabled={false}
-                $error={false}
-                $isFocused={false}
-                $isLoading={false}
-                $isOpen={false}
-                $isPseudoFocused={false}
-                $multi={false}
-                $required={false}
-                $searchable={true}
-                $size="default"
-                $type="search"
+              <span
+                styled-component="true"
               >
-                <div
-                  styled-component="true"
+                <MockStyledComponent
+                  $clearable={true}
+                  $disabled={false}
+                  $error={false}
+                  $isFocused={false}
+                  $isLoading={false}
+                  $isOpen={false}
+                  $isPseudoFocused={false}
+                  $multi={false}
+                  $required={false}
+                  $searchable={true}
+                  $size="default"
+                  $type="search"
                 >
-                  Select...
-                </div>
-              </MockStyledComponent>
-              <MockStyledComponent
-                $clearable={true}
-                $disabled={false}
-                $error={false}
-                $isFocused={false}
-                $isLoading={false}
-                $isOpen={false}
-                $isPseudoFocused={false}
-                $multi={false}
-                $required={false}
-                $searchable={true}
-                $size="default"
-                $type="search"
-              >
-                <div
-                  styled-component="true"
+                  <div
+                    styled-component="true"
+                  >
+                    Select...
+                  </div>
+                </MockStyledComponent>
+                <MockStyledComponent
+                  $clearable={true}
+                  $disabled={false}
+                  $error={false}
+                  $isFocused={false}
+                  $isLoading={false}
+                  $isOpen={false}
+                  $isPseudoFocused={false}
+                  $multi={false}
+                  $required={false}
+                  $searchable={true}
+                  $size="default"
+                  $type="search"
                 >
-                  <AutosizeInput
-                    $clearable={true}
-                    $disabled={false}
-                    $error={false}
-                    $isFocused={false}
-                    $isLoading={false}
-                    $isOpen={false}
-                    $isPseudoFocused={false}
-                    $multi={false}
-                    $required={false}
-                    $searchable={true}
-                    $size="default"
-                    $type="search"
-                    aria-autocomplete="list"
-                    aria-describedby={null}
-                    aria-disabled={null}
-                    aria-expanded={false}
-                    aria-haspopup={false}
-                    aria-label={null}
-                    aria-labelledby={null}
-                    aria-required={null}
-                    disabled={null}
-                    inputRef={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    overrides={
-                      Object {
-                        "Input": undefined,
-                      }
-                    }
-                    required={null}
-                    role="combobox"
-                    value=""
+                  <div
+                    styled-component="true"
                   >
-                    <MockStyledComponent
+                    <AutosizeInput
                       $clearable={true}
                       $disabled={false}
                       $error={false}
@@ -628,12 +640,10 @@ exports[`Select component renders component in search mode and true for multiple
                       $isOpen={false}
                       $isPseudoFocused={false}
                       $multi={false}
-                      $ref={[Function]}
                       $required={false}
                       $searchable={true}
                       $size="default"
                       $type="search"
-                      $width="5px"
                       aria-autocomplete="list"
                       aria-describedby={null}
                       aria-disabled={null}
@@ -643,13 +653,34 @@ exports[`Select component renders component in search mode and true for multiple
                       aria-labelledby={null}
                       aria-required={null}
                       disabled={null}
+                      inputRef={[Function]}
+                      onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
+                      overrides={
+                        Object {
+                          "Input": undefined,
+                        }
+                      }
                       required={null}
                       role="combobox"
                       value=""
                     >
-                      <input
+                      <MockStyledComponent
+                        $clearable={true}
+                        $disabled={false}
+                        $error={false}
+                        $isFocused={false}
+                        $isLoading={false}
+                        $isOpen={false}
+                        $isPseudoFocused={false}
+                        $multi={false}
+                        $ref={[Function]}
+                        $required={false}
+                        $searchable={true}
+                        $size="default"
+                        $type="search"
+                        $width="5px"
                         aria-autocomplete="list"
                         aria-describedby={null}
                         aria-disabled={null}
@@ -659,48 +690,67 @@ exports[`Select component renders component in search mode and true for multiple
                         aria-labelledby={null}
                         aria-required={null}
                         disabled={null}
+                        onBlur={[Function]}
                         onChange={[Function]}
                         onFocus={[Function]}
                         required={null}
                         role="combobox"
-                        styled-component="true"
                         value=""
-                      />
-                    </MockStyledComponent>
-                    <MockStyledComponent
-                      $ref={[Function]}
-                    >
-                      <div
-                        styled-component="true"
-                      />
-                    </MockStyledComponent>
-                  </AutosizeInput>
-                </div>
-              </MockStyledComponent>
-            </span>
-          </MockStyledComponent>
-          <MockStyledComponent
-            $clearable={true}
-            $disabled={false}
-            $error={false}
-            $isFocused={false}
-            $isLoading={false}
-            $isOpen={false}
-            $isPseudoFocused={false}
-            $multi={false}
-            $required={false}
-            $searchable={true}
-            $size="default"
-            $type="search"
-          >
-            <div
-              styled-component="true"
-            />
-          </MockStyledComponent>
-        </div>
-      </MockStyledComponent>
-    </div>
-  </MockStyledComponent>
+                      >
+                        <input
+                          aria-autocomplete="list"
+                          aria-describedby={null}
+                          aria-disabled={null}
+                          aria-expanded={false}
+                          aria-haspopup={false}
+                          aria-label={null}
+                          aria-labelledby={null}
+                          aria-required={null}
+                          disabled={null}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={null}
+                          role="combobox"
+                          styled-component="true"
+                          value=""
+                        />
+                      </MockStyledComponent>
+                      <MockStyledComponent
+                        $ref={[Function]}
+                      >
+                        <div
+                          styled-component="true"
+                        />
+                      </MockStyledComponent>
+                    </AutosizeInput>
+                  </div>
+                </MockStyledComponent>
+              </span>
+            </MockStyledComponent>
+            <MockStyledComponent
+              $clearable={true}
+              $disabled={false}
+              $error={false}
+              $isFocused={false}
+              $isLoading={false}
+              $isOpen={false}
+              $isPseudoFocused={false}
+              $multi={false}
+              $required={false}
+              $searchable={true}
+              $size="default"
+              $type="search"
+            >
+              <div
+                styled-component="true"
+              />
+            </MockStyledComponent>
+          </div>
+        </MockStyledComponent>
+      </div>
+    </MockStyledComponent>
+  </Popover>
 </Select>
 `;
 
@@ -760,140 +810,131 @@ exports[`Select component renders component in select mode and false for multipl
   value={Array []}
   valueKey="id"
 >
-  <MockStyledComponent
-    $clearable={true}
-    $disabled={false}
-    $error={false}
-    $isFocused={false}
-    $isLoading={false}
-    $isOpen={false}
-    $isPseudoFocused={false}
-    $multi={false}
-    $ref={[Function]}
-    $required={false}
-    $searchable={true}
-    $size="default"
-    $type="select"
+  <Popover
+    accessibilityType="menu"
+    content={[Function]}
+    ignoreBoundary={false}
+    isOpen={false}
+    onMouseEnterDelay={200}
+    onMouseLeaveDelay={200}
+    overrides={Object {}}
+    placement="bottom"
+    showArrow={false}
+    triggerType="click"
   >
-    <div
-      styled-component="true"
+    <MockStyledComponent
+      $clearable={true}
+      $disabled={false}
+      $error={false}
+      $isFocused={false}
+      $isLoading={false}
+      $isOpen={false}
+      $isPseudoFocused={false}
+      $multi={false}
+      $ref={
+        Object {
+          "current": null,
+        }
+      }
+      $required={false}
+      $searchable={true}
+      $size="default"
+      $type="select"
+      aria-controls={null}
+      aria-expanded="false"
+      aria-haspopup="true"
+      key="popover-anchor"
+      onClick={[Function]}
     >
-      <MockStyledComponent
-        $clearable={true}
-        $disabled={false}
-        $error={false}
-        $isFocused={false}
-        $isLoading={false}
-        $isOpen={false}
-        $isPseudoFocused={false}
-        $multi={false}
-        $required={false}
-        $searchable={true}
-        $size="default"
-        $type="select"
+      <div
+        aria-controls={null}
+        aria-expanded="false"
+        aria-haspopup="true"
         onClick={[Function]}
-        onKeyDown={[Function]}
-        onTouchEnd={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
+        styled-component="true"
       >
-        <div
+        <MockStyledComponent
+          $clearable={true}
+          $disabled={false}
+          $error={false}
+          $isFocused={false}
+          $isLoading={false}
+          $isOpen={false}
+          $isPseudoFocused={false}
+          $multi={false}
+          $required={false}
+          $searchable={true}
+          $size="default"
+          $type="select"
           onClick={[Function]}
           onKeyDown={[Function]}
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          styled-component="true"
         >
-          <MockStyledComponent
-            $clearable={true}
-            $disabled={false}
-            $error={false}
-            $isFocused={false}
-            $isLoading={false}
-            $isOpen={false}
-            $isPseudoFocused={false}
-            $multi={false}
-            $required={false}
-            $searchable={true}
-            $size="default"
-            $type="select"
+          <div
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+            styled-component="true"
           >
-            <span
-              styled-component="true"
+            <MockStyledComponent
+              $clearable={true}
+              $disabled={false}
+              $error={false}
+              $isFocused={false}
+              $isLoading={false}
+              $isOpen={false}
+              $isPseudoFocused={false}
+              $multi={false}
+              $required={false}
+              $searchable={true}
+              $size="default"
+              $type="select"
             >
-              <MockStyledComponent
-                $clearable={true}
-                $disabled={false}
-                $error={false}
-                $isFocused={false}
-                $isLoading={false}
-                $isOpen={false}
-                $isPseudoFocused={false}
-                $multi={false}
-                $required={false}
-                $searchable={true}
-                $size="default"
-                $type="select"
+              <span
+                styled-component="true"
               >
-                <div
-                  styled-component="true"
+                <MockStyledComponent
+                  $clearable={true}
+                  $disabled={false}
+                  $error={false}
+                  $isFocused={false}
+                  $isLoading={false}
+                  $isOpen={false}
+                  $isPseudoFocused={false}
+                  $multi={false}
+                  $required={false}
+                  $searchable={true}
+                  $size="default"
+                  $type="select"
                 >
-                  Select...
-                </div>
-              </MockStyledComponent>
-              <MockStyledComponent
-                $clearable={true}
-                $disabled={false}
-                $error={false}
-                $isFocused={false}
-                $isLoading={false}
-                $isOpen={false}
-                $isPseudoFocused={false}
-                $multi={false}
-                $required={false}
-                $searchable={true}
-                $size="default"
-                $type="select"
-              >
-                <div
-                  styled-component="true"
+                  <div
+                    styled-component="true"
+                  >
+                    Select...
+                  </div>
+                </MockStyledComponent>
+                <MockStyledComponent
+                  $clearable={true}
+                  $disabled={false}
+                  $error={false}
+                  $isFocused={false}
+                  $isLoading={false}
+                  $isOpen={false}
+                  $isPseudoFocused={false}
+                  $multi={false}
+                  $required={false}
+                  $searchable={true}
+                  $size="default"
+                  $type="select"
                 >
-                  <AutosizeInput
-                    $clearable={true}
-                    $disabled={false}
-                    $error={false}
-                    $isFocused={false}
-                    $isLoading={false}
-                    $isOpen={false}
-                    $isPseudoFocused={false}
-                    $multi={false}
-                    $required={false}
-                    $searchable={true}
-                    $size="default"
-                    $type="select"
-                    aria-autocomplete="list"
-                    aria-describedby={null}
-                    aria-disabled={null}
-                    aria-expanded={false}
-                    aria-haspopup={false}
-                    aria-label={null}
-                    aria-labelledby={null}
-                    aria-required={null}
-                    disabled={null}
-                    inputRef={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    overrides={
-                      Object {
-                        "Input": undefined,
-                      }
-                    }
-                    required={null}
-                    role="combobox"
-                    value=""
+                  <div
+                    styled-component="true"
                   >
-                    <MockStyledComponent
+                    <AutosizeInput
                       $clearable={true}
                       $disabled={false}
                       $error={false}
@@ -902,12 +943,10 @@ exports[`Select component renders component in select mode and false for multipl
                       $isOpen={false}
                       $isPseudoFocused={false}
                       $multi={false}
-                      $ref={[Function]}
                       $required={false}
                       $searchable={true}
                       $size="default"
                       $type="select"
-                      $width="5px"
                       aria-autocomplete="list"
                       aria-describedby={null}
                       aria-disabled={null}
@@ -917,13 +956,34 @@ exports[`Select component renders component in select mode and false for multipl
                       aria-labelledby={null}
                       aria-required={null}
                       disabled={null}
+                      inputRef={[Function]}
+                      onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
+                      overrides={
+                        Object {
+                          "Input": undefined,
+                        }
+                      }
                       required={null}
                       role="combobox"
                       value=""
                     >
-                      <input
+                      <MockStyledComponent
+                        $clearable={true}
+                        $disabled={false}
+                        $error={false}
+                        $isFocused={false}
+                        $isLoading={false}
+                        $isOpen={false}
+                        $isPseudoFocused={false}
+                        $multi={false}
+                        $ref={[Function]}
+                        $required={false}
+                        $searchable={true}
+                        $size="default"
+                        $type="select"
+                        $width="5px"
                         aria-autocomplete="list"
                         aria-describedby={null}
                         aria-disabled={null}
@@ -933,66 +993,62 @@ exports[`Select component renders component in select mode and false for multipl
                         aria-labelledby={null}
                         aria-required={null}
                         disabled={null}
+                        onBlur={[Function]}
                         onChange={[Function]}
                         onFocus={[Function]}
                         required={null}
                         role="combobox"
-                        styled-component="true"
                         value=""
-                      />
-                    </MockStyledComponent>
-                    <MockStyledComponent
-                      $ref={[Function]}
-                    >
-                      <div
-                        styled-component="true"
-                      />
-                    </MockStyledComponent>
-                  </AutosizeInput>
-                </div>
-              </MockStyledComponent>
-            </span>
-          </MockStyledComponent>
-          <MockStyledComponent
-            $clearable={true}
-            $disabled={false}
-            $error={false}
-            $isFocused={false}
-            $isLoading={false}
-            $isOpen={false}
-            $isPseudoFocused={false}
-            $multi={false}
-            $required={false}
-            $searchable={true}
-            $size="default"
-            $type="select"
-          >
-            <div
-              styled-component="true"
+                      >
+                        <input
+                          aria-autocomplete="list"
+                          aria-describedby={null}
+                          aria-disabled={null}
+                          aria-expanded={false}
+                          aria-haspopup={false}
+                          aria-label={null}
+                          aria-labelledby={null}
+                          aria-required={null}
+                          disabled={null}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={null}
+                          role="combobox"
+                          styled-component="true"
+                          value=""
+                        />
+                      </MockStyledComponent>
+                      <MockStyledComponent
+                        $ref={[Function]}
+                      >
+                        <div
+                          styled-component="true"
+                        />
+                      </MockStyledComponent>
+                    </AutosizeInput>
+                  </div>
+                </MockStyledComponent>
+              </span>
+            </MockStyledComponent>
+            <MockStyledComponent
+              $clearable={true}
+              $disabled={false}
+              $error={false}
+              $isFocused={false}
+              $isLoading={false}
+              $isOpen={false}
+              $isPseudoFocused={false}
+              $multi={false}
+              $required={false}
+              $searchable={true}
+              $size="default"
+              $type="select"
             >
-              <TriangleDown
-                $clearable={true}
-                $disabled={false}
-                $error={false}
-                $isFocused={false}
-                $isLoading={false}
-                $isOpen={false}
-                $isPseudoFocused={false}
-                $multi={false}
-                $required={false}
-                $searchable={true}
-                $size="default"
-                $type="select"
-                onClick={[Function]}
-                overrides={
-                  Object {
-                    "Svg": [Function],
-                  }
-                }
-                size={16}
-                title="open"
+              <div
+                styled-component="true"
               >
-                <Icon
+                <TriangleDown
                   $clearable={true}
                   $disabled={false}
                   $error={false}
@@ -1005,7 +1061,6 @@ exports[`Select component renders component in select mode and false for multipl
                   $searchable={true}
                   $size="default"
                   $type="select"
-                  onClick={[Function]}
                   overrides={
                     Object {
                       "Svg": [Function],
@@ -1013,9 +1068,8 @@ exports[`Select component renders component in select mode and false for multipl
                   }
                   size={16}
                   title="open"
-                  viewBox="0 0 24 24"
                 >
-                  <MockStyledComponent
+                  <Icon
                     $clearable={true}
                     $disabled={false}
                     $error={false}
@@ -1026,32 +1080,53 @@ exports[`Select component renders component in select mode and false for multipl
                     $multi={false}
                     $required={false}
                     $searchable={true}
-                    $size={16}
+                    $size="default"
                     $type="select"
-                    onClick={[Function]}
+                    overrides={
+                      Object {
+                        "Svg": [Function],
+                      }
+                    }
+                    size={16}
+                    title="open"
                     viewBox="0 0 24 24"
                   >
-                    <svg
-                      onClick={[Function]}
-                      styled-component="true"
+                    <MockStyledComponent
+                      $clearable={true}
+                      $disabled={false}
+                      $error={false}
+                      $isFocused={false}
+                      $isLoading={false}
+                      $isOpen={false}
+                      $isPseudoFocused={false}
+                      $multi={false}
+                      $required={false}
+                      $searchable={true}
+                      $size={16}
+                      $type="select"
                       viewBox="0 0 24 24"
                     >
-                      <title>
-                        open
-                      </title>
-                      <path
-                        d="M12.7071 15.2929L17.1464 10.8536C17.4614 10.5386 17.2383 10 16.7929 10L7.20711 10C6.76165 10 6.53857 10.5386 6.85355 10.8536L11.2929 15.2929C11.6834 15.6834 12.3166 15.6834 12.7071 15.2929Z"
-                      />
-                    </svg>
-                  </MockStyledComponent>
-                </Icon>
-              </TriangleDown>
-            </div>
-          </MockStyledComponent>
-        </div>
-      </MockStyledComponent>
-    </div>
-  </MockStyledComponent>
+                      <svg
+                        styled-component="true"
+                        viewBox="0 0 24 24"
+                      >
+                        <title>
+                          open
+                        </title>
+                        <path
+                          d="M12.7071 15.2929L17.1464 10.8536C17.4614 10.5386 17.2383 10 16.7929 10L7.20711 10C6.76165 10 6.53857 10.5386 6.85355 10.8536L11.2929 15.2929C11.6834 15.6834 12.3166 15.6834 12.7071 15.2929Z"
+                        />
+                      </svg>
+                    </MockStyledComponent>
+                  </Icon>
+                </TriangleDown>
+              </div>
+            </MockStyledComponent>
+          </div>
+        </MockStyledComponent>
+      </div>
+    </MockStyledComponent>
+  </Popover>
 </Select>
 `;
 
@@ -1111,140 +1186,131 @@ exports[`Select component renders component in select mode and true for multiple
   value={Array []}
   valueKey="id"
 >
-  <MockStyledComponent
-    $clearable={true}
-    $disabled={false}
-    $error={false}
-    $isFocused={false}
-    $isLoading={false}
-    $isOpen={false}
-    $isPseudoFocused={false}
-    $multi={false}
-    $ref={[Function]}
-    $required={false}
-    $searchable={true}
-    $size="default"
-    $type="select"
+  <Popover
+    accessibilityType="menu"
+    content={[Function]}
+    ignoreBoundary={false}
+    isOpen={false}
+    onMouseEnterDelay={200}
+    onMouseLeaveDelay={200}
+    overrides={Object {}}
+    placement="bottom"
+    showArrow={false}
+    triggerType="click"
   >
-    <div
-      styled-component="true"
+    <MockStyledComponent
+      $clearable={true}
+      $disabled={false}
+      $error={false}
+      $isFocused={false}
+      $isLoading={false}
+      $isOpen={false}
+      $isPseudoFocused={false}
+      $multi={false}
+      $ref={
+        Object {
+          "current": null,
+        }
+      }
+      $required={false}
+      $searchable={true}
+      $size="default"
+      $type="select"
+      aria-controls={null}
+      aria-expanded="false"
+      aria-haspopup="true"
+      key="popover-anchor"
+      onClick={[Function]}
     >
-      <MockStyledComponent
-        $clearable={true}
-        $disabled={false}
-        $error={false}
-        $isFocused={false}
-        $isLoading={false}
-        $isOpen={false}
-        $isPseudoFocused={false}
-        $multi={false}
-        $required={false}
-        $searchable={true}
-        $size="default"
-        $type="select"
+      <div
+        aria-controls={null}
+        aria-expanded="false"
+        aria-haspopup="true"
         onClick={[Function]}
-        onKeyDown={[Function]}
-        onTouchEnd={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
+        styled-component="true"
       >
-        <div
+        <MockStyledComponent
+          $clearable={true}
+          $disabled={false}
+          $error={false}
+          $isFocused={false}
+          $isLoading={false}
+          $isOpen={false}
+          $isPseudoFocused={false}
+          $multi={false}
+          $required={false}
+          $searchable={true}
+          $size="default"
+          $type="select"
           onClick={[Function]}
           onKeyDown={[Function]}
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          styled-component="true"
         >
-          <MockStyledComponent
-            $clearable={true}
-            $disabled={false}
-            $error={false}
-            $isFocused={false}
-            $isLoading={false}
-            $isOpen={false}
-            $isPseudoFocused={false}
-            $multi={false}
-            $required={false}
-            $searchable={true}
-            $size="default"
-            $type="select"
+          <div
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+            styled-component="true"
           >
-            <span
-              styled-component="true"
+            <MockStyledComponent
+              $clearable={true}
+              $disabled={false}
+              $error={false}
+              $isFocused={false}
+              $isLoading={false}
+              $isOpen={false}
+              $isPseudoFocused={false}
+              $multi={false}
+              $required={false}
+              $searchable={true}
+              $size="default"
+              $type="select"
             >
-              <MockStyledComponent
-                $clearable={true}
-                $disabled={false}
-                $error={false}
-                $isFocused={false}
-                $isLoading={false}
-                $isOpen={false}
-                $isPseudoFocused={false}
-                $multi={false}
-                $required={false}
-                $searchable={true}
-                $size="default"
-                $type="select"
+              <span
+                styled-component="true"
               >
-                <div
-                  styled-component="true"
+                <MockStyledComponent
+                  $clearable={true}
+                  $disabled={false}
+                  $error={false}
+                  $isFocused={false}
+                  $isLoading={false}
+                  $isOpen={false}
+                  $isPseudoFocused={false}
+                  $multi={false}
+                  $required={false}
+                  $searchable={true}
+                  $size="default"
+                  $type="select"
                 >
-                  Select...
-                </div>
-              </MockStyledComponent>
-              <MockStyledComponent
-                $clearable={true}
-                $disabled={false}
-                $error={false}
-                $isFocused={false}
-                $isLoading={false}
-                $isOpen={false}
-                $isPseudoFocused={false}
-                $multi={false}
-                $required={false}
-                $searchable={true}
-                $size="default"
-                $type="select"
-              >
-                <div
-                  styled-component="true"
+                  <div
+                    styled-component="true"
+                  >
+                    Select...
+                  </div>
+                </MockStyledComponent>
+                <MockStyledComponent
+                  $clearable={true}
+                  $disabled={false}
+                  $error={false}
+                  $isFocused={false}
+                  $isLoading={false}
+                  $isOpen={false}
+                  $isPseudoFocused={false}
+                  $multi={false}
+                  $required={false}
+                  $searchable={true}
+                  $size="default"
+                  $type="select"
                 >
-                  <AutosizeInput
-                    $clearable={true}
-                    $disabled={false}
-                    $error={false}
-                    $isFocused={false}
-                    $isLoading={false}
-                    $isOpen={false}
-                    $isPseudoFocused={false}
-                    $multi={false}
-                    $required={false}
-                    $searchable={true}
-                    $size="default"
-                    $type="select"
-                    aria-autocomplete="list"
-                    aria-describedby={null}
-                    aria-disabled={null}
-                    aria-expanded={false}
-                    aria-haspopup={false}
-                    aria-label={null}
-                    aria-labelledby={null}
-                    aria-required={null}
-                    disabled={null}
-                    inputRef={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    overrides={
-                      Object {
-                        "Input": undefined,
-                      }
-                    }
-                    required={null}
-                    role="combobox"
-                    value=""
+                  <div
+                    styled-component="true"
                   >
-                    <MockStyledComponent
+                    <AutosizeInput
                       $clearable={true}
                       $disabled={false}
                       $error={false}
@@ -1253,12 +1319,10 @@ exports[`Select component renders component in select mode and true for multiple
                       $isOpen={false}
                       $isPseudoFocused={false}
                       $multi={false}
-                      $ref={[Function]}
                       $required={false}
                       $searchable={true}
                       $size="default"
                       $type="select"
-                      $width="5px"
                       aria-autocomplete="list"
                       aria-describedby={null}
                       aria-disabled={null}
@@ -1268,13 +1332,34 @@ exports[`Select component renders component in select mode and true for multiple
                       aria-labelledby={null}
                       aria-required={null}
                       disabled={null}
+                      inputRef={[Function]}
+                      onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
+                      overrides={
+                        Object {
+                          "Input": undefined,
+                        }
+                      }
                       required={null}
                       role="combobox"
                       value=""
                     >
-                      <input
+                      <MockStyledComponent
+                        $clearable={true}
+                        $disabled={false}
+                        $error={false}
+                        $isFocused={false}
+                        $isLoading={false}
+                        $isOpen={false}
+                        $isPseudoFocused={false}
+                        $multi={false}
+                        $ref={[Function]}
+                        $required={false}
+                        $searchable={true}
+                        $size="default"
+                        $type="select"
+                        $width="5px"
                         aria-autocomplete="list"
                         aria-describedby={null}
                         aria-disabled={null}
@@ -1284,66 +1369,62 @@ exports[`Select component renders component in select mode and true for multiple
                         aria-labelledby={null}
                         aria-required={null}
                         disabled={null}
+                        onBlur={[Function]}
                         onChange={[Function]}
                         onFocus={[Function]}
                         required={null}
                         role="combobox"
-                        styled-component="true"
                         value=""
-                      />
-                    </MockStyledComponent>
-                    <MockStyledComponent
-                      $ref={[Function]}
-                    >
-                      <div
-                        styled-component="true"
-                      />
-                    </MockStyledComponent>
-                  </AutosizeInput>
-                </div>
-              </MockStyledComponent>
-            </span>
-          </MockStyledComponent>
-          <MockStyledComponent
-            $clearable={true}
-            $disabled={false}
-            $error={false}
-            $isFocused={false}
-            $isLoading={false}
-            $isOpen={false}
-            $isPseudoFocused={false}
-            $multi={false}
-            $required={false}
-            $searchable={true}
-            $size="default"
-            $type="select"
-          >
-            <div
-              styled-component="true"
+                      >
+                        <input
+                          aria-autocomplete="list"
+                          aria-describedby={null}
+                          aria-disabled={null}
+                          aria-expanded={false}
+                          aria-haspopup={false}
+                          aria-label={null}
+                          aria-labelledby={null}
+                          aria-required={null}
+                          disabled={null}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={null}
+                          role="combobox"
+                          styled-component="true"
+                          value=""
+                        />
+                      </MockStyledComponent>
+                      <MockStyledComponent
+                        $ref={[Function]}
+                      >
+                        <div
+                          styled-component="true"
+                        />
+                      </MockStyledComponent>
+                    </AutosizeInput>
+                  </div>
+                </MockStyledComponent>
+              </span>
+            </MockStyledComponent>
+            <MockStyledComponent
+              $clearable={true}
+              $disabled={false}
+              $error={false}
+              $isFocused={false}
+              $isLoading={false}
+              $isOpen={false}
+              $isPseudoFocused={false}
+              $multi={false}
+              $required={false}
+              $searchable={true}
+              $size="default"
+              $type="select"
             >
-              <TriangleDown
-                $clearable={true}
-                $disabled={false}
-                $error={false}
-                $isFocused={false}
-                $isLoading={false}
-                $isOpen={false}
-                $isPseudoFocused={false}
-                $multi={false}
-                $required={false}
-                $searchable={true}
-                $size="default"
-                $type="select"
-                onClick={[Function]}
-                overrides={
-                  Object {
-                    "Svg": [Function],
-                  }
-                }
-                size={16}
-                title="open"
+              <div
+                styled-component="true"
               >
-                <Icon
+                <TriangleDown
                   $clearable={true}
                   $disabled={false}
                   $error={false}
@@ -1356,7 +1437,6 @@ exports[`Select component renders component in select mode and true for multiple
                   $searchable={true}
                   $size="default"
                   $type="select"
-                  onClick={[Function]}
                   overrides={
                     Object {
                       "Svg": [Function],
@@ -1364,9 +1444,8 @@ exports[`Select component renders component in select mode and true for multiple
                   }
                   size={16}
                   title="open"
-                  viewBox="0 0 24 24"
                 >
-                  <MockStyledComponent
+                  <Icon
                     $clearable={true}
                     $disabled={false}
                     $error={false}
@@ -1377,31 +1456,52 @@ exports[`Select component renders component in select mode and true for multiple
                     $multi={false}
                     $required={false}
                     $searchable={true}
-                    $size={16}
+                    $size="default"
                     $type="select"
-                    onClick={[Function]}
+                    overrides={
+                      Object {
+                        "Svg": [Function],
+                      }
+                    }
+                    size={16}
+                    title="open"
                     viewBox="0 0 24 24"
                   >
-                    <svg
-                      onClick={[Function]}
-                      styled-component="true"
+                    <MockStyledComponent
+                      $clearable={true}
+                      $disabled={false}
+                      $error={false}
+                      $isFocused={false}
+                      $isLoading={false}
+                      $isOpen={false}
+                      $isPseudoFocused={false}
+                      $multi={false}
+                      $required={false}
+                      $searchable={true}
+                      $size={16}
+                      $type="select"
                       viewBox="0 0 24 24"
                     >
-                      <title>
-                        open
-                      </title>
-                      <path
-                        d="M12.7071 15.2929L17.1464 10.8536C17.4614 10.5386 17.2383 10 16.7929 10L7.20711 10C6.76165 10 6.53857 10.5386 6.85355 10.8536L11.2929 15.2929C11.6834 15.6834 12.3166 15.6834 12.7071 15.2929Z"
-                      />
-                    </svg>
-                  </MockStyledComponent>
-                </Icon>
-              </TriangleDown>
-            </div>
-          </MockStyledComponent>
-        </div>
-      </MockStyledComponent>
-    </div>
-  </MockStyledComponent>
+                      <svg
+                        styled-component="true"
+                        viewBox="0 0 24 24"
+                      >
+                        <title>
+                          open
+                        </title>
+                        <path
+                          d="M12.7071 15.2929L17.1464 10.8536C17.4614 10.5386 17.2383 10 16.7929 10L7.20711 10C6.76165 10 6.53857 10.5386 6.85355 10.8536L11.2929 15.2929C11.6834 15.6834 12.3166 15.6834 12.7071 15.2929Z"
+                        />
+                      </svg>
+                    </MockStyledComponent>
+                  </Icon>
+                </TriangleDown>
+              </div>
+            </MockStyledComponent>
+          </div>
+        </MockStyledComponent>
+      </div>
+    </MockStyledComponent>
+  </Popover>
 </Select>
 `;
diff --git a/src/select/__tests__/dropdown.test.js b/src/select/__tests__/dropdown.test.js
index f6dca6517..e9f9c9495 100644
--- a/src/select/__tests__/dropdown.test.js
+++ b/src/select/__tests__/dropdown.test.js
@@ -18,6 +18,7 @@ describe('SelectDropdown', function() {
   let props = {};
   const options = [{id: '1', label: 'label1'}, {id: '2', label: 'label2'}];
   const value = [{id: '1', label: 'label1'}];
+  const ref = React.createRef();
 
   beforeEach(function() {
     props = {
@@ -36,8 +37,9 @@ describe('SelectDropdown', function() {
       required: false,
       searchable: true,
       type: TYPE.select,
+      width: 100,
     };
-    wrapper = mount(<SelectDropdown {...props} />);
+    wrapper = mount(<SelectDropdown innerRef={ref} {...props} />);
   });
 
   afterEach(function() {
diff --git a/src/select/__tests__/select.e2e.js b/src/select/__tests__/select.e2e.js
index a9c9b1762..575f92ae4 100644
--- a/src/select/__tests__/select.e2e.js
+++ b/src/select/__tests__/select.e2e.js
@@ -10,7 +10,7 @@ LICENSE file in the root directory of this source tree.
 const {mount, analyzeAccessibility} = require('../../../e2e/helpers');
 
 const selectors = {
-  selectInput: '[role="combobox"]',
+  selectInput: 'input[role="combobox"]',
   selectDropDown: '[role="listbox"]',
   dropDownOption: '[role="option"]',
   selectedList: '[data-id="selected"]',
@@ -85,6 +85,7 @@ describe('select', () => {
     await page.click(selectors.selectInput);
     await page.waitFor(selectors.selectDropDown);
     await page.click(optionAtPosition(1));
+    await page.waitFor(optionAtPosition(3));
     await page.click(optionAtPosition(3));
     await page.waitFor(selectors.selectDropDown);
   });
diff --git a/src/select/__tests__/select.test.js b/src/select/__tests__/select.test.js
index 3f74620f9..d69a922d0 100644
--- a/src/select/__tests__/select.test.js
+++ b/src/select/__tests__/select.test.js
@@ -71,16 +71,4 @@ describe('Select component', function() {
       value: [],
     });
   });
-
-  test('highlights the found item by default', function() {
-    wrapper = mount(<Select {...props} />);
-    const e = {target: {value: 'label1'}};
-    wrapper.instance().handleInputChange(e);
-    expect(
-      wrapper
-        .render()
-        .find('ul')
-        .html(),
-    ).toMatch(/aria-activedescendant="true"/);
-  });
 });