@Findus23 opened this Issue on May 6th 2018 Member

I just wrote a plugin which allows switching between languages quickly. For this I created a UI_CONTROL_MULTI_SELECT with all languages (the same can be reproduced with https://plugins.matomo.org/RestrictLanguageSelection as I am using the same selector)

I can't really describe it (it feels a bit like Lights Out), so here is a video of a try to add French to German:
high quality

gif

@tsteur commented on May 6th 2018 Member

I'm not 100% sure I get what you mean but yes it is not ideal and it is kind of by design like this. This is simple the multi select we get from materializecss. In the coming up 1.0.0 they improved it a little bit see second example here: https://materializecss.com/select.html but still not ideal. There is not too much we can do I guess unless we embedded another UI library just for this. At some point we will maybe rather remove this feature (maybe in Matomo 4) and ask users to use the new multi tuple instead.

I think you may rather want to use the new multi tuple feature see https://github.com/matomo-org/matomo/blob/3.x-dev/plugins/Morpheus/templates/demo.twig#L362 .

You can use it like this:

            $this->makeSetting('fooBar', array(), FieldConfig::TYPE_ARRAY, function (FieldConfig $field) {
                $field->title = 'Foo Bar';
                $field->description = 'Optionally set one or multiple custom dimensions in scope visit.';
                $field->uiControl = FieldConfig::UI_CONTROL_MULTI_PAIR;
                $field1 = new FieldConfig\MultiPair('Language', 'languageCode', FieldConfig::UI_CONTROL_SELECT);
                $field->uiControlAttributes['field1'] = $field1->toArray();
            }),
@Findus23 commented on May 6th 2018 Member

I’m not entirely sure if it is by design that it is impossible to select an entry as always others get selected and removed kind of randomly (Gallicanian and Greek in the above video) and even others get highlighted in the drop down.

But the new multi tuple feature seem even more user friendly than an correctly working multiselect.

@tsteur commented on May 7th 2018 Member

Lets remove this UI control in Matomo 4

@liquidlx commented on September 23rd 2019

Hello, I had the same problem and I've found a solution for this one.

But first, I would like to say that this problem is probably caused by the old version of the materialize.

How to fix
We need to add the class 'browser-default' from the materialize to use the browser multi select, using the $uiControlAttributes like that:
$field->uiControlAttributes = array('class' => 'browser-default');

Captura de Tela 2019-09-23 às 16 11 23

But when we add the class, the label stay behind the selector like that:

Captura de Tela 2019-09-23 às 12 43 33

We can fix this making a custom css. See https://developer.matomo.org/guides/working-with-piwiks-ui.

Here's my custom css for that:

Captura de Tela 2019-09-23 às 16 18 27

The 'for' attribute in the label is the value of the $name variable.

Final result:

Captura de Tela 2019-09-23 às 16 20 22

We can add any style for the select (and javascript).

@tsteur commented on September 23rd 2019 Member

cheers @liquidlx feel free to issue a PR for that. Otherwise in Matomo 4 we're planning to upgrade to latest version of materializecss which maybe fixes the issue as well but we're not sure.

@sgiehl commented on April 14th 2020 Member

guess that one needs to wait until #14082 is done. Or shall we update materializecss upfront?

@tsteur commented on April 14th 2020 Member

I think maybe @diosmosis already started some work on this?

@diosmosis commented on April 14th 2020 Member

@tsteur I guess materializecss could be updated/patched on 3.13.5 if it's a small enough change? Otherwise it's a lot of work. I haven't continued on #14082 since it's not as high a priority as other issues, but I can get back to it if needed.

@tsteur commented on April 15th 2020 Member

We wouldn't want this in 3.X @diosmosis
We'll get back to it as part of https://github.com/matomo-org/matomo/pull/14082 when there's time.

We can then see if the issue will be fixed automatically maybe.

@sgiehl commented on June 9th 2020 Member

Now as #14082 has been merged I've just checked it with my plugin and it seems to work as expected now. @Findus23 could you maybe have a quick look, if the multi select works for you as well. Guess we can close this issue then...

@Findus23 commented on June 9th 2020 Member

@sgiehl I rewrote the plugin to a multi-tuple so I have to trust you. Maybe @liquidlx can check.
But if it still happens, we can simply reopen it.

@tsteur commented on June 9th 2020 Member

👍 closing it for now

This Issue was closed on June 9th 2020
Powered by GitHub Issue Mirror