MultiSelect: Lack of Customization Option for Input Field

Describe the bug

Problem:

#1841 In the Multiselect component, there is an option to provide custom header and footer templates. However, by default, Multiselect displays an input field, and a dropdown appears upon clicking the input. Unfortunately, there is no option to customize the input field and display a button instead or anything else.

Current Behaviour:

Customization I want:

I didn't find any way to customize it, so I simply hid the input field using CSS and created a button. Upon clicking that button, I used inputRef to automatically click on the MultiSelect component to open the dropdown.

 const inputRef = useRef(null);
  const handleClick = () => {
    inputRef.current.click();
  };

<Button children="Test" onClick={handleClick} />
      <MultiSelect
        value={selected}
        onChange={e => handleSelect(e.value)}
        options={data}
        optionLabel="name"
        placeholder="Select Cities"
        maxSelectedLabels={3}
        className="w-[240px] text-sm font-normal relative -top-10"
        panelHeaderTemplate={HeaderTemplate}
        itemTemplate={itemTemplate}
        inputRef={inputRef}
      />
      

Reproducer

No response

PrimeReact version

10.5.0

React version

17.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome

Steps to reproduce the behavior

No response

Expected behavior

No response

Start with the MultiSelect component and its existing panelHeaderTemplate and inputRef customization points. Review how the input opens the dropdown, then determine an API for replacing or customizing that input with a button or other content while preserving selection behavior. Done means consumers can provide the requested control without hiding the input with CSS or triggering it through an external ref.