Typeahead | fit menu content feature (#161)

This PR aims to introduce a property that allows to fit the menu (MUI
paper) with the larger unbroken word option, in case is needed.

Author: Michele-Masciave

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- support to allow menu size to fit the longest option into `StaticTypeahead` and `AsyncTypeahead`, via `fitMenuContent`.
+
 ## [3.15.1] - 2026-01-12
 
 ### Fix

cypress/cypress/component/Typeahead/AsyncTypeaheadInput.cy.tsx

@@ -931,7 +931,6 @@ it("works with fixed options excluded", () => {
 });
 
 it("innerRef works correctly", () => {
-  const { simpleOptions } = generateOptions();
   const name = faker.random.alpha(10);
   const options = generateOptions();
 
@@ -964,3 +963,39 @@ it("innerRef works correctly", () => {
   cy.get("button[title=focus]").click();
   cy.get(`#${name}`).should("be.focused");
 });
+
+it("works with fitContentMenu", () => {
+  const name = faker.random.alpha(10);
+  const specificOptions = [
+    { label: "A Very Long Movie Title That Exceeds Normal Lengths", value: "1" },
+    { label: "The Lord of the Rings: The Return of the King", value: "2" },
+  ];
+
+  cy.mount(
+    <div className="p-4">
+      <Form
+        onSubmit={() => {
+          // Nothing to do
+        }}
+      >
+        <AsyncTypeaheadInput
+          style={{ width: 300 }}
+          queryFn={async (query: string) => await fetchMock(specificOptions, query, true)}
+          name={name}
+          label={name}
+          fitMenuContent
+        />
+      </Form>
+    </div>,
+  );
+
+  cy.get(`#${name}`).click();
+  cy.focused().type(specificOptions[0].label);
+  cy.get(".MuiInputBase-root").should("have.css", "width", "300px");
+  cy.get("div[role='presentation']").should(($div) => {
+    const popperWidth = $div.width() ?? 0;
+    const paperWidth = $div.find("div.MuiPaper-root").width() ?? 0;
+    expect(paperWidth).to.be.equal(popperWidth);
+    expect(popperWidth).to.be.greaterThan(300);
+  });
+});

cypress/cypress/component/Typeahead/StaticTypeaheadInput.cy.tsx

@@ -621,3 +621,37 @@ it("innerRef works correctly", () => {
   cy.get("button[title=focus]").click();
   cy.get(`#${name}`).should("be.focused");
 });
+
+it("works with fitContentMenu", () => {
+  const { simpleOptions } = generateOptions();
+  const name = faker.random.alpha(10);
+  const specificOptions = ["A Very Long Movie Title That Exceeds Normal Lengths", "The Lord of the Rings: The Return of the King"];
+
+  cy.mount(
+    <div className="p-4">
+      <Form
+        onSubmit={() => {
+          // Nothing to do
+        }}
+      >
+        <StaticTypeaheadInput
+          style={{ width: 300 }}
+          multiple
+          name={name}
+          label={name}
+          options={[...specificOptions, ...simpleOptions]}
+          fitMenuContent
+        />
+      </Form>
+    </div>,
+  );
+
+  cy.get(`#${name}`).click();
+  cy.get(".MuiInputBase-root").should("have.css", "width", "300px");
+  cy.get("div[role='presentation']").should(($div) => {
+    const popperWidth = $div.width() ?? 0;
+    const paperWidth = $div.find("div.MuiPaper-root").width() ?? 0;
+    expect(paperWidth).to.be.equal(popperWidth);
+    expect(popperWidth).to.be.greaterThan(300);
+  });
+});

src/index.ts

@@ -10,6 +10,7 @@ export * from "./lib/types/Form";
 export * from "./lib/DatePickerInput";
 export * from "./lib/ColorPickerInput";
 export * from "./lib/RatingInput";
+export * from "./lib/components/Typeahead/TypeaheadFitMenuPopper";
 export * from "./lib/helpers/dateUtils";
 export * from "./lib/helpers/form";
 export * from "./lib/helpers/mui";

src/lib/AsyncTypeaheadInput.tsx

@@ -19,6 +19,7 @@ import { useFormContext } from "./context/FormContext";
 import { TypeaheadTextField } from "./components/Typeahead/TypeaheadTextField";
 import { FormGroupLayout } from "./FormGroupLayout";
 import { LabelValueOption } from "./types/LabelValueOption";
+import { TypeaheadFitMenuPopper } from "./components/Typeahead/TypeaheadFitMenuPopper";
 
 interface AsyncTypeaheadInputRef {
   resetValues: () => void;
@@ -75,6 +76,7 @@ const AsyncTypeaheadInput = <T extends FieldValues>(props: AsyncTypeaheadInputPr
     autocompleteProps,
     fixedOptions,
     withFixedOptionsInValue = true,
+    fitMenuContent,
   } = props;
 
   const [options, setOptions] = useState<TypeaheadOptions>(defaultOptions);
@@ -145,6 +147,10 @@ const AsyncTypeaheadInput = <T extends FieldValues>(props: AsyncTypeaheadInputPr
       <Autocomplete<TypeaheadOption, boolean, boolean, boolean>
         {...autocompleteProps}
         {...field}
+        slots={{
+          popper: fitMenuContent ? TypeaheadFitMenuPopper : undefined,
+          ...autocompleteProps?.slots,
+        }}
         id={id}
         multiple={multiple}
         loading={isLoading}

src/lib/StaticTypeaheadInput.tsx

@@ -22,6 +22,7 @@ import {
 import { TypeaheadTextField } from "./components/Typeahead/TypeaheadTextField";
 import { FormGroupLayout } from "./FormGroupLayout";
 import { LabelValueOption } from "./types/LabelValueOption";
+import { TypeaheadFitMenuPopper } from "./components/Typeahead/TypeaheadFitMenuPopper";
 
 interface StaticTypeaheadInputProps<T extends FieldValues> extends CommonTypeaheadProps<T> {
   options: TypeaheadOptions;
@@ -66,6 +67,7 @@ const StaticTypeaheadInput = <T extends FieldValues>(props: StaticTypeaheadInput
     fixedOptions,
     withFixedOptionsInValue = true,
     innerRef,
+    fitMenuContent,
   } = props;
 
   const [page, setPage] = useState(1);
@@ -118,6 +120,10 @@ const StaticTypeaheadInput = <T extends FieldValues>(props: StaticTypeaheadInput
       <Autocomplete<TypeaheadOption, boolean, boolean, boolean>
         {...autocompleteProps}
         {...field}
+        slots={{
+          popper: fitMenuContent ? TypeaheadFitMenuPopper : undefined,
+          ...autocompleteProps?.slots,
+        }}
         id={id}
         multiple={multiple}
         groupBy={useGroupBy ? groupOptions : undefined}

src/lib/components/Typeahead/TypeaheadFitMenuPopper.tsx

@@ -0,0 +1,20 @@
+import Popper, { PopperProps } from "@mui/material/Popper";
+
+const TypeaheadFitMenuPopper = (props: PopperProps) => {
+  const { anchorEl } = props;
+
+  return (
+    <Popper
+      {...props}
+      style={{
+        // ensure popper is at least as wide as the input field
+        minWidth: (anchorEl as HTMLElement)?.clientWidth,
+        // ensure popper fits the longest option width
+        width: "fit-content",
+      }}
+      placement="bottom-start"
+    />
+  );
+};
+
+export { TypeaheadFitMenuPopper };

src/lib/types/Typeahead.ts

@@ -25,6 +25,7 @@ interface CommonTypeaheadProps<T extends FieldValues>
   fixedOptions?: TypeaheadOptions;
   withFixedOptionsInValue?: boolean;
   innerRef?: MutableRefObject<HTMLInputElement | null>;
+  fitMenuContent?: boolean;
   getOptionDisabled?: (option: TypeaheadOption) => boolean;
   onChange?: (selected: string | string[]) => void;
   onInputChange?: (text: string, reason: AutocompleteInputChangeReason) => void;