Dropdown menu click causes page refresh, fix?

Tags: #<Tag:0x00007efc6b84d7d0>
#1

Continuing the discussion from Dropdown menu click causes page refresh:

Hi @jsiegel
I see that you closed that discussion, but I am also having this issue.
Did you manage to fix it or identify the cause? if yes, when will the upgrade be available.
If no, We can setup a call to review what is wrong.
If I copy my code in a jsfiddle, it doesn’t refresh the page. But if I run it in my .net MVC application, it causes the page to refresh. Any idea why?

Thank you.
Continuing the discussion from Dropdown menu click causes page refresh:

#2

Hello @morneaugagnon_p ,
The issue is with < button> contained within a < form> tag (needed by .net) forcing a postback. I am currently looking at the code to check if I can if I can add a fix to it in my project (asp.net). I will let you know if I find a solution.
truii_dev

Edit: I find a quickfix for now

  • handling button onclick to cancel the postback : add following line to handsontable.full.js line 20906 :

    button.onclick = function () { return false; };

  • or replace the button with a div handsontable.full.js line 20904 : var button = document.createElement(‘button’); to

var button = document.createElement(‘div’);

Note 1: I noticed clicking on the dropdown menu button does propagate the click event as if you clicked on the header.
Note 2: I think Hansontable uses buttons in other location (possibly in the context menu) so the problem is likely to occur for them unless a fix is applied too. Will update on a fix if this occurs.

#3

Edit 2: code sample to reproduce the issue (no asp needed),
Added 2 buttons to demonstrate the issue, added javascript script to cancel the postback as per the edit described above.

http://jsfiddle.net/hra52pac/

< html lang=“en”>
< head>
< meta charset=“utf-8” />
< meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
< title> Hansontable demo</ title>

< link rel="Stylesheet" type="text/css" href="handsontable.full.css" />
< script type="text/javascript" src="handsontable.full.js"></script>

</ head>
< body>
< form >
< div id=“example”> < /div>
< script type=“text/javascript”>
var data = [
["", “Ford”, “Volvo”, “Toyota”, “Honda”],
[“2016”, 10, 11, 12, 13],
[“2017”, 20, 11, 14, 13],
[“2018”, 30, 15, 12, 13]
];
var container = document.getElementById(‘example’);
var hot = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: true,
dropdownMenu: true
});
< /script>

    < button id="button1" >Postback</button>
    < button id="button2" onclick="return false;">No postback</button> 
< /form>

< /body>
< /html>

#4

Hi, @morneaugagnon_p

Exactly like @truii_dev explained it, it’s an issue with the button tag and .net.

Also, @truii_dev, thanks for the jsfiddle! You’re right - placing the table inside a form will also cause the page to refresh when using the dropdown menu. We’ll fix this with the next release (your return false; workaround make a lot of sense, so we’ll probably use this approach)

#5

@jsiegel I added this in our internal ticketing system as #29

#6

Issue fixed on March 21th, 2016.
I am closing this issue.

#7