added maxHeight prop to support scrollable popover for Select faux

component
vimeo · Nov 13, 2023 · 91442c8 · 91442c8
1 parent cba7ed8
commit 91442c8
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 1 deletion.
diff --git a/src/components/inputs/Select/Select.props.story.tsx b/src/components/inputs/Select/Select.props.story.tsx
@@ -238,6 +238,36 @@ export function FauxExternalState({ args }) {
 }
 FauxExternalState.storyName = 'faux (external state)';
 
+export function FauxMaxHeight({ args }) {
+  const [value, valueSet] = useState(null);
+
+  function onChange(event) {
+    valueSet(event.target.value);
+    console.log('Selected Option', event.target.value, event);
+  }
+
+  return (
+    <Layout.StoryVertical>
+      <Select
+        {...args}
+        label="Faux select with maximum height"
+        onChange={onChange}
+        placeholder="Please select an option."
+        value={value}
+        faux
+        maxHeight="300px"
+      >
+        {Array.from({ length: 20 }, (_, index) => (
+          <Select.Option key={index} value={index}>{`Option ${
+            index + 1
+          }`}</Select.Option>
+        ))}
+      </Select>
+    </Layout.StoryVertical>
+  );
+}
+FauxMaxHeight.storyName = 'faux (maximum height)';
+
 const UpgradeBadge = (
   <Badge
     // @ts-ignore

diff --git a/src/components/inputs/Select/Select.types.ts b/src/components/inputs/Select/Select.types.ts
@@ -26,6 +26,10 @@ export type Props = IrisInputProps<
      */
     size?: Sizes;
     value?: string | string[];
+    /**
+     * [default = '100%']
+     */
+    maxHeight?: string;
   },
   HTMLSelectElement
 >;

diff --git a/src/components/inputs/Select/SelectFaux.tsx b/src/components/inputs/Select/SelectFaux.tsx
@@ -39,6 +39,7 @@ export function SelectFaux({
   size = 'md',
   status,
   style,
+  maxHeight = '100%',
   value,
   ...props
 }: Props) {
@@ -113,7 +114,12 @@ export function SelectFaux({
     >
       <PopOver
         attach="bottom"
-        style={{ width, maxWidth: '100%' }}
+        style={{
+          width,
+          maxWidth: '100%',
+          maxHeight,
+          overflowY: 'scroll',
+        }}
         content={<div ref={popOverRef}>{content}</div>}
         active={disabled ? false : active}
       >