Grid filter is showing blank spaces for unmatched records.

[roopeshkurian]

I'm submitting a Bug report

Your Environment

Software	Version(s)
Angular	13.1
Angular-Slickgrid	4.0
TypeScript	4.5

Describe the Bug

One of your example https://ghiscoding.github.io/Angular-Slickgrid/#/graphql-nopage
Native column I am typing b. I could see blank spaces for unmatched records.

Steps to Reproduce

Please go to https://ghiscoding.github.io/Angular-Slickgrid/#/graphql-nopage
in the Native column type b or some other letters.

Expected Behavior

Currently you set label display none. But may be you need to set li to display none.

Current Behavior

Blank spaces are coming for unmatched records.

Possible Solution

Currently you set label display none when its not matching. But may be you need to set li to display none.

Code Sample

https://ghiscoding.github.io/Angular-Slickgrid/#/graphql-nopage

[ghiscoding]

This is indirectly caused by a new CSS/SASS variable $slick-multiselect-item-height that I added recently, however I don't think removing that variable is necessarily the best solution. The real issue is because multiple-select.js external lib shows these dropdown options in elements like this <li><label>Option 1</label><input type="checkbox"/></li> and instead of hiding the <li> they're hiding the <label>, which is not ideal. Fortunately I have my own fork of multiple-select.js to make it work better with SlickGrid, so I went and updated multiple-select-modified lib, released a new version for it and then updated the NPM package in this Slickgrid-Universal PR #581, but I probably won't release a new version until couple more weeks.

Kind of a long explanation, but on the short side there's actually a temporary solution, you can implement.
You can do it by changing the CSS or SASS variable

/* SASS */
$slick-multiselect-item-height: inherit;

/* or CSS Variable */ 
:root {
  --slick-multiselect-item-height: none;
}

[roopeshkurian]

Thank you for providing a temporary solution. It worked for me.
Keep up the good work.
Thank you for this wonderful grid and new updates.

[ghiscoding]

By the way, since I've fixed the issue in the external lib multiple-select-modified you could get the fix but you might need to delete your npm or yarn lock file and re-run npm install would get you the latest version of that lib.

[roopeshkurian]

Deleted npm and tried again. It worked. Thanks for your help

[ghiscoding]

@roopeshkurian
I can now close this since it got officially fixed by today's Release version 4.1.0 with updated version of Slickgrid-Universal

Cheers and thanks for the feedback ⭐