From a51ab238e372616a34743dd710f1319014d75063 Mon Sep 17 00:00:00 2001
From: mikeldking <mikeldking@gmail.com>
Date: Tue, 12 Apr 2022 20:17:07 -0600
Subject: [PATCH 1/3] Fix scrolling on picker

---
 src/dropdown/DropdownButton.tsx |  4 +++-
 src/dropdown/DropdownMenu.tsx   |  3 ++-
 src/listbox/ListBoxBase.tsx     |  2 +-
 src/picker/Picker.tsx           |  2 ++
 stories/Picker.stories.tsx      | 30 ++++++++++++++++++++++++++++++
 5 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/dropdown/DropdownButton.tsx b/src/dropdown/DropdownButton.tsx
index 520b0ddf..c9600c41 100644
--- a/src/dropdown/DropdownButton.tsx
+++ b/src/dropdown/DropdownButton.tsx
@@ -20,6 +20,7 @@ export interface DropdownButtonProps extends AddonableProps {
   isQuiet?: boolean;
   /** Whether the button is disabled. */
   isDisabled?: boolean;
+  isActive?: boolean;
   /** The content to display in the button. */
   children?: ReactNode;
   style?: CSSProperties;
@@ -90,6 +91,7 @@ function DropdownButton(
   const {
     isQuiet = false,
     isDisabled,
+    isActive,
     children,
     style,
     addonBefore,
@@ -103,7 +105,7 @@ function DropdownButton(
       {...mergeProps(buttonProps, hoverProps, otherProps)}
       ref={domRef}
       className={classNames('ac-dropdown-button', {
-        'is-active': isPressed,
+        'is-active': isActive || isPressed,
         'is-disabled': isDisabled,
         'is-hovered': isHovered,
       })}
diff --git a/src/dropdown/DropdownMenu.tsx b/src/dropdown/DropdownMenu.tsx
index 60f10c1d..8a6ec3f9 100644
--- a/src/dropdown/DropdownMenu.tsx
+++ b/src/dropdown/DropdownMenu.tsx
@@ -26,7 +26,8 @@ export function DropdownMenu({
         padding: ${isPadded ? theme.spacing.padding8 : 0}px;
         box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
         border: 1px solid ${theme.components.dropdown.borderColor};
-        overflow: hidden;
+
+        max-height: inherit;
       `}
       style={style}
     >
diff --git a/src/listbox/ListBoxBase.tsx b/src/listbox/ListBoxBase.tsx
index c76172e4..5e2ae54d 100644
--- a/src/listbox/ListBoxBase.tsx
+++ b/src/listbox/ListBoxBase.tsx
@@ -139,7 +139,7 @@ function ListBoxBase<T>(
         focusedKey={state.selectionManager.focusedKey}
         sizeToFit="height"
         scrollDirection="vertical"
-        className="ac-Menu"
+        className="ac-menu"
         layout={layout}
         collection={state.collection}
         // @ts-ignore assume there is a header
diff --git a/src/picker/Picker.tsx b/src/picker/Picker.tsx
index ef6e3ba5..caf6c3fc 100644
--- a/src/picker/Picker.tsx
+++ b/src/picker/Picker.tsx
@@ -101,6 +101,8 @@ function Picker<T extends object>(
         // @ts-ignore
         layout={layout}
         state={state}
+        // Set max height: inherit so dropdown menu scrolling works
+        style={{ maxHeight: 'inherit' }}
         isLoading={isLoadingMore}
         onLoadMore={props.onLoadMore}
       />
diff --git a/stories/Picker.stories.tsx b/stories/Picker.stories.tsx
index 86817d2a..0b2db7df 100644
--- a/stories/Picker.stories.tsx
+++ b/stories/Picker.stories.tsx
@@ -211,3 +211,33 @@ const ItemsViaProps: Story<PickerProps<string>> = args => {
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing
 export const itemsViaProps = ItemsViaProps.bind({});
+
+let longList = [];
+
+for (var i = 0; i < 100; i++) {
+  longList.push({ id: i, name: `Item ${i}` });
+}
+
+const Long: Story<PickerProps<string>> = args => {
+  const [frequency, setFrequency] = React.useState<string>('rarely');
+  return (
+    <Provider>
+      <Picker
+        addonBefore={'Frequency'}
+        {...args}
+        selectedKey={frequency}
+        onSelectionChange={selected => setFrequency(selected as string)}
+        items={longList}
+        isOpen
+      >
+        {item => <Item>{item.name}</Item>}
+      </Picker>
+      <br />
+      <Text>Selected Value: {frequency}</Text>
+    </Provider>
+  );
+};
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const long = Long.bind({});

From ef682479dc1d4510911452e2ca406c2d7dd7962b Mon Sep 17 00:00:00 2001
From: mikeldking <mikeldking@gmail.com>
Date: Tue, 12 Apr 2022 20:21:44 -0600
Subject: [PATCH 2/3] Cleanup

---
 src/dropdown/DropdownMenu.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/dropdown/DropdownMenu.tsx b/src/dropdown/DropdownMenu.tsx
index 8a6ec3f9..873d20aa 100644
--- a/src/dropdown/DropdownMenu.tsx
+++ b/src/dropdown/DropdownMenu.tsx
@@ -26,7 +26,6 @@ export function DropdownMenu({
         padding: ${isPadded ? theme.spacing.padding8 : 0}px;
         box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
         border: 1px solid ${theme.components.dropdown.borderColor};
-
         max-height: inherit;
       `}
       style={style}

From 18cff1ca7f962e2f462e0897b1c7a00472305022 Mon Sep 17 00:00:00 2001
From: mikeldking <mikeldking@gmail.com>
Date: Tue, 12 Apr 2022 20:25:51 -0600
Subject: [PATCH 3/3] v0.4.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a5b85620..6920d555 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.4.6",
+  "version": "0.4.7",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",