Bugs in MultiSelect

[jdgarcia]

In version 2.0.4 (and earlier), MultiSelect widget does not work properly when is used with the property "appendTo=body". Basically the issue is that when you perform a click, the overlay panel with the options is closed, so you can only select one element (or even no one if you click somewhere else than a check box).

I have debugged the code and got to the conclusion than the problem is located in the code for the documentClickListener.

This is the original code:

Code: Select all

 this.documentClickListener = this.renderer.listenGlobal('body', 'click', () => {
            if(!this.selfClick && this.overlayVisible) {
                this.hide();
            }
            
            this.selfClick = false;
            this.panelClick = false;
        });

Basically it checks if the click is on the control and the overlay is visible, and this is not enough, it should also check that the click is not inside the overlay panel, which can be done adding the condition

Code: Select all

&& !this.panelClick

Once this bug is solved, you will be able to see another one: When trying to use the search box in the overlay panel, the panel goes to the upper left corner, when it should keep been displayed under the control itself.

I have implemented a workaround this that is is modifying the "onFilter(event)" method. This the original:

Code: Select all

onFilter(event) {
        this.filterValue = event.target.value.trim().toLowerCase();
        this.visibleOptions = [];
        for(let i = 0; i < this.options.length; i++) {
            let option = this.options[i];
            if(option.label.toLowerCase().startsWith(this.filterValue.toLowerCase())) {
                this.visibleOptions.push(option);
            }
        }
        this.filtered = true;
    }

The workaround I did is to set the last statement to false:

Code: Select all

this.filtered = false

This basically prevents the code in

Code: Select all

ngAfterViewChecked() {
        if(this.filtered) {
            this.domHandler.relativePosition(this.panel, this.container);
            this.filtered = false;
        }
    }

to be executed. Because the bug is probably in the domHandler, that does not calculate position correctly.

Please, let me know if you need more details, but it would be great to have these two issues corrected in 2.0.x, since what I have right now in my code is the methods stated above overriden to behave properly...

Thanks!

[sudheer]

The issue is replicated in latest version as well.The first is replicated and it is required to have one more condition.The second issue need to be tested further.Can you raise PR in github.You can create 2 separate issues and PRs.

[jdgarcia]

I already submitted a PR for the first issue. It was reported in other ways by other users.

https://github.com/primefaces/primeng/pull/2580

User name for the PR is different, but that's my user on GitHub

I agree second issue needs more validation. For the moment, I don't see why the call is needed when filtering, but I will digg further and submit a proper PR if I find the solution.

Thanks!

[sudheer]

Okay.That's great.Thanks.