Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI_CONTROL_MULTI_SELECT does not work as expected #12832

Closed
Findus23 opened this issue May 6, 2018 · 12 comments
Closed

UI_CONTROL_MULTI_SELECT does not work as expected #12832

Findus23 opened this issue May 6, 2018 · 12 comments
Labels
c: Platform For Matomo platform changes that aren't impacting any of our APIs but improve the core itself.
Milestone

Comments

@Findus23
Copy link
Member

Findus23 commented May 6, 2018

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

@Findus23 Findus23 added the c: Platform For Matomo platform changes that aren't impacting any of our APIs but improve the core itself. label May 6, 2018
@tsteur
Copy link
Member

tsteur commented May 6, 2018

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
Copy link
Member Author

Findus23 commented May 6, 2018

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 tsteur changed the title UI_CONTROL_MULTI_SELECT behaves weird UI_CONTROL_MULTI_SELECT behaves weird (remove UI control in Matomo 4) May 7, 2018
@tsteur tsteur added this to the 4.0.0 milestone May 7, 2018
@tsteur
Copy link
Member

tsteur commented May 7, 2018

Lets remove this UI control in Matomo 4

@liquidlx
Copy link

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
Copy link
Member

tsteur commented Sep 23, 2019

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.

@mattab mattab changed the title UI_CONTROL_MULTI_SELECT behaves weird (remove UI control in Matomo 4) UI_CONTROL_MULTI_SELECT behaves weird (remove UI control?) Feb 20, 2020
@sgiehl
Copy link
Member

sgiehl commented Apr 14, 2020

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

@tsteur
Copy link
Member

tsteur commented Apr 14, 2020

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

@diosmosis
Copy link
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
Copy link
Member

tsteur commented Apr 15, 2020

We wouldn't want this in 3.X @diosmosis
We'll get back to it as part of #14082 when there's time.

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

@sgiehl
Copy link
Member

sgiehl commented Jun 9, 2020

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
Copy link
Member Author

Findus23 commented Jun 9, 2020

@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
Copy link
Member

tsteur commented Jun 9, 2020

👍 closing it for now

@tsteur tsteur closed this as completed Jun 9, 2020
@mattab mattab changed the title UI_CONTROL_MULTI_SELECT behaves weird (remove UI control?) UI_CONTROL_MULTI_SELECT does not work as expected Sep 28, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
c: Platform For Matomo platform changes that aren't impacting any of our APIs but improve the core itself.
Projects
None yet
Development

No branches or pull requests

5 participants