tui.grid select filter can incorrectly return no results

Thank you for this great grid control.

Describe the bug The 'select' column filter can incorrectly return no rows of data. The grid behaves correctly if "Select All" is checked, or if only one value is checked (or if no values are checked). However, the grid incorrectly returns no results, if two or more (but not all) values are checked.

This bug doesn't appear in Example 24 because in that example, 'filter' is passed as a string, not an object.

To Reproduce Steps to reproduce the behavior:

Save the following HTML page

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-grid.min.css" integrity="sha256-9RPaN0NUVW/MqctDkGoG33ZNIhuKLeXUc2NRWkkjXhQ=" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-grid.min.js" integrity="sha256-Ya5Prb+wTPYt3FarlecnYAqn4Q6M446v4LuXxMvFKMs=" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="grid" style="width: 800px"></div>

        <script>
            let data = [
                {name: "Alex"},
                {name: "Dana"},
                {name: "Ash"},
            ]

            const grid = new tui.Grid({
                el: document.getElementById('grid'),
                data: data,
                columns: [
                    {
                        header: 'Name',
                        name: 'name',

                        filter: {
                            type: 'select'
                        },
                    },
                ]
            })
        </script>
    </body>
</html>

Open the HTML page in a browser
Click on the filter icon in the header.
Uncheck any one of the data values (for example, uncheck "Ash").
No data is shown in the grid.

filter error

Expected behavior The checked rows should be shown in the grid (for example, "Alex" and "Dana").

filter working

Desktop

Windows, Chrome v103

Additional context

Note, if the filter configuration is changed to

filter: 'select'

then the grid behaves as expected. That is, the error occurs when 'filter' is configured as an object, but not when 'filter' is a string.

Jul 28 '22 14:07 iainteractive-iain

@iainteractive-iain Sorry for late reply.

It is not a bug as it is intended behavior. if set a filter to object, not a text, it means you don't use interal filter with default options(e.g. operator and so on). So, it may not work what you intended.

In this case, you need to set 'operator: 'OR'` to use the selection filter you set as like an object as the default behavior.

Aug 09 '22 01:08 jajugoguma

Ah! Thank you for this explanation.

Aug 09 '22 09:08 iainteractive-iain

Actually, this doesn't work either:

filter: {
    type: 'select',
    operator: 'OR',
},

I think the problem is this line:

https://github.com/nhn/tui.grid/blob/cb95461cd843f0eea2d868e528a7866a74404156/packages/toast-ui.grid/src/store/column.ts#L190

which omits 'operator' from the returned filter options object.

Aug 16 '22 10:08 iainteractive-iain

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

Oct 30 '22 04:10 stale[bot]

I think this is still an issue, and I think it's an actual bug (not a question). See https://github.com/nhn/tui.grid/issues/1757#issuecomment-1216445704

Oct 31 '22 10:10 iainteractive-iain

This issue will be closed due to inactivity. Thanks for your contribution!

Nov 13 '22 09:11 stale[bot]

tui.grid tui.grid copied to clipboard

select filter can incorrectly return no results

tui.grid
tui.grid copied to clipboard