Dropdown allowInvalid=false not returning proper values in 'changes' argument after 'afterSetDataAtCell'

Tags: #<Tag:0x00007f8b1d44e580>
#1

I’m trying to implement a feature where the input is supposed to be a dropdown that does not allow invalid values, but I am getting some unexpected behavior/data from the afterSetDataAtCell function.

Tested with latest version of handsontable and @handsontable/react. See code snippet below:

<HotTable
            settings={{
                data: [
                    ["Tesla", 2017, "black", "black"],
                    ["Nissan", 2018, "blue", "blue"],
                    ["Chrysler", 2019, "yellow", "black"],
                    ["Volvo", 2020, "white", "gray"]
                ],
                colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
                columns: [
                    {},
                    { type: 'numeric' },
                    {
                        type: 'dropdown',
                        source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
                    },
                    {
                        type: 'dropdown',
                        source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
                    }
                ],
                afterSetDataAtCell: (changes) => {
                    console.log("here changes", changes)
                    console.log("here changes[0]", changes[0])
                },
                allowInvalid: false,
            }}
        />

When I check my console logs, I’m getting erratic behavior where the changes array reports that there is something in it, but it comes empty, but I then print the first entry in the same function and there is data.

image

Any idea what could be causing this? I am unable to reproduce in a JSFiddle but getting the behavior consistently on my app.

#2

Confirmed I am running into this issue off a clean CRA project with nothing more than

npm i handsontable @handsontable/react

after bootstrapping and adding the code above.

image

#3

Hi @victorh

It seems that the call within the afterSetDataAtCell runs before the check if the cell editor should be closed or not (`allowInvalid: false) to make it work as expected you can add a delay

https://jsfiddle.net/t6Lye219/9/

I will report that behavior on our Github board.

#4

@aleksandra_budnik Thank you! That seemed to work for me after adding a .5 second delay. Thanks for the prompt reply.

#5

Great. I’m glad that I was able to help.

Please feel free to open a new thread when needed.

#6