MultiSelect renders input value as a stringified array including the entire item objects, but it should display a readable value based on the selected option labels

[iamkyrylo]

Describe the bug

There are two main issues with the current approach:

• As a user with disabilities, I want to see the selected items in the combobox value, instead of a programmatic string.
• As a developer, I want to test selected options in a normal way:

describe('MultiSelect', () => {
    it('should allow selecting multiple options', async () => {
        const user = userEvent();
        render(<MultiSelect aria-label="Countries" options={countries} optionLabel="name" />);

        await user.click(screen.getByRole('combobox', { name: 'Countries' }));
        await screen.findByRole('listbox', { name: 'Countries' });

        await user.click(screen.getByRole('option', { name: 'Rome' }));
        await user.click(screen.getByRole('option', { name: 'London' }));

        expect(screen.getByRole('combobox', { name: 'Countries' })).toHaveValue('Rome, London');
    });
});

In my view, the input value string should consist of the option labels - the values the user sees on the screen. The following logic should be enough to fix this issue:

const getInputValue = (value = []) => {
    if (props.optionLabel && Array.isArray(value)) {
        return value.map((val) => getLabelByValue(val)).join(', ');
    }

    return value;
};

const inputProps = mergeProps(
    {
        ...otherProps,
        value: getInputValue(props.value),
    },
    ptm('input')
);

Reproducer

No response

System Information

primereact: latest
react: 18.3.1

Steps to reproduce the behavior

1. Open the basic example at PrimeReact MultiSelect Doc and choose a few options in the dropdown.
2. Open the browser devtools and check the input value.

Screenshot example:

Expected behavior