diff --git a/src/components/hooks/index.ts b/src/components/hooks/index.ts
index 5a177351..582428ca 100644
--- a/src/components/hooks/index.ts
+++ b/src/components/hooks/index.ts
@@ -4,3 +4,4 @@ export * from './useModifiedPopper';
 export * from './useOnClickOutside';
 export * from './useOnOff';
 export * from './useToggle';
+export * from './useSelect';
diff --git a/src/components/hooks/useSelect.tsx b/src/components/hooks/useSelect.tsx
new file mode 100644
index 00000000..b45bd29e
--- /dev/null
+++ b/src/components/hooks/useSelect.tsx
@@ -0,0 +1,58 @@
+import { MenuItem } from '@blueprintjs/core';
+import { ItemRenderer } from '@blueprintjs/select';
+import { useState } from 'react';
+
+export function useSelect<T extends { label: string }>() {
+  const [value, setValue] = useState<T | null>(null);
+  const itemRenderer = getItemRenderer(value);
+  const onItemSelect = setValue;
+  const popoverProps = {
+    onOpened: (node: HTMLElement) => {
+      const firstUl = node.querySelector('ul');
+      if (firstUl) {
+        firstUl.tabIndex = 0;
+        firstUl.focus();
+      }
+    },
+  };
+  const popoverTargetProps = {
+    style: { display: 'inline-block' },
+  };
+  const itemPredicate = (query: string, item: T) => {
+    return item.label.toLowerCase().includes(query.toLowerCase());
+  };
+  const itemListPredicate = (query: string, items: T[]) => {
+    return items.filter((item) =>
+      item.label.toLowerCase().includes(query.toLowerCase()),
+    );
+  };
+  return {
+    value,
+    setValue,
+    itemRenderer,
+    onItemSelect,
+    popoverProps,
+    popoverTargetProps,
+    itemPredicate,
+    itemListPredicate,
+  };
+}
+
+function getItemRenderer<T extends { label: string }>(value: T | null) {
+  const render: ItemRenderer<T> = (
+    { label },
+    { handleClick, handleFocus, modifiers, index },
+  ) => (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      selected={value?.label === label}
+      key={index}
+      onClick={handleClick}
+      onFocus={handleFocus}
+      roleStructure="listoption"
+      text={label}
+    />
+  );
+  return render;
+}
diff --git a/stories/components/select.stories.tsx b/stories/components/select.stories.tsx
index 171d32f2..5fc83a7b 100644
--- a/stories/components/select.stories.tsx
+++ b/stories/components/select.stories.tsx
@@ -5,10 +5,10 @@ import {
   MenuDivider,
   MenuItem,
 } from '@blueprintjs/core';
-import { ItemListRenderer, ItemRenderer, Select } from '@blueprintjs/select';
-import { Fragment, useState } from 'react';
+import { ItemListRenderer, Select } from '@blueprintjs/select';
+import { Dispatch, Fragment, SetStateAction, useState } from 'react';
 
-import { Button, useOnOff } from '../../src/components';
+import { Button, useOnOff, useSelect } from '../../src/components';
 
 export default {
   title: 'Forms / Select',
@@ -44,31 +44,13 @@ function getGroups(items: ItemsType[]) {
   return { groups, withoutGroup };
 }
 
-function getItemRenderer(value: ItemsType | null) {
-  const render: ItemRenderer<ItemsType> = (
-    { label },
-    { handleClick, handleFocus, modifiers, index },
-  ) => (
-    <MenuItem
-      active={modifiers.active}
-      disabled={modifiers.disabled}
-      selected={value?.label === label}
-      key={index}
-      onClick={handleClick}
-      onFocus={handleFocus}
-      roleStructure="listoption"
-      text={label}
-    />
-  );
-  return render;
-}
 const renderMenu: ItemListRenderer<ItemsType> = ({
-  items,
   itemsParentRef,
+  filteredItems,
   renderItem,
   menuProps,
 }) => {
-  const { groups, withoutGroup } = getGroups(items);
+  const { groups, withoutGroup } = getGroups(filteredItems);
   return (
     <Menu role="listbox" {...menuProps} ulRef={itemsParentRef}>
       {groups.map(({ group, items }) => (
@@ -82,38 +64,87 @@ const renderMenu: ItemListRenderer<ItemsType> = ({
     </Menu>
   );
 };
-const renderMenuNested: ItemListRenderer<ItemsType> = ({
-  items,
-  itemsParentRef,
-  renderItem,
-  menuProps,
-}) => {
-  const { groups, withoutGroup } = getGroups(items);
+function renderMenuNested(
+  value: ItemsType | null,
+  [hoveredGroup, setHoveredGroup]: [
+    string | undefined,
+    Dispatch<SetStateAction<string | undefined>>,
+  ],
+) {
+  const render: ItemListRenderer<ItemsType> = ({
+    filteredItems,
+    itemsParentRef,
+    renderItem,
+    menuProps,
+    activeItem,
+  }) => {
+    const { groups, withoutGroup } = getGroups(filteredItems);
+    return (
+      <Menu role="listbox" {...menuProps} ulRef={itemsParentRef}>
+        {groups.map(({ group, items }) => (
+          <MenuItem
+            key={group}
+            text={group}
+            active={items.map((item) => item === activeItem).includes(true)}
+            selected={items
+              .map((item) => item.label === value?.label)
+              .includes(true)}
+            popoverProps={{
+              isOpen: hoveredGroup
+                ? hoveredGroup === group
+                : items.map((item) => item === activeItem).includes(true),
+              onInteraction: (nextOpenState) => {
+                if (items.map((item) => item === activeItem).includes(true)) {
+                  return;
+                }
+                if (nextOpenState) {
+                  setHoveredGroup(group);
+                } else if (hoveredGroup) {
+                  setHoveredGroup(undefined);
+                }
+              },
+            }}
+            roleStructure="listoption"
+          >
+            {items.map(renderItem)}
+          </MenuItem>
+        ))}
+        {groups.length > 0 && withoutGroup.length > 0 && <MenuDivider />}
+        {withoutGroup.map(renderItem)}
+      </Menu>
+    );
+  };
+  return render;
+}
 
+export function OnlyOptions() {
+  const { value, ...defaultProps } = useSelect();
   return (
-    <Menu role="listbox" {...menuProps} ulRef={itemsParentRef}>
-      {groups.map(({ group, items }) => (
-        <MenuItem key={group} text={group}>
-          {items.map(renderItem)}
-        </MenuItem>
-      ))}
-      {groups.length > 0 && withoutGroup.length > 0 && <MenuDivider />}
-      {withoutGroup.map(renderItem)}
-    </Menu>
+    <>
+      <Select
+        items={[{ label: 'Apple' }, { label: 'Banana' }, { label: 'Orange' }]}
+        filterable={false}
+        itemsEqual="label"
+        {...defaultProps}
+      >
+        <Button
+          text={value?.label ?? 'Select a status'}
+          rightIcon="double-caret-vertical"
+        />
+      </Select>
+      <p>Value outside component is {value?.label}.</p>
+    </>
   );
-};
+}
 
-export function OnlyOptions() {
-  const [value, setValue] = useState<ItemsType | null>(null);
+export function FiltrableOptions() {
+  const { value, ...defaultProps } = useSelect();
   return (
     <>
       <Select
-        onItemSelect={(item) => setValue(item)}
         items={[{ label: 'Apple' }, { label: 'Banana' }, { label: 'Orange' }]}
-        itemRenderer={getItemRenderer(value)}
-        filterable={false}
         itemsEqual="label"
-        popoverTargetProps={{ style: { display: 'inline-block' } }}
+        {...defaultProps}
       >
         <Button
           text={value?.label ?? 'Select a status'}
@@ -125,12 +156,10 @@ export function OnlyOptions() {
   );
 }
 export function OnlyCategories() {
-  const [value, setValue] = useState<ItemsType | null>(null);
+  const { value, ...defaultProps } = useSelect<ItemsType>();
   return (
     <>
       <Select
-        onItemSelect={(item) => setValue(item)}
-        itemRenderer={getItemRenderer(value)}
         filterable={false}
         itemsEqual="label"
         itemListRenderer={renderMenu}
@@ -142,7 +171,33 @@ export function OnlyCategories() {
           { label: 'Potato', group: 'Vegetables' },
           { label: 'Tomato', group: 'Vegetables' },
         ]}
-        popoverTargetProps={{ style: { display: 'inline-block' } }}
+        {...defaultProps}
+      >
+        <Button
+          text={value?.label ?? 'Select'}
+          rightIcon="double-caret-vertical"
+        />
+      </Select>
+      <p>Value outside component is {value?.label}.</p>
+    </>
+  );
+}
+export function FilteredCategories() {
+  const { value, ...defaultProps } = useSelect<ItemsType>();
+  return (
+    <>
+      <Select
+        itemsEqual="label"
+        itemListRenderer={renderMenu}
+        items={[
+          { label: 'Apple', group: 'Fruits' },
+          { label: 'Banana', group: 'Fruits' },
+          { label: 'Orange', group: 'Fruits' },
+          { label: 'Carrot', group: 'Vegetables' },
+          { label: 'Potato', group: 'Vegetables' },
+          { label: 'Tomato', group: 'Vegetables' },
+        ]}
+        {...defaultProps}
       >
         <Button
           text={value?.label ?? 'Select'}
@@ -154,14 +209,12 @@ export function OnlyCategories() {
   );
 }
 export function OptionsWithCategories() {
-  const [value, setValue] = useState<ItemsType | null>(null);
+  const { value, ...defaultProps } = useSelect<ItemsType>();
 
   return (
     <>
       <Select
-        onItemSelect={(item) => setValue(item)}
-        itemRenderer={getItemRenderer(value)}
-        filterable={false}
+        // filterable={false}
         itemsEqual="label"
         itemListRenderer={renderMenu}
         items={[
@@ -174,7 +227,7 @@ export function OptionsWithCategories() {
           { label: 'Pork' },
           { label: 'Beef' },
         ]}
-        popoverTargetProps={{ style: { display: 'inline-block' } }}
+        {...defaultProps}
       >
         <Button
           text={value?.label ?? 'Select'}
@@ -186,15 +239,14 @@ export function OptionsWithCategories() {
   );
 }
 export function CategoriesNested() {
-  const [value, setValue] = useState<ItemsType | null>(null);
+  const { value, ...defaultProps } = useSelect<ItemsType>();
+  const hoverState = useState<string | undefined>(undefined);
   return (
     <>
       <Select
-        onItemSelect={(item) => setValue(item)}
-        itemRenderer={getItemRenderer(value)}
         filterable={false}
         itemsEqual="label"
-        itemListRenderer={renderMenuNested}
+        itemListRenderer={renderMenuNested(value as ItemsType, hoverState)}
         items={[
           { label: 'Apple', group: 'Fruits' },
           { label: 'Banana', group: 'Fruits' },
@@ -205,7 +257,7 @@ export function CategoriesNested() {
           { label: 'Pork' },
           { label: 'Beef' },
         ]}
-        popoverTargetProps={{ style: { display: 'inline-block' } }}
+        {...defaultProps}
       >
         <Button
           text={value?.label ?? 'Select'}
@@ -218,17 +270,15 @@ export function CategoriesNested() {
 }
 
 export function DisabledOptions() {
-  const [value, setValue] = useState<ItemsType | null>(null);
+  const { value, ...defaultProps } = useSelect();
   return (
     <>
       <Select
         items={[{ label: 'Apple' }, { label: 'Banana' }, { label: 'Orange' }]}
-        itemRenderer={getItemRenderer(value)}
-        onItemSelect={setValue}
         itemDisabled={(item) => item.label === 'Orange'}
         filterable={false}
         itemsEqual="label"
-        popoverTargetProps={{ style: { display: 'inline-block' } }}
+        {...defaultProps}
       >
         <Button
           text={value?.label ?? 'Select a status'}
@@ -241,12 +291,10 @@ export function DisabledOptions() {
 }
 
 export function DisabledInCategories() {
-  const [value, setValue] = useState<ItemsType | null>(null);
+  const { value, ...defaultProps } = useSelect<ItemsType>();
   return (
     <>
       <Select
-        onItemSelect={(item) => setValue(item)}
-        itemRenderer={getItemRenderer(value)}
         filterable={false}
         itemsEqual="label"
         itemListRenderer={renderMenu}
@@ -261,6 +309,7 @@ export function DisabledInCategories() {
         itemDisabled={(item) =>
           item.label === 'Potato' || item.group === 'Fruits'
         }
+        {...defaultProps}
       >
         <Button
           text={value?.label ?? 'Select'}
@@ -273,16 +322,15 @@ export function DisabledInCategories() {
 }
 
 export function Disabled() {
-  const [value, setValue] = useState<ItemsType | null>(null);
+  const { value, ...defaultProps } = useSelect();
   return (
     <>
       <Select
         items={[{ label: 'Apple' }, { label: 'Banana' }, { label: 'Orange' }]}
-        itemRenderer={getItemRenderer(value)}
-        onItemSelect={setValue}
         filterable={false}
         itemsEqual="label"
         disabled
+        {...defaultProps}
       >
         <Button
           disabled
@@ -295,16 +343,15 @@ export function Disabled() {
   );
 }
 export function WithCustomStyle() {
-  const [value, setValue] = useState<ItemsType | null>(null);
+  const { value, ...defaultProps } = useSelect();
   return (
     <>
       <Select
         items={[{ label: 'Apple' }, { label: 'Banana' }, { label: 'Orange' }]}
-        itemRenderer={getItemRenderer(value)}
-        onItemSelect={setValue}
         filterable={false}
         itemsEqual="label"
         popoverContentProps={{ style: { width: '500px' } }}
+        {...defaultProps}
       >
         <Button
           style={{ width: '500px' }}
@@ -318,15 +365,16 @@ export function WithCustomStyle() {
 }
 
 export function FixedValueNoopHandle() {
+  const defaultProps = useSelect();
   const value = { label: 'Orange' };
   return (
     <>
       <Select
         items={[{ label: 'Apple' }, { label: 'Banana' }, { label: 'Orange' }]}
-        onItemSelect={() => null}
-        itemRenderer={getItemRenderer(value)}
         filterable={false}
         itemsEqual="label"
+        {...defaultProps}
+        onItemSelect={() => null}
       >
         <Button
           text={value.label ?? 'Select a status'}
@@ -338,16 +386,17 @@ export function FixedValueNoopHandle() {
   );
 }
 
-export function nullValueNoopHandle() {
+export function NullValueNoopHandle() {
+  const defaultProps = useSelect();
   const value = null;
   return (
     <>
       <Select
-        onItemSelect={() => null}
         items={[{ label: 'Apple' }, { label: 'Banana' }, { label: 'Orange' }]}
-        itemRenderer={getItemRenderer(value)}
         filterable={false}
         itemsEqual="label"
+        {...defaultProps}
+        onItemSelect={() => null}
       >
         <Button
           text={value ?? 'Select a status'}
@@ -360,15 +409,14 @@ export function nullValueNoopHandle() {
 }
 
 export function ResetButton() {
-  const [value, setValue] = useState<ItemsType | null>(null);
+  const { value, setValue, ...defaultProps } = useSelect();
   return (
     <>
       <Select
-        onItemSelect={setValue}
         items={[{ label: 'Apple' }, { label: 'Banana' }, { label: 'Orange' }]}
-        itemRenderer={getItemRenderer(value)}
         filterable={false}
         itemsEqual="label"
+        {...defaultProps}
       >
         <Button
           text={value?.label ?? 'Select a status'}
@@ -383,7 +431,7 @@ export function ResetButton() {
 
 export function InDialog() {
   const [isOpen, open, close] = useOnOff();
-  const [value, setValue] = useState<ItemsType | null>(null);
+  const { value, ...defaultProps } = useSelect();
   return (
     <>
       <Button onClick={open}>Open</Button>
@@ -398,21 +446,14 @@ export function InDialog() {
           <div style={{ margin: 4 }}>
             <p>Hello, world!</p>
             <Select
-              onItemSelect={setValue}
               items={[
                 { label: 'Apple' },
                 { label: 'Banana' },
                 { label: 'Orange' },
               ]}
-              itemRenderer={getItemRenderer(value)}
               filterable={false}
               itemsEqual="label"
-              popoverProps={{
-                positioningStrategy: 'fixed',
-              }}
-              popoverTargetProps={{
-                style: { display: 'inline-block' },
-              }}
+              {...defaultProps}
             >
               <Button
                 text={value?.label ?? 'Select a status'}