When a multiselect has several options selected it fails to properly select them in the UI. It has several different eratic results.

Here its what was selected:Here is the result:

After this happends, there are some strange issues with selection, if you try ti deselect something, then the selected list is broken:

Something is really wrong with the logic here, and I have issues with all Multiselects on the page. I can not provide the link as its not live yet.

I am using it in Laravel with Laravel-collective package so code is pretty simple:

<div class="">
                {!! Form::select('regions[]', $regions, $user->beekeeper->preferredRegionIds, [
                        'id' => 'regions',
                        'class' => 'mdb-select md-form colorful-select dropdown-primary',
                        'multiple',
                        'searchable' => trans('user.search-region'),
                        'data-placeholder' => trans('user.beekeeping.no-preference'),]) !!}
                {!! Form::label('regions', trans('user.settings.regions'),  ['class' => 'mdb-main-label']); !!}
                @error('regions')
                <div class="alert alert-danger mt-1">{{ $message }}</div>
                @enderror

I tried with loops to create HTML manually and it had the same result.

Here is a snippet, that illustrates the problems: https://mdbootstrap.com/snippets/jquery/sonicelo/1538523