How can I make AutocompleteInput or SelectArrayInput scrollable?

Question

I'm using the AutocompleteInput and SelectArrayInput from AOR framework and want to select from lots of items. Unfortunately, the menu doesn't fit properly on the screen.

How can I make the list scrollable?

Thanks in advance.

Answer 1

Based on Material UI documentation you can pass listStyle properties through options:

<ReferenceArrayInput label="Parts" source="partId" reference="parts" allowEmpty>
    <AutocompleteInput optionText="name"
       options={{ listStyle: { overflow: 'auto', maxHeight: 200}}} />
</ReferenceArrayInput>

Depending on your implementation you could also have the same behavior with SelectManyInput:

<ReferenceArrayInput label="Parts" source="partId" reference="parts" allowEmpty>
    <SelectManyInput optionText="name"
       options={{ listStyle: { overflow: 'auto', maxHeight: 200}}} />
</ReferenceArrayInput>

Material UI doc: http://www.material-ui.com/#/components/auto-complete Rest Admin doc: https://marmelab.com/admin-on-rest/Inputs.html#autocompleteinput

Something like that: