Feature Request: Multi-Select Component

[bestickley]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Other

How is your app built?

Vite

Please describe your bug.

When using the component SelectField with the multiple attribute, if I add more than 3 options it overflows below the select box.

What's the expected behaviour?

Select box encapsulate all options when multiple is enabled.

Help us reproduce the bug!

See below

Code Snippet

<SelectField
        label="Components:"
        multiple
        placeholder="Select Components"
      >
        <option value="component-1">Component 1</option>
        <option value="component-2">Component 2</option>
        <option value="component-3">Component 3</option>
        <option value="component-3">Component 4</option>
        <option value="component-3">Component 5</option>
      </SelectField>

Additional information and screenshots

[zchenwei]

Thanks for bring this up! I would think of it more like a feature request versus a bug. We didn't consider the multiple use case when design SelectField

[bestickley]

@zchenwei, ah I see. Do you mind removing the "bug" label and adding "feature-request"? Thank you! I don't seem to be able to.

[zchenwei]

@zchenwei, ah I see. Do you mind removing the "bug" label and adding "feature-request"? Thank you! I don't seem to be able to.

Sure. There we go!

[rainbowfeathersfarm]

Hey All, in case anyone runs across this before it is implemented, I got help from someone on the Discord chat to add the following CSS to get it to work until then.

.amplify-select[multiple] { overflow: auto; }

Seems obvious after seeing it, but for someone like me who works more on the backend API side than the front end UI, it was very helpful for me.

[hbuchel]

To add to this, we should probably:

• hide the dropdown arrow when multiple attribute is used.
• Allow for setting a size (though unfortunately this clashes with our 'size' variant prop) so we might have to re-name it (selectSize or something). This is default behavior in HTML select element https://codepen.io/hbuchel/pen/ExGYxdE

https://codesandbox.io/p/sandbox/select-updates-4ws5vy?file=/src/App.tsx:4,17

[hbuchel]

Marking as completed; support for the multiple and size attributes were added in @aws-amplify/[email protected] Please see updated documentation