Fix scrolling on picker

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",

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,
       })}

src/dropdown/DropdownMenu.tsx

@@ -26,7 +26,7 @@ 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}
     >

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

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}
       />

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({});