feat(filterable-select): add listMaxHeight prop support

Sage · Sep 2, 2022 · d37346f · d37346f
1 parent dc2bb43
commit d37346f
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 1 deletion.
diff --git a/src/components/select/filterable-select/filterable-select.component.js b/src/components/select/filterable-select/filterable-select.component.js
@@ -38,6 +38,7 @@ const FilterableSelect = React.forwardRef(
       noResultsMessage,
       disablePortal,
       listActionButton,
+      listMaxHeight,
       onListAction,
       isLoading,
       disabled,
@@ -504,6 +505,7 @@ const FilterableSelect = React.forwardRef(
         noResultsMessage={noResultsMessage}
         disablePortal={disablePortal}
         listActionButton={listActionButton}
+        listMaxHeight={listMaxHeight}
         onListAction={handleOnListAction}
         isLoading={isLoading}
         readOnly={readOnly}
@@ -587,6 +589,8 @@ FilterableSelect.propTypes = {
   onListScrollBottom: PropTypes.func,
   /** Overrides the default tooltip position */
   tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+  /** Maximum list height - defaults to 180 */
+  listMaxHeight: PropTypes.number,
   /** Placement of the select list in relation to the input element */
   listPlacement: PropTypes.oneOf([
     "auto",

diff --git a/src/components/select/filterable-select/filterable-select.d.ts b/src/components/select/filterable-select/filterable-select.d.ts
@@ -44,6 +44,8 @@ export interface FilterableSelectProps
   value?: string | Record<string, unknown>;
   /** Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
+  /** Maximum list height - defaults to 180 */
+  listMaxHeight?: number;
   /** Placement of the select list in relation to the input element */
   listPlacement?:
     | "auto"

diff --git a/src/components/select/filterable-select/filterable-select.spec.js b/src/components/select/filterable-select/filterable-select.spec.js
@@ -2,11 +2,15 @@ import React, { useRef } from "react";
 import { act } from "react-dom/test-utils";
 import { mount } from "enzyme";
 
-import { testStyledSystemMargin } from "../../../__spec_helper__/test-utils";
+import {
+  assertStyleMatch,
+  testStyledSystemMargin,
+} from "../../../__spec_helper__/test-utils";
 import FilterableSelect from "./filterable-select.component";
 import Textbox from "../../textbox";
 import Option from "../option/option.component";
 import SelectList from "../select-list/select-list.component";
+import { StyledSelectList } from "../select-list/select-list.style";
 import Button from "../../button";
 import Label from "../../../__internal__/label";
 import InputIconToggle from "../../../__internal__/input-icon-toggle";
@@ -45,6 +49,16 @@ describe("FilterableSelect", () => {
     expect(mockRef.current).toBe(wrapper.find("input").getDOMNode());
   });
 
+  describe("when listMaxHeight prop is provided", () => {
+    it("overrides default list max-height", () => {
+      mount(getSelect());
+      const wrapper = renderSelect({ listMaxHeight: 120, openOnFocus: true });
+
+      wrapper.find(Textbox).find('[type="dropdown"]').first().simulate("click");
+      assertStyleMatch({ maxHeight: "120px" }, wrapper.find(StyledSelectList));
+    });
+  });
+
   it("when text is passed in placeholder prop, input element in textbox uses it as placeholder text", () => {
     const placeholder = "foobaz";
     const wrapper = renderSelect({ placeholder });

diff --git a/src/components/select/filterable-select/filterable-select.stories.mdx b/src/components/select/filterable-select/filterable-select.stories.mdx
@@ -100,6 +100,33 @@ You can use `listPlacement` prop to set the position of the select list relative
   </Story>
 </Canvas>
 
+### List height
+
+You can use `listMaxHeight` prop to override default max height value of select list.
+
+<Canvas>
+  <Story name="list height">
+    <FilterableSelect
+      listMaxHeight={2000}
+      name="list height"
+      id="list-height"
+      label="List height"
+    >
+      <Option text="Amber" value="1" />
+      <Option text="Black" value="2" />
+      <Option text="Blue" value="3" />
+      <Option text="Brown" value="4" />
+      <Option text="Green" value="5" />
+      <Option text="Orange" value="6" />
+      <Option text="Pink" value="7" />
+      <Option text="Purple" value="8" />
+      <Option text="Red" value="9" />
+      <Option text="White" value="10" />
+      <Option text="Yellow" value="11" />
+    </FilterableSelect>
+  </Story>
+</Canvas>
+
 ### Controlled Usage
 
 <Canvas>

diff --git a/src/components/select/filterable-select/filterable-select.test.js b/src/components/select/filterable-select/filterable-select.test.js
@@ -1030,6 +1030,17 @@ context("Tests for Filterable Select component", () => {
       );
     });
 
+    it("should render option list with proper maxHeight value", () => {
+      const maxHeight = 200;
+      CypressMountWithProviders(
+        <FilterableSelectComponent listMaxHeight={maxHeight} />
+      );
+      dropdownButton().click();
+      selectList()
+        .should("have.css", "max-height", `${maxHeight}px`)
+        .and("be.visible");
+    });
+
     it.each([
       ["top", "0px", "0px", "0px", "0px"],
       ["bottom", "600px", "0px", "0px", "0px"],