From 6da9fb447f6c59679c6fa087b8ecfb11fadc59af Mon Sep 17 00:00:00 2001
From: Steven Countryman <stevenco@microsoft.com>
Date: Mon, 22 Apr 2024 17:42:43 -0700
Subject: [PATCH 01/12] Adding storybook entries for Listbox

---
 .../Listbox/ListboxDefault.stories.tsx        |  31 +++++
 .../stories/Listbox/ListboxDescription.md     |   1 +
 .../Listbox/ListboxFiltering.stories.tsx      |  63 ++++++++++
 .../Listbox/ListboxInDialog.stories.tsx       | 117 ++++++++++++++++++
 .../stories/Listbox/index.stories.tsx         |  23 ++++
 5 files changed, 235 insertions(+)
 create mode 100644 packages/react-components/react-combobox/stories/Listbox/ListboxDefault.stories.tsx
 create mode 100644 packages/react-components/react-combobox/stories/Listbox/ListboxDescription.md
 create mode 100644 packages/react-components/react-combobox/stories/Listbox/ListboxFiltering.stories.tsx
 create mode 100644 packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
 create mode 100644 packages/react-components/react-combobox/stories/Listbox/index.stories.tsx

diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxDefault.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxDefault.stories.tsx
new file mode 100644
index 0000000000000..809b365fe5568
--- /dev/null
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxDefault.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Listbox, makeStyles, Option, shorthands } from '@fluentui/react-components';
+import type { ListboxProps } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  root: {
+    // Stack the label above the field with a gap
+    display: 'grid',
+    gridTemplateRows: 'repeat(1fr)',
+    justifyItems: 'start',
+    ...shorthands.gap('2px'),
+    maxWidth: '400px',
+  },
+});
+
+export const Default = (props: Partial<ListboxProps>) => {
+  const options = ['Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Snake'];
+
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <Listbox {...props}>
+        {options.map(option => (
+          <Option key={option} disabled={option === 'Ferret'}>
+            {option}
+          </Option>
+        ))}
+      </Listbox>
+    </div>
+  );
+};
diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxDescription.md b/packages/react-components/react-combobox/stories/Listbox/ListboxDescription.md
new file mode 100644
index 0000000000000..db39dca2c9a77
--- /dev/null
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxDescription.md
@@ -0,0 +1 @@
+A listbox (`Listbox`) provides people a way to select an option from an inline list.
diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxFiltering.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxFiltering.stories.tsx
new file mode 100644
index 0000000000000..2e6ce145a868e
--- /dev/null
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxFiltering.stories.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { Button, Input, Listbox, makeStyles, mergeClasses, Option, shorthands } from '@fluentui/react-components';
+import type { ListboxProps } from '@fluentui/react-components';
+import { DismissRegular } from '@fluentui/react-icons';
+
+const useStyles = makeStyles({
+  root: {
+    // Stack the label above the field with a gap
+    display: 'grid',
+    gridTemplateRows: 'repeat(1fr)',
+    justifyItems: 'start',
+    ...shorthands.gap('2px'),
+    width: '200px',
+  },
+  input: {
+    width: '100%',
+    marginBottom: '8px',
+  },
+  listbox: {
+    width: '100%',
+  },
+});
+
+export const Filtering = (props: Partial<ListboxProps>) => {
+  const options = ['Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Snake'];
+
+  const [filter, setFilter] = React.useState('');
+
+  const filteredOptions = React.useMemo(() => {
+    return options.filter(
+      o => o.toLowerCase().includes(filter.toLowerCase()) || filter.toLowerCase().includes(o.toLowerCase()),
+    );
+  }, [filter]);
+
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <Input
+        className={styles.input}
+        placeholder="Filter pets"
+        value={filter}
+        onChange={(_, data) => setFilter(data.value)}
+        contentAfter={
+          filter.length > 0 ? (
+            <Button
+              appearance="transparent"
+              icon={<DismissRegular />}
+              title="Clear filter"
+              onClick={() => setFilter('')}
+            />
+          ) : undefined
+        }
+      />
+      <Listbox {...props} className={mergeClasses(styles.listbox, props.className)}>
+        {filteredOptions.map(option => (
+          <Option key={option} disabled={option === 'Ferret'}>
+            {option}
+          </Option>
+        ))}
+      </Listbox>
+    </div>
+  );
+};
diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
new file mode 100644
index 0000000000000..697015e467826
--- /dev/null
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react';
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTrigger,
+  Input,
+  Listbox,
+  makeStyles,
+  MenuButton,
+  mergeClasses,
+  Option,
+  shorthands,
+} from '@fluentui/react-components';
+import type { ListboxProps } from '@fluentui/react-components';
+import { DismissRegular } from '@fluentui/react-icons';
+
+const useStyles = makeStyles({
+  root: {
+    // Stack the label above the field with a gap
+    display: 'grid',
+    gridTemplateRows: 'repeat(1fr)',
+    justifyItems: 'start',
+    ...shorthands.gap('2px'),
+    maxWidth: '400px',
+  },
+  menuButton: {
+    justifyContent: 'space-between',
+  },
+  input: {
+    width: '100%',
+    marginBottom: '8px',
+  },
+  listbox: {
+    width: '100%',
+  },
+});
+
+export const InDialog = (props: Partial<ListboxProps>) => {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const options = ['Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Snake'];
+  const [selectedOption, setSelectedOption] = React.useState(props.selectedOptions?.[0]);
+
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+  const [filter, setFilter] = React.useState('');
+
+  const filteredOptions = React.useMemo(() => {
+    return options.filter(
+      o => o.toLowerCase().includes(filter.toLowerCase()) || filter.toLowerCase().includes(o.toLowerCase()),
+    );
+  }, [filter]);
+
+  React.useEffect(() => {
+    setSelectedOption(props.selectedOptions?.[0]);
+  }, [props.selectedOptions]);
+
+  React.useEffect(() => {
+    if (dialogOpen) {
+      inputRef.current?.focus();
+    }
+  }, [dialogOpen]);
+
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <Dialog open={dialogOpen} onOpenChange={(_, data) => setDialogOpen(data.open)}>
+        <DialogTrigger disableButtonEnhancement>
+          <MenuButton appearance="outline" className={styles.menuButton} onClick={() => setDialogOpen(!dialogOpen)}>
+            {selectedOption ?? 'Select a pet'}
+          </MenuButton>
+        </DialogTrigger>
+        <DialogSurface>
+          <DialogBody>
+            <DialogContent>
+              <Input
+                ref={inputRef}
+                className={styles.input}
+                placeholder="Filter pets"
+                autoFocus
+                value={filter}
+                onChange={(_, data) => setFilter(data.value)}
+                contentAfter={
+                  filter.length > 0 ? (
+                    <Button
+                      appearance="transparent"
+                      icon={<DismissRegular />}
+                      title="Clear filter"
+                      onClick={() => setFilter('')}
+                    />
+                  ) : undefined
+                }
+              />
+              <Listbox
+                {...props}
+                className={mergeClasses(styles.listbox, props.className)}
+                selectedOptions={selectedOption ? [selectedOption] : []}
+                onOptionSelect={(e, data) => {
+                  props.onOptionSelect?.(e, data);
+                  setSelectedOption(data.selectedOptions[0]);
+                  setDialogOpen(false);
+                }}
+              >
+                {filteredOptions.map(option => (
+                  <Option key={option} disabled={option === 'Ferret'}>
+                    {option}
+                  </Option>
+                ))}
+              </Listbox>
+            </DialogContent>
+          </DialogBody>
+        </DialogSurface>
+      </Dialog>
+    </div>
+  );
+};
diff --git a/packages/react-components/react-combobox/stories/Listbox/index.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/index.stories.tsx
new file mode 100644
index 0000000000000..3a26b24a37922
--- /dev/null
+++ b/packages/react-components/react-combobox/stories/Listbox/index.stories.tsx
@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/react';
+import { Listbox, Option } from '@fluentui/react-components';
+
+import descriptionMd from './ListboxDescription.md';
+
+export { Default } from './ListboxDefault.stories';
+export { Filtering } from './ListboxFiltering.stories';
+export { InDialog } from './ListboxInDialog.stories';
+
+export default {
+  title: 'Components/Listbox',
+  component: Listbox,
+  subcomponents: {
+    Option,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd].join('\n'),
+      },
+    },
+  },
+} as Meta;

From d89851352eb0674a00275a64e2a878ba5c2838e8 Mon Sep 17 00:00:00 2001
From: Steven Countryman <stevenco@microsoft.com>
Date: Mon, 22 Apr 2024 17:44:23 -0700
Subject: [PATCH 02/12] simplifying filtered options

---
 .../stories/Listbox/ListboxFiltering.stories.tsx              | 4 +---
 .../stories/Listbox/ListboxInDialog.stories.tsx               | 3 +--
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxFiltering.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxFiltering.stories.tsx
index 2e6ce145a868e..bb4898971b135 100644
--- a/packages/react-components/react-combobox/stories/Listbox/ListboxFiltering.stories.tsx
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxFiltering.stories.tsx
@@ -22,12 +22,10 @@ const useStyles = makeStyles({
 });
 
 export const Filtering = (props: Partial<ListboxProps>) => {
-  const options = ['Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Snake'];
-
   const [filter, setFilter] = React.useState('');
 
   const filteredOptions = React.useMemo(() => {
-    return options.filter(
+    return ['Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Snake'].filter(
       o => o.toLowerCase().includes(filter.toLowerCase()) || filter.toLowerCase().includes(o.toLowerCase()),
     );
   }, [filter]);
diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
index 697015e467826..e18471d692848 100644
--- a/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
@@ -40,14 +40,13 @@ const useStyles = makeStyles({
 
 export const InDialog = (props: Partial<ListboxProps>) => {
   const inputRef = React.useRef<HTMLInputElement>(null);
-  const options = ['Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Snake'];
   const [selectedOption, setSelectedOption] = React.useState(props.selectedOptions?.[0]);
 
   const [dialogOpen, setDialogOpen] = React.useState(false);
   const [filter, setFilter] = React.useState('');
 
   const filteredOptions = React.useMemo(() => {
-    return options.filter(
+    return ['Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Snake'].filter(
       o => o.toLowerCase().includes(filter.toLowerCase()) || filter.toLowerCase().includes(o.toLowerCase()),
     );
   }, [filter]);

From 01bd938820257bd4e21a7a78999bfcee2c7b630d Mon Sep 17 00:00:00 2001
From: Steven Countryman <stevenco@microsoft.com>
Date: Mon, 22 Apr 2024 18:04:00 -0700
Subject: [PATCH 03/12] Improving stories

---
 .../Listbox/ListboxDefault.stories.tsx        |  2 +-
 .../Listbox/ListboxFiltering.stories.tsx      |  3 +-
 .../Listbox/ListboxInDialog.stories.tsx       | 46 +++++++++++++++----
 .../Listbox/ListboxMultiselect.stories.tsx    | 31 +++++++++++++
 .../stories/Listbox/index.stories.tsx         |  1 +
 5 files changed, 73 insertions(+), 10 deletions(-)
 create mode 100644 packages/react-components/react-combobox/stories/Listbox/ListboxMultiselect.stories.tsx

diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxDefault.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxDefault.stories.tsx
index 809b365fe5568..01fd9f5b6f808 100644
--- a/packages/react-components/react-combobox/stories/Listbox/ListboxDefault.stories.tsx
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxDefault.stories.tsx
@@ -19,7 +19,7 @@ export const Default = (props: Partial<ListboxProps>) => {
   const styles = useStyles();
   return (
     <div className={styles.root}>
-      <Listbox {...props}>
+      <Listbox {...props} aria-label="Select a pet">
         {options.map(option => (
           <Option key={option} disabled={option === 'Ferret'}>
             {option}
diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxFiltering.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxFiltering.stories.tsx
index bb4898971b135..add6741bb6f5a 100644
--- a/packages/react-components/react-combobox/stories/Listbox/ListboxFiltering.stories.tsx
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxFiltering.stories.tsx
@@ -36,6 +36,7 @@ export const Filtering = (props: Partial<ListboxProps>) => {
       <Input
         className={styles.input}
         placeholder="Filter pets"
+        aria-label="Filter pets"
         value={filter}
         onChange={(_, data) => setFilter(data.value)}
         contentAfter={
@@ -49,7 +50,7 @@ export const Filtering = (props: Partial<ListboxProps>) => {
           ) : undefined
         }
       />
-      <Listbox {...props} className={mergeClasses(styles.listbox, props.className)}>
+      <Listbox {...props} aria-label="Select a pet" className={mergeClasses(styles.listbox, props.className)}>
         {filteredOptions.map(option => (
           <Option key={option} disabled={option === 'Ferret'}>
             {option}
diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
index e18471d692848..062bcb0f66f45 100644
--- a/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
@@ -1,10 +1,13 @@
 import * as React from 'react';
 import {
   Button,
+  Checkbox,
   Dialog,
+  DialogActions,
   DialogBody,
   DialogContent,
   DialogSurface,
+  DialogTitle,
   DialogTrigger,
   Input,
   Listbox,
@@ -40,7 +43,9 @@ const useStyles = makeStyles({
 
 export const InDialog = (props: Partial<ListboxProps>) => {
   const inputRef = React.useRef<HTMLInputElement>(null);
-  const [selectedOption, setSelectedOption] = React.useState(props.selectedOptions?.[0]);
+  const [isMultiselect, setIsMultiselect] = React.useState(props.multiselect);
+  const [selectedOptions, setSelectedOptions] = React.useState(props.selectedOptions ?? []);
+  const [dialogSelectedOptions, setDialogSelectedOptions] = React.useState(props.selectedOptions ?? []);
 
   const [dialogOpen, setDialogOpen] = React.useState(false);
   const [filter, setFilter] = React.useState('');
@@ -52,7 +57,7 @@ export const InDialog = (props: Partial<ListboxProps>) => {
   }, [filter]);
 
   React.useEffect(() => {
-    setSelectedOption(props.selectedOptions?.[0]);
+    setSelectedOptions(props.selectedOptions ?? []);
   }, [props.selectedOptions]);
 
   React.useEffect(() => {
@@ -64,19 +69,30 @@ export const InDialog = (props: Partial<ListboxProps>) => {
   const styles = useStyles();
   return (
     <div className={styles.root}>
+      <Checkbox
+        label="Multiselect"
+        checked={isMultiselect}
+        onChange={(_, data) => setIsMultiselect(data.checked !== false)}
+      />
       <Dialog open={dialogOpen} onOpenChange={(_, data) => setDialogOpen(data.open)}>
         <DialogTrigger disableButtonEnhancement>
-          <MenuButton appearance="outline" className={styles.menuButton} onClick={() => setDialogOpen(!dialogOpen)}>
-            {selectedOption ?? 'Select a pet'}
+          <MenuButton
+            appearance="outline"
+            className={styles.menuButton}
+            onClick={() => setDialogSelectedOptions(selectedOptions)}
+          >
+            {selectedOptions.length > 0 ? selectedOptions.join(', ') : 'Select a pet'}
           </MenuButton>
         </DialogTrigger>
         <DialogSurface>
           <DialogBody>
+            <DialogTitle>Select a pet</DialogTitle>
             <DialogContent>
               <Input
                 ref={inputRef}
                 className={styles.input}
                 placeholder="Filter pets"
+                aria-label="Filter pets"
                 autoFocus
                 value={filter}
                 onChange={(_, data) => setFilter(data.value)}
@@ -93,12 +109,12 @@ export const InDialog = (props: Partial<ListboxProps>) => {
               />
               <Listbox
                 {...props}
+                aria-label="Select a pet"
                 className={mergeClasses(styles.listbox, props.className)}
-                selectedOptions={selectedOption ? [selectedOption] : []}
+                multiselect={isMultiselect}
+                selectedOptions={dialogSelectedOptions}
                 onOptionSelect={(e, data) => {
-                  props.onOptionSelect?.(e, data);
-                  setSelectedOption(data.selectedOptions[0]);
-                  setDialogOpen(false);
+                  setDialogSelectedOptions(data.selectedOptions);
                 }}
               >
                 {filteredOptions.map(option => (
@@ -108,6 +124,20 @@ export const InDialog = (props: Partial<ListboxProps>) => {
                 ))}
               </Listbox>
             </DialogContent>
+            <DialogActions>
+              <DialogTrigger>
+                <Button>Cancel</Button>
+              </DialogTrigger>
+              <Button
+                onClick={() => {
+                  setSelectedOptions(dialogSelectedOptions);
+                  setDialogOpen(false);
+                }}
+                disabled={!isMultiselect && dialogSelectedOptions.length === 0}
+              >
+                Done
+              </Button>
+            </DialogActions>
           </DialogBody>
         </DialogSurface>
       </Dialog>
diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxMultiselect.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxMultiselect.stories.tsx
new file mode 100644
index 0000000000000..baa67da6bbcb2
--- /dev/null
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxMultiselect.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Listbox, makeStyles, Option, shorthands } from '@fluentui/react-components';
+import type { ListboxProps } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  root: {
+    // Stack the label above the field with a gap
+    display: 'grid',
+    gridTemplateRows: 'repeat(1fr)',
+    justifyItems: 'start',
+    ...shorthands.gap('2px'),
+    maxWidth: '400px',
+  },
+});
+
+export const Multiselect = (props: Partial<ListboxProps>) => {
+  const options = ['Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Snake'];
+
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <Listbox {...props} multiselect aria-label="Select pets">
+        {options.map(option => (
+          <Option key={option} disabled={option === 'Ferret'}>
+            {option}
+          </Option>
+        ))}
+      </Listbox>
+    </div>
+  );
+};
diff --git a/packages/react-components/react-combobox/stories/Listbox/index.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/index.stories.tsx
index 3a26b24a37922..85b63aa65d56b 100644
--- a/packages/react-components/react-combobox/stories/Listbox/index.stories.tsx
+++ b/packages/react-components/react-combobox/stories/Listbox/index.stories.tsx
@@ -4,6 +4,7 @@ import { Listbox, Option } from '@fluentui/react-components';
 import descriptionMd from './ListboxDescription.md';
 
 export { Default } from './ListboxDefault.stories';
+export { Multiselect } from './ListboxMultiselect.stories';
 export { Filtering } from './ListboxFiltering.stories';
 export { InDialog } from './ListboxInDialog.stories';
 

From 17fc752ddbb2e9af988481e21d4c0e599b6ade76 Mon Sep 17 00:00:00 2001
From: Steven Countryman <stevenco@microsoft.com>
Date: Tue, 23 Apr 2024 12:58:09 -0700
Subject: [PATCH 04/12] Updating dialog story to have scroll container with
 sticky filter in dialog

---
 .../Listbox/ListboxInDialog.stories.tsx       | 65 ++++++++++++-------
 1 file changed, 42 insertions(+), 23 deletions(-)

diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
index 062bcb0f66f45..81a75f2682c3d 100644
--- a/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
@@ -16,6 +16,7 @@ import {
   mergeClasses,
   Option,
   shorthands,
+  tokens,
 } from '@fluentui/react-components';
 import type { ListboxProps } from '@fluentui/react-components';
 import { DismissRegular } from '@fluentui/react-icons';
@@ -32,13 +33,29 @@ const useStyles = makeStyles({
   menuButton: {
     justifyContent: 'space-between',
   },
+  listboxWrapper: {
+    maxHeight: '200px',
+    ...shorthands.overflow('hidden', 'auto'),
+  },
+  inputWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'sticky',
+    top: '-4px',
+    backgroundColor: tokens.colorNeutralBackground1,
+    zIndex: 1,
+    ...shorthands.margin('-4px', '-4px', '0px'),
+    ...shorthands.padding('4px', '4px', '8px'),
+  },
   input: {
     width: '100%',
-    marginBottom: '8px',
   },
   listbox: {
     width: '100%',
   },
+  option: {
+    scrollMarginBlockStart: '48px',
+  },
 });
 
 export const InDialog = (props: Partial<ListboxProps>) => {
@@ -51,7 +68,7 @@ export const InDialog = (props: Partial<ListboxProps>) => {
   const [filter, setFilter] = React.useState('');
 
   const filteredOptions = React.useMemo(() => {
-    return ['Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Snake'].filter(
+    return ['Bear', 'Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Monkey', 'Parrot', 'Snake', 'Zebra'].filter(
       o => o.toLowerCase().includes(filter.toLowerCase()) || filter.toLowerCase().includes(o.toLowerCase()),
     );
   }, [filter]);
@@ -87,26 +104,28 @@ export const InDialog = (props: Partial<ListboxProps>) => {
         <DialogSurface>
           <DialogBody>
             <DialogTitle>Select a pet</DialogTitle>
-            <DialogContent>
-              <Input
-                ref={inputRef}
-                className={styles.input}
-                placeholder="Filter pets"
-                aria-label="Filter pets"
-                autoFocus
-                value={filter}
-                onChange={(_, data) => setFilter(data.value)}
-                contentAfter={
-                  filter.length > 0 ? (
-                    <Button
-                      appearance="transparent"
-                      icon={<DismissRegular />}
-                      title="Clear filter"
-                      onClick={() => setFilter('')}
-                    />
-                  ) : undefined
-                }
-              />
+            <DialogContent className={styles.listboxWrapper}>
+              <div className={styles.inputWrapper}>
+                <Input
+                  ref={inputRef}
+                  className={styles.input}
+                  placeholder="Filter pets"
+                  aria-label="Filter pets"
+                  autoFocus
+                  value={filter}
+                  onChange={(_, data) => setFilter(data.value)}
+                  contentAfter={
+                    filter.length > 0 ? (
+                      <Button
+                        appearance="transparent"
+                        icon={<DismissRegular />}
+                        title="Clear filter"
+                        onClick={() => setFilter('')}
+                      />
+                    ) : undefined
+                  }
+                />
+              </div>
               <Listbox
                 {...props}
                 aria-label="Select a pet"
@@ -118,7 +137,7 @@ export const InDialog = (props: Partial<ListboxProps>) => {
                 }}
               >
                 {filteredOptions.map(option => (
-                  <Option key={option} disabled={option === 'Ferret'}>
+                  <Option key={option} className={styles.option} disabled={option === 'Ferret'}>
                     {option}
                   </Option>
                 ))}

From 9ef184292f4fbaa61524986beb49f78414a3b7e0 Mon Sep 17 00:00:00 2001
From: Steven Countryman <stevenco@microsoft.com>
Date: Tue, 23 Apr 2024 16:55:02 -0700
Subject: [PATCH 05/12] Adding non-filtering listbox dialog storybook

---
 .../ListboxFilteringInDialog.stories.tsx      | 165 ++++++++++++++++++
 .../Listbox/ListboxInDialog.stories.tsx       |  56 +-----
 .../stories/Listbox/index.stories.tsx         |   1 +
 3 files changed, 169 insertions(+), 53 deletions(-)
 create mode 100644 packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInDialog.stories.tsx

diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInDialog.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInDialog.stories.tsx
new file mode 100644
index 0000000000000..112fde7d96d96
--- /dev/null
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInDialog.stories.tsx
@@ -0,0 +1,165 @@
+import * as React from 'react';
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  DialogTrigger,
+  Input,
+  Listbox,
+  makeStyles,
+  MenuButton,
+  mergeClasses,
+  Option,
+  shorthands,
+  tokens,
+} from '@fluentui/react-components';
+import type { ListboxProps } from '@fluentui/react-components';
+import { DismissRegular } from '@fluentui/react-icons';
+
+const useStyles = makeStyles({
+  root: {
+    // Stack the label above the field with a gap
+    display: 'grid',
+    gridTemplateRows: 'repeat(1fr)',
+    justifyItems: 'start',
+    ...shorthands.gap('2px'),
+    maxWidth: '400px',
+  },
+  menuButton: {
+    justifyContent: 'space-between',
+  },
+  listboxWrapper: {
+    maxHeight: '200px',
+    ...shorthands.overflow('hidden', 'auto'),
+  },
+  inputWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'sticky',
+    top: '-4px',
+    backgroundColor: tokens.colorNeutralBackground1,
+    zIndex: 1,
+    ...shorthands.margin('-4px', '-4px', '0px'),
+    ...shorthands.padding('4px', '4px', '8px'),
+  },
+  input: {
+    width: '100%',
+  },
+  listbox: {
+    width: '100%',
+  },
+  option: {
+    scrollMarginBlockStart: '48px',
+  },
+});
+
+export const FilteringInDialog = (props: Partial<ListboxProps>) => {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const [isMultiselect, setIsMultiselect] = React.useState(props.multiselect);
+  const [selectedOptions, setSelectedOptions] = React.useState(props.selectedOptions ?? []);
+  const [dialogSelectedOptions, setDialogSelectedOptions] = React.useState(props.selectedOptions ?? []);
+
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+  const [filter, setFilter] = React.useState('');
+
+  const filteredOptions = React.useMemo(() => {
+    return ['Bear', 'Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Monkey', 'Parrot', 'Snake', 'Zebra'].filter(
+      o => o.toLowerCase().includes(filter.toLowerCase()) || filter.toLowerCase().includes(o.toLowerCase()),
+    );
+  }, [filter]);
+
+  React.useEffect(() => {
+    setSelectedOptions(props.selectedOptions ?? []);
+  }, [props.selectedOptions]);
+
+  React.useEffect(() => {
+    if (dialogOpen) {
+      inputRef.current?.focus();
+    }
+  }, [dialogOpen]);
+
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <Checkbox
+        label="Multiselect"
+        checked={isMultiselect}
+        onChange={(_, data) => setIsMultiselect(data.checked !== false)}
+      />
+      <Dialog open={dialogOpen} onOpenChange={(_, data) => setDialogOpen(data.open)}>
+        <DialogTrigger disableButtonEnhancement>
+          <MenuButton
+            appearance="outline"
+            className={styles.menuButton}
+            onClick={() => setDialogSelectedOptions(selectedOptions)}
+          >
+            {selectedOptions.length > 0 ? selectedOptions.join(', ') : 'Select a pet'}
+          </MenuButton>
+        </DialogTrigger>
+        <DialogSurface>
+          <DialogBody>
+            <DialogTitle>Select a pet</DialogTitle>
+            <DialogContent className={styles.listboxWrapper}>
+              <div className={styles.inputWrapper}>
+                <Input
+                  ref={inputRef}
+                  className={styles.input}
+                  placeholder="Filter pets"
+                  aria-label="Filter pets"
+                  autoFocus
+                  value={filter}
+                  onChange={(_, data) => setFilter(data.value)}
+                  contentAfter={
+                    filter.length > 0 ? (
+                      <Button
+                        appearance="transparent"
+                        icon={<DismissRegular />}
+                        title="Clear filter"
+                        onClick={() => setFilter('')}
+                      />
+                    ) : undefined
+                  }
+                />
+              </div>
+              <Listbox
+                {...props}
+                aria-label="Select a pet"
+                className={mergeClasses(styles.listbox, props.className)}
+                multiselect={isMultiselect}
+                selectedOptions={dialogSelectedOptions}
+                onOptionSelect={(e, data) => {
+                  setDialogSelectedOptions(data.selectedOptions);
+                }}
+              >
+                {filteredOptions.map(option => (
+                  <Option key={option} className={styles.option} disabled={option === 'Ferret'}>
+                    {option}
+                  </Option>
+                ))}
+              </Listbox>
+            </DialogContent>
+            <DialogActions>
+              <DialogTrigger>
+                <Button>Cancel</Button>
+              </DialogTrigger>
+              <Button
+                onClick={() => {
+                  setSelectedOptions(dialogSelectedOptions);
+                  setDialogOpen(false);
+                }}
+                disabled={!isMultiselect && dialogSelectedOptions.length === 0}
+              >
+                Done
+              </Button>
+            </DialogActions>
+          </DialogBody>
+        </DialogSurface>
+      </Dialog>
+    </div>
+  );
+};
diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
index 81a75f2682c3d..3d06a1dfaa0de 100644
--- a/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
@@ -9,17 +9,14 @@ import {
   DialogSurface,
   DialogTitle,
   DialogTrigger,
-  Input,
   Listbox,
   makeStyles,
   MenuButton,
   mergeClasses,
   Option,
   shorthands,
-  tokens,
 } from '@fluentui/react-components';
 import type { ListboxProps } from '@fluentui/react-components';
-import { DismissRegular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   root: {
@@ -37,52 +34,26 @@ const useStyles = makeStyles({
     maxHeight: '200px',
     ...shorthands.overflow('hidden', 'auto'),
   },
-  inputWrapper: {
-    display: 'flex',
-    alignItems: 'center',
-    position: 'sticky',
-    top: '-4px',
-    backgroundColor: tokens.colorNeutralBackground1,
-    zIndex: 1,
-    ...shorthands.margin('-4px', '-4px', '0px'),
-    ...shorthands.padding('4px', '4px', '8px'),
-  },
   input: {
     width: '100%',
   },
   listbox: {
     width: '100%',
   },
-  option: {
-    scrollMarginBlockStart: '48px',
-  },
 });
 
 export const InDialog = (props: Partial<ListboxProps>) => {
-  const inputRef = React.useRef<HTMLInputElement>(null);
   const [isMultiselect, setIsMultiselect] = React.useState(props.multiselect);
   const [selectedOptions, setSelectedOptions] = React.useState(props.selectedOptions ?? []);
   const [dialogSelectedOptions, setDialogSelectedOptions] = React.useState(props.selectedOptions ?? []);
 
   const [dialogOpen, setDialogOpen] = React.useState(false);
-  const [filter, setFilter] = React.useState('');
-
-  const filteredOptions = React.useMemo(() => {
-    return ['Bear', 'Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Monkey', 'Parrot', 'Snake', 'Zebra'].filter(
-      o => o.toLowerCase().includes(filter.toLowerCase()) || filter.toLowerCase().includes(o.toLowerCase()),
-    );
-  }, [filter]);
+  const options = ['Bear', 'Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Monkey', 'Parrot', 'Snake', 'Zebra'];
 
   React.useEffect(() => {
     setSelectedOptions(props.selectedOptions ?? []);
   }, [props.selectedOptions]);
 
-  React.useEffect(() => {
-    if (dialogOpen) {
-      inputRef.current?.focus();
-    }
-  }, [dialogOpen]);
-
   const styles = useStyles();
   return (
     <div className={styles.root}>
@@ -105,27 +76,6 @@ export const InDialog = (props: Partial<ListboxProps>) => {
           <DialogBody>
             <DialogTitle>Select a pet</DialogTitle>
             <DialogContent className={styles.listboxWrapper}>
-              <div className={styles.inputWrapper}>
-                <Input
-                  ref={inputRef}
-                  className={styles.input}
-                  placeholder="Filter pets"
-                  aria-label="Filter pets"
-                  autoFocus
-                  value={filter}
-                  onChange={(_, data) => setFilter(data.value)}
-                  contentAfter={
-                    filter.length > 0 ? (
-                      <Button
-                        appearance="transparent"
-                        icon={<DismissRegular />}
-                        title="Clear filter"
-                        onClick={() => setFilter('')}
-                      />
-                    ) : undefined
-                  }
-                />
-              </div>
               <Listbox
                 {...props}
                 aria-label="Select a pet"
@@ -136,8 +86,8 @@ export const InDialog = (props: Partial<ListboxProps>) => {
                   setDialogSelectedOptions(data.selectedOptions);
                 }}
               >
-                {filteredOptions.map(option => (
-                  <Option key={option} className={styles.option} disabled={option === 'Ferret'}>
+                {options.map(option => (
+                  <Option key={option} disabled={option === 'Ferret'}>
                     {option}
                   </Option>
                 ))}
diff --git a/packages/react-components/react-combobox/stories/Listbox/index.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/index.stories.tsx
index 85b63aa65d56b..e72da44a48146 100644
--- a/packages/react-components/react-combobox/stories/Listbox/index.stories.tsx
+++ b/packages/react-components/react-combobox/stories/Listbox/index.stories.tsx
@@ -7,6 +7,7 @@ export { Default } from './ListboxDefault.stories';
 export { Multiselect } from './ListboxMultiselect.stories';
 export { Filtering } from './ListboxFiltering.stories';
 export { InDialog } from './ListboxInDialog.stories';
+export { FilteringInDialog } from './ListboxFilteringInDialog.stories';
 
 export default {
   title: 'Components/Listbox',

From fd02a62c424ecb66c90d9500664ea2c67e642009 Mon Sep 17 00:00:00 2001
From: Steven Countryman <stevenco@microsoft.com>
Date: Tue, 23 Apr 2024 17:08:40 -0700
Subject: [PATCH 06/12] Adding popover story

---
 .../ListboxFilteringInDialog.stories.tsx      |  13 +-
 .../ListboxFilteringInPopover.stories.tsx     | 163 ++++++++++++++++++
 .../Listbox/ListboxInDialog.stories.tsx       |  13 +-
 .../stories/Listbox/index.stories.tsx         |   1 +
 4 files changed, 178 insertions(+), 12 deletions(-)
 create mode 100644 packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInPopover.stories.tsx

diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInDialog.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInDialog.stories.tsx
index 112fde7d96d96..c68832b079847 100644
--- a/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInDialog.stories.tsx
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInDialog.stories.tsx
@@ -62,7 +62,7 @@ export const FilteringInDialog = (props: Partial<ListboxProps>) => {
   const inputRef = React.useRef<HTMLInputElement>(null);
   const [isMultiselect, setIsMultiselect] = React.useState(props.multiselect);
   const [selectedOptions, setSelectedOptions] = React.useState(props.selectedOptions ?? []);
-  const [dialogSelectedOptions, setDialogSelectedOptions] = React.useState(props.selectedOptions ?? []);
+  const [pendingSelectedOptions, setPendingSelectedOptions] = React.useState(props.selectedOptions ?? []);
 
   const [dialogOpen, setDialogOpen] = React.useState(false);
   const [filter, setFilter] = React.useState('');
@@ -96,7 +96,7 @@ export const FilteringInDialog = (props: Partial<ListboxProps>) => {
           <MenuButton
             appearance="outline"
             className={styles.menuButton}
-            onClick={() => setDialogSelectedOptions(selectedOptions)}
+            onClick={() => setPendingSelectedOptions(selectedOptions)}
           >
             {selectedOptions.length > 0 ? selectedOptions.join(', ') : 'Select a pet'}
           </MenuButton>
@@ -131,9 +131,9 @@ export const FilteringInDialog = (props: Partial<ListboxProps>) => {
                 aria-label="Select a pet"
                 className={mergeClasses(styles.listbox, props.className)}
                 multiselect={isMultiselect}
-                selectedOptions={dialogSelectedOptions}
+                selectedOptions={pendingSelectedOptions}
                 onOptionSelect={(e, data) => {
-                  setDialogSelectedOptions(data.selectedOptions);
+                  setPendingSelectedOptions(data.selectedOptions);
                 }}
               >
                 {filteredOptions.map(option => (
@@ -148,11 +148,12 @@ export const FilteringInDialog = (props: Partial<ListboxProps>) => {
                 <Button>Cancel</Button>
               </DialogTrigger>
               <Button
+                appearance="primary"
                 onClick={() => {
-                  setSelectedOptions(dialogSelectedOptions);
+                  setSelectedOptions(pendingSelectedOptions);
                   setDialogOpen(false);
                 }}
-                disabled={!isMultiselect && dialogSelectedOptions.length === 0}
+                disabled={!isMultiselect && pendingSelectedOptions.length === 0}
               >
                 Done
               </Button>
diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInPopover.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInPopover.stories.tsx
new file mode 100644
index 0000000000000..da0e45e7ede41
--- /dev/null
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInPopover.stories.tsx
@@ -0,0 +1,163 @@
+import * as React from 'react';
+import {
+  Button,
+  Checkbox,
+  Input,
+  Listbox,
+  makeStyles,
+  MenuButton,
+  mergeClasses,
+  Option,
+  Popover,
+  PopoverSurface,
+  PopoverTrigger,
+  shorthands,
+  tokens,
+} from '@fluentui/react-components';
+import type { ListboxProps } from '@fluentui/react-components';
+import { DismissRegular } from '@fluentui/react-icons';
+
+const useStyles = makeStyles({
+  root: {
+    // Stack the label above the field with a gap
+    display: 'grid',
+    gridTemplateRows: 'repeat(1fr)',
+    justifyItems: 'start',
+    ...shorthands.gap('2px'),
+    maxWidth: '400px',
+  },
+  menuButton: {
+    justifyContent: 'space-between',
+  },
+  listboxWrapper: {
+    maxHeight: '200px',
+    marginBottom: '8px',
+    ...shorthands.overflow('hidden', 'auto'),
+  },
+  inputWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'sticky',
+    top: '-4px',
+    backgroundColor: tokens.colorNeutralBackground1,
+    zIndex: 1,
+    ...shorthands.margin('-4px', '-4px', '0px'),
+    ...shorthands.padding('4px', '4px', '8px'),
+  },
+  input: {
+    width: '100%',
+  },
+  listbox: {
+    width: '100%',
+  },
+  option: {
+    scrollMarginBlockStart: '48px',
+  },
+  doneButton: {
+    width: '100%',
+  },
+});
+
+export const FilteringInPopover = (props: Partial<ListboxProps>) => {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const [isMultiselect, setIsMultiselect] = React.useState(props.multiselect);
+  const [selectedOptions, setSelectedOptions] = React.useState(props.selectedOptions ?? []);
+  const [pendingSelectedOptions, setPendingSelectedOptions] = React.useState(props.selectedOptions ?? []);
+
+  const [popoverOpen, setPopoverOpen] = React.useState(false);
+  const [filter, setFilter] = React.useState('');
+
+  const filteredOptions = React.useMemo(() => {
+    return ['Bear', 'Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Monkey', 'Parrot', 'Snake', 'Zebra'].filter(
+      o => o.toLowerCase().includes(filter.toLowerCase()) || filter.toLowerCase().includes(o.toLowerCase()),
+    );
+  }, [filter]);
+
+  React.useEffect(() => {
+    setSelectedOptions(props.selectedOptions ?? []);
+  }, [props.selectedOptions]);
+
+  React.useEffect(() => {
+    if (popoverOpen) {
+      inputRef.current?.focus();
+    }
+  }, [popoverOpen]);
+
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <Checkbox
+        label="Multiselect"
+        checked={isMultiselect}
+        onChange={(_, data) => setIsMultiselect(data.checked !== false)}
+      />
+      <Popover
+        open={popoverOpen}
+        onOpenChange={(_, data) => setPopoverOpen(data.open)}
+        positioning={{ align: 'start', position: 'below' }}
+      >
+        <PopoverTrigger disableButtonEnhancement>
+          <MenuButton
+            appearance="outline"
+            className={styles.menuButton}
+            onClick={() => setPendingSelectedOptions(selectedOptions)}
+          >
+            {selectedOptions.length > 0 ? selectedOptions.join(', ') : 'Select a pet'}
+          </MenuButton>
+        </PopoverTrigger>
+        <PopoverSurface tabIndex={-1}>
+          <div className={styles.listboxWrapper}>
+            <div className={styles.inputWrapper}>
+              <Input
+                ref={inputRef}
+                className={styles.input}
+                placeholder="Filter pets"
+                aria-label="Filter pets"
+                autoFocus
+                value={filter}
+                onChange={(_, data) => setFilter(data.value)}
+                contentAfter={
+                  filter.length > 0 ? (
+                    <Button
+                      appearance="transparent"
+                      icon={<DismissRegular />}
+                      title="Clear filter"
+                      onClick={() => setFilter('')}
+                    />
+                  ) : undefined
+                }
+              />
+            </div>
+            <Listbox
+              {...props}
+              aria-label="Select a pet"
+              className={mergeClasses(styles.listbox, props.className)}
+              multiselect={isMultiselect}
+              selectedOptions={pendingSelectedOptions}
+              onOptionSelect={(e, data) => {
+                setPendingSelectedOptions(data.selectedOptions);
+              }}
+            >
+              {filteredOptions.map(option => (
+                <Option key={option} className={styles.option} disabled={option === 'Ferret'}>
+                  {option}
+                </Option>
+              ))}
+            </Listbox>
+          </div>
+          <Button
+            appearance="primary"
+            className={styles.doneButton}
+            onClick={() => {
+              setSelectedOptions(pendingSelectedOptions);
+              setPopoverOpen(false);
+            }}
+            disabled={!isMultiselect && pendingSelectedOptions.length === 0}
+          >
+            Done
+          </Button>
+        </PopoverSurface>
+      </Popover>
+    </div>
+  );
+};
diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
index 3d06a1dfaa0de..13d1b2ccffb21 100644
--- a/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
@@ -45,7 +45,7 @@ const useStyles = makeStyles({
 export const InDialog = (props: Partial<ListboxProps>) => {
   const [isMultiselect, setIsMultiselect] = React.useState(props.multiselect);
   const [selectedOptions, setSelectedOptions] = React.useState(props.selectedOptions ?? []);
-  const [dialogSelectedOptions, setDialogSelectedOptions] = React.useState(props.selectedOptions ?? []);
+  const [pendingSelectedOptions, setPendingSelectedOptions] = React.useState(props.selectedOptions ?? []);
 
   const [dialogOpen, setDialogOpen] = React.useState(false);
   const options = ['Bear', 'Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Monkey', 'Parrot', 'Snake', 'Zebra'];
@@ -67,7 +67,7 @@ export const InDialog = (props: Partial<ListboxProps>) => {
           <MenuButton
             appearance="outline"
             className={styles.menuButton}
-            onClick={() => setDialogSelectedOptions(selectedOptions)}
+            onClick={() => setPendingSelectedOptions(selectedOptions)}
           >
             {selectedOptions.length > 0 ? selectedOptions.join(', ') : 'Select a pet'}
           </MenuButton>
@@ -81,9 +81,9 @@ export const InDialog = (props: Partial<ListboxProps>) => {
                 aria-label="Select a pet"
                 className={mergeClasses(styles.listbox, props.className)}
                 multiselect={isMultiselect}
-                selectedOptions={dialogSelectedOptions}
+                selectedOptions={pendingSelectedOptions}
                 onOptionSelect={(e, data) => {
-                  setDialogSelectedOptions(data.selectedOptions);
+                  setPendingSelectedOptions(data.selectedOptions);
                 }}
               >
                 {options.map(option => (
@@ -98,11 +98,12 @@ export const InDialog = (props: Partial<ListboxProps>) => {
                 <Button>Cancel</Button>
               </DialogTrigger>
               <Button
+                appearance="primary"
                 onClick={() => {
-                  setSelectedOptions(dialogSelectedOptions);
+                  setSelectedOptions(pendingSelectedOptions);
                   setDialogOpen(false);
                 }}
-                disabled={!isMultiselect && dialogSelectedOptions.length === 0}
+                disabled={!isMultiselect && pendingSelectedOptions.length === 0}
               >
                 Done
               </Button>
diff --git a/packages/react-components/react-combobox/stories/Listbox/index.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/index.stories.tsx
index e72da44a48146..2a12f16d05465 100644
--- a/packages/react-components/react-combobox/stories/Listbox/index.stories.tsx
+++ b/packages/react-components/react-combobox/stories/Listbox/index.stories.tsx
@@ -8,6 +8,7 @@ export { Multiselect } from './ListboxMultiselect.stories';
 export { Filtering } from './ListboxFiltering.stories';
 export { InDialog } from './ListboxInDialog.stories';
 export { FilteringInDialog } from './ListboxFilteringInDialog.stories';
+export { FilteringInPopover } from './ListboxFilteringInPopover.stories';
 
 export default {
   title: 'Components/Listbox',

From 47789bc3988e3c2a3df3e315e68234a3a331d32a Mon Sep 17 00:00:00 2001
From: Steven Countryman <stevenco@microsoft.com>
Date: Tue, 23 Apr 2024 18:45:34 -0700
Subject: [PATCH 07/12] Fixing multiselect switch bug

---
 .../stories/Listbox/ListboxFilteringInDialog.stories.tsx      | 4 ++++
 .../stories/Listbox/ListboxFilteringInPopover.stories.tsx     | 4 ++++
 .../stories/Listbox/ListboxInDialog.stories.tsx               | 4 ++++
 3 files changed, 12 insertions(+)

diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInDialog.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInDialog.stories.tsx
index c68832b079847..e1f68c0df1e6e 100644
--- a/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInDialog.stories.tsx
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInDialog.stories.tsx
@@ -77,6 +77,10 @@ export const FilteringInDialog = (props: Partial<ListboxProps>) => {
     setSelectedOptions(props.selectedOptions ?? []);
   }, [props.selectedOptions]);
 
+  React.useEffect(() => {
+    setSelectedOptions(selection => (selection[0] ? [selection[0]] : []));
+  }, [isMultiselect]);
+
   React.useEffect(() => {
     if (dialogOpen) {
       inputRef.current?.focus();
diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInPopover.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInPopover.stories.tsx
index da0e45e7ede41..682520ae205aa 100644
--- a/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInPopover.stories.tsx
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInPopover.stories.tsx
@@ -77,6 +77,10 @@ export const FilteringInPopover = (props: Partial<ListboxProps>) => {
     setSelectedOptions(props.selectedOptions ?? []);
   }, [props.selectedOptions]);
 
+  React.useEffect(() => {
+    setSelectedOptions(selection => (selection[0] ? [selection[0]] : []));
+  }, [isMultiselect]);
+
   React.useEffect(() => {
     if (popoverOpen) {
       inputRef.current?.focus();
diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
index 13d1b2ccffb21..2ad5dd2000c54 100644
--- a/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
@@ -54,6 +54,10 @@ export const InDialog = (props: Partial<ListboxProps>) => {
     setSelectedOptions(props.selectedOptions ?? []);
   }, [props.selectedOptions]);
 
+  React.useEffect(() => {
+    setSelectedOptions(selection => (selection[0] ? [selection[0]] : []));
+  }, [isMultiselect]);
+
   const styles = useStyles();
   return (
     <div className={styles.root}>

From 6475828ef52dd5939e118321db718cb7a758f278 Mon Sep 17 00:00:00 2001
From: Steven Countryman <stevenco@microsoft.com>
Date: Wed, 24 Apr 2024 06:40:30 -0700
Subject: [PATCH 08/12] Making suggested PR changes plus adding in memorization
 logic and new unit test

---
 .../react-combobox/src/components/Listbox/useListbox.ts          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts b/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts
index 0d9753bbfc944..d94197062034f 100644
--- a/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts
+++ b/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts
@@ -51,6 +51,7 @@ export const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElem
   const activeDescendantContext = useActiveDescendantContext();
   const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();
   const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;
+  const lastActiveDescendentId = React.useRef<string>();
 
   const { clearSelection, selectedOptions, selectOption } = useSelection(props);
 

From abe730c5dac29daa73db1fb542a5ec78e6820e9b Mon Sep 17 00:00:00 2001
From: stevencomsft <105799836+stevencomsft@users.noreply.github.com>
Date: Thu, 25 Apr 2024 01:34:50 -0700
Subject: [PATCH 09/12] fix(react-listbox): Fixing initial keyboard focus
 issues with unparented listbox (#31140)

---
 .../react-combobox/src/components/Listbox/useListbox.ts          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts b/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts
index d94197062034f..0d9753bbfc944 100644
--- a/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts
+++ b/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts
@@ -51,7 +51,6 @@ export const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElem
   const activeDescendantContext = useActiveDescendantContext();
   const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();
   const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;
-  const lastActiveDescendentId = React.useRef<string>();
 
   const { clearSelection, selectedOptions, selectOption } = useSelection(props);
 

From 4ef85703f390653ec3ce9df6966505cbf3cb7c23 Mon Sep 17 00:00:00 2001
From: Steven Countryman <stevenco@microsoft.com>
Date: Thu, 25 Apr 2024 16:04:52 -0700
Subject: [PATCH 10/12] Fixing focus in docs

---
 .../stories/Listbox/ListboxFilteringInDialog.stories.tsx    | 4 ++--
 .../stories/Listbox/ListboxFilteringInPopover.stories.tsx   | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInDialog.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInDialog.stories.tsx
index e1f68c0df1e6e..06521e962b0e9 100644
--- a/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInDialog.stories.tsx
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInDialog.stories.tsx
@@ -83,7 +83,7 @@ export const FilteringInDialog = (props: Partial<ListboxProps>) => {
 
   React.useEffect(() => {
     if (dialogOpen) {
-      inputRef.current?.focus();
+      inputRef.current?.focus({ preventScroll: true });
     }
   }, [dialogOpen]);
 
@@ -115,7 +115,7 @@ export const FilteringInDialog = (props: Partial<ListboxProps>) => {
                   className={styles.input}
                   placeholder="Filter pets"
                   aria-label="Filter pets"
-                  autoFocus
+                  autoFocus={false}
                   value={filter}
                   onChange={(_, data) => setFilter(data.value)}
                   contentAfter={
diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInPopover.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInPopover.stories.tsx
index 682520ae205aa..ecfb7a05989a6 100644
--- a/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInPopover.stories.tsx
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInPopover.stories.tsx
@@ -83,7 +83,7 @@ export const FilteringInPopover = (props: Partial<ListboxProps>) => {
 
   React.useEffect(() => {
     if (popoverOpen) {
-      inputRef.current?.focus();
+      inputRef.current?.focus({ preventScroll: true });
     }
   }, [popoverOpen]);
 
@@ -98,7 +98,7 @@ export const FilteringInPopover = (props: Partial<ListboxProps>) => {
       <Popover
         open={popoverOpen}
         onOpenChange={(_, data) => setPopoverOpen(data.open)}
-        positioning={{ align: 'start', position: 'below' }}
+        positioning={{ align: 'start' }}
       >
         <PopoverTrigger disableButtonEnhancement>
           <MenuButton
@@ -117,7 +117,7 @@ export const FilteringInPopover = (props: Partial<ListboxProps>) => {
                 className={styles.input}
                 placeholder="Filter pets"
                 aria-label="Filter pets"
-                autoFocus
+                autoFocus={false}
                 value={filter}
                 onChange={(_, data) => setFilter(data.value)}
                 contentAfter={

From 1345e66b33e1ec5a5090c42db3455cc0e03ca041 Mon Sep 17 00:00:00 2001
From: Steven Countryman <stevenco@microsoft.com>
Date: Thu, 16 May 2024 21:01:54 -0700
Subject: [PATCH 11/12] Inverting logic to use pointer events to ignore focus
 logic rather than keyboard logic

---
 .../src/components/Listbox/useListbox.ts            | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts b/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts
index 27f144bafbde3..846d5a2926ad0 100644
--- a/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts
+++ b/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts
@@ -77,6 +77,8 @@ export const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElem
 
   const { clearSelection, selectedOptions, selectOption } = useSelection(props);
 
+  const isPointerFocusRef = React.useRef(false);
+
   const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
     const action = getDropdownActionFromKey(event, { open: true });
     const activeOptionId = activeDescendantController.active();
@@ -112,7 +114,17 @@ export const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElem
     }
   };
 
+  const onPointerDown = () => {
+    isPointerFocusRef.current = true;
+  };
+
   const onFocus = (_event: React.FocusEvent<HTMLElement>) => {
+    // skip if pointer-originated focus
+    if (isPointerFocusRef.current) {
+      isPointerFocusRef.current = false;
+      return;
+    }
+
     if (hasParentActiveDescendantContext || activeDescendantController.active()) {
       return;
     }
@@ -188,6 +200,7 @@ export const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElem
   };
 
   state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));
+  state.root.onPointerDown = useEventCallback(mergeCallbacks(state.root.onPointerDown, onPointerDown));
   state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));
   state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));
 

From 99b050a2bb7c9405dd7de2df0bc9f66666866d78 Mon Sep 17 00:00:00 2001
From: Steven Countryman <stevenco@microsoft.com>
Date: Fri, 17 May 2024 13:03:32 -0700
Subject: [PATCH 12/12] resetting listbox

---
 .../src/components/Listbox/useListbox.ts            | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts b/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts
index 846d5a2926ad0..27f144bafbde3 100644
--- a/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts
+++ b/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts
@@ -77,8 +77,6 @@ export const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElem
 
   const { clearSelection, selectedOptions, selectOption } = useSelection(props);
 
-  const isPointerFocusRef = React.useRef(false);
-
   const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
     const action = getDropdownActionFromKey(event, { open: true });
     const activeOptionId = activeDescendantController.active();
@@ -114,17 +112,7 @@ export const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElem
     }
   };
 
-  const onPointerDown = () => {
-    isPointerFocusRef.current = true;
-  };
-
   const onFocus = (_event: React.FocusEvent<HTMLElement>) => {
-    // skip if pointer-originated focus
-    if (isPointerFocusRef.current) {
-      isPointerFocusRef.current = false;
-      return;
-    }
-
     if (hasParentActiveDescendantContext || activeDescendantController.active()) {
       return;
     }
@@ -200,7 +188,6 @@ export const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElem
   };
 
   state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));
-  state.root.onPointerDown = useEventCallback(mergeCallbacks(state.root.onPointerDown, onPointerDown));
   state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));
   state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));