jspreadsheet / pro

Jspreadsheet Pro | The javascript spreadsheet
https://jspreadsheet.com/
15 stars 1 forks source link

Issues with dropdown that uses id/name options that have the same name as a JS Array function #310

Closed psiservices-melissa-boyle closed 9 months ago

psiservices-melissa-boyle commented 9 months ago

We are having an issue configuring a dropdown when the options provided in the source json contains an entry that has an id/name that matches a JS Array built in function name. When this happens, the option is incorrectly pre-selected, and the user is unable unselect the value(s).

Here is a sample configuration that reproduces the issue.

    {
        worksheets: [{
        data: [
            ['']
        ],
        columns: [{
            type: 'dropdown',
            width: '400px',
            delimiter: "&#268F;",
            source: [{
            "id": "reduce",
            "name": "reduce"
            },
            {
                "id": "increase",
                "name": "increase"
            },
            {
                "id": "reverse",
                "name": "reverse"
            },
            {
                "id": "forward",
                "name": "forward"
            }
            ]
        },],
        }]
    }

Here is a jsfiddle that demonstrates the issue : https://jsfiddle.net/mb_psi/xf60jqun/3/

In the jsfiddle, observe that options 'reduce' and 'reverse' are also the names of built in Javascript Array functions. No option has been preselected in the data section, but both options appear as pre-selected. The user is also unable to deselect either of these options.

Is there a workaround for this?

hodeware commented 9 months ago

This already been fixed and available on NPM. Please update your files to the NPM to get the most recent version.

<script src="https://cdn.jsdelivr.net/npm/jspreadsheet/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet/dist/jspreadsheet.min.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.css" type="text/css" />