Replace the Select component with Autocomplete component on bigger lists

[jinzo]

Hi,

this PR replaces the non searchable Select component with searchable Autocomplete field on (potentially) longer selects. Like the Device(s) and Groups in Reports and Groups in the main page/maps filter. This makes it a lot easier to find and select the options you wish when there is a lot of options. I think it improves the user experience a lot. This is more or less a draft now, in sense that if this is acceptable I would extend this change to some other Selects (Timezone in User settings, Group in Device settings, Group in Group settings,...)

[tananaev]

Have you tested it to see if there are any glitches when you select some really long name? In mobile or desktop view.

[jinzo]

Hm, indeed it goes into two rows on multiple options. I guess before I investigate this - the question is what's the desired behaviour. Do we do it exactly like it was now - where (with multiple choices) all of them are in the same line and it does not wrap/you cannot see them (with this option, do we want to indicate how many are selected with the +1... like in screenshots above?). Or do we make the box autosize so you can always see all of the selected option (even when there is no focus)?

[tananaev]

For the report it definitely make sense to limit to one line. Otherwise it will look very odd.

[jinzo]

Yeah I mean, there is no 'ideal' solution, all of them have some tradeoffs. Either you don't see all the data or it looks weird because there is a lot of data displayed. What about something like this, so we display the first selected element and counter if there are more, and only a new line for text input when searching. When not focused displays only on one line without text input?

[jinzo]

Another option would be that we hide the selected devices on focus/open, and only display the text input. When closed/out of focus we display the selected devices like in above screenshot (so just that one line). This is the only feasible option if we want to keep it always in one line (even when inputting text). The selected devices are highlighted in the dropdown options too (so you can deselect them).

[tananaev]

Why can't we add search with the same way it's displayed now?

[jinzo]

We need to fit a text input somewhere (for the search texts). By default Autocomplete fits it in with the selected values / new line if you limit the amount of selected values. So the difference is that old Select had 2 components (selected values, list) whereas Autocomplete has 3 (selected values, list, search input for the list). Unfortunately there doesn't seem to be an easy option to move the search input to the list popup so that main selected values would remain in only 1 line.

And just a reminder, this is all for multiple choices, single choice does not have this problem.

[jinzo]

So I finally have some more time (or will in near future) to try to find a solution for this. As there doesen't seem to be an easy way to style the Autocomplete for multiple values so that it would not display in 2 lines when opened (see: https://github.com/traccar/traccar-web/pull/1189#issuecomment-1806079577) I would like to split this into two step solution. First implement regular autocomplete for all non-mutiple-values selects which is already implemented in some places but not the others - and then work on finding a good solution for the multiple value selects. What's do you think about that plan @tananaev ?

[tananaev]

Sounds good to me.