Textarea with dropdown (or multiline select)

[me21]

Question

Hello,

I would like to display a multiline select control. By default its contents is single line. Basically I would like to replace the inner input control with a textarea. Is it doable? I found nothing in the NiceGUI and Quasar docs so far.

[python-and-novella]

Like this?
https://quasar.dev/vue-components/popup-edit#textarea-qeditor

[me21]

No, the behavior of Select component is almost fine. It displays a dropdown list, it has search as I type, the only thing that I need is line wrapping, so that if the selected option is really long, its text would wrap to the next line instead of scrolling out of view.

If I do

myopts = {1: 'aaaaa', 2: 'aaaaaaaaaaaaaaaa', 3: 'aaaaaaa aaaaa aaaaaaaa aaaaaaa aaaaaaa aaaaaaaaaa'}
myselect = ui.select(myopts, value=1, new_value_mode='add-unique', on_change=lambda e: ui.notify(f'select value: {e.value}'))
with myselect.default_slot:
    ui.textarea('textarea').bind_value_from(myselect, backward=lambda v: myopts[v]).props('dense')
myselect2 = ui.select(myopts, value=1, new_value_mode='add-unique', on_change=lambda e: ui.notify(e.value)).bind_value(myselect)

the textarea is displayed next to the original input control. I would like to replace it instead.

[python-and-novella]

falkoschindler answers it.
#3342 (comment)

[me21]

Not exactly, he answers about wrapping the option text in the dropdown list. I need it to wrap in the select control when selected as well.

I would like the select control to display the selected option text like textarea does.

[python-and-novella]

ui.select([
    'Very long option that should wrap',
    'foo',
    'bar',
    'baz',
]).props('popup-content-class="max-w-[200px]"').classes('w-[200px]')

[me21]

Please try adding new_value_mode='add-unique' when constructing select. I think the wrapping won't work in that case.