controls in gridster-items don't work for IE 11

[MarkZamoyta]

I have a select and scrolling div in a widget, and they work fine in Chrome and Firefox. IE 11 doesn't seem to handle the mouse events properly.

When I avoid the msSetPointerCapture() call and use the else logic instead, it works fine in IE 11. Unfortunately I don't understand touches/mobile/pointers well enough to offer a real fix.

[danomatic]

Can you be more specific about "IE 11 doesn't seem to handle the mouse events properly."? I started a branch that attempts to detect the IE 11 pointer capture. Please give it a try and let me know how it works for you:

https://github.com/ManifestWebDesign/angular-gridster/tree/ie-11-support

[rphilp]

I'm running into similar issues as MarkZamoyta with IE11. I've modified a plunk based on one of the other issue threads that demonstrates it pretty well. I've updated the plunk to use the ie-11-support branch and I still run into weird functionality issues that don't occur in Chrome.

http://plnkr.co/edit/DwRNOILBCUxjvYzfjvpU?p=preview

The issues I'm running into with this plunk are as follows:

1. Clicking on the input does not allow you to edit anything.
2. Clicking the select does not show the dropdown menu.
3. Resizing behaves erratically. It doesn't smoothly follow the cursor like it does in Chrome.

Tabbing around works fine though after you click on the input outside of the gridster item.

Again, this is only with IE.

[rphilp]

I figured out a solution that fixes the issues I had with input and select fields being selectable and showing menus.

Line 1137 - if (target.msSetPointerCapture) {

If you add the prevent check like below it starts working fine for me. I didn't even have to add the same part to line 1186 which handles 'mousedown'

if (target.msSetPointerCapture && prevent) {

[Nel75]

I'm having the same issue - in IE 11, text controls don't take the focus nor allow editing, and select controls don't show the dropdown, when one clicks on them. Both types of controls work properly on other browsers.
I found this thread after tracking down the issue to line 1138 where msSetPointerCapture is called. If I override that function on the target element's prototype on the IE dev console (e.g., HTMLDivElement.prototype.msSetPointerCapture = function(){};) then the controls start working properly.

Lines 1137 and 1138
// IE pointer model
if (target.msSetPointerCapture) {
target.msSetPointerCapture(pointerId);

[rphilp]

Nel75, try adding the "&& prevent" to the if statement on line 1137 and see if that works. That fixed the issues for me.

[Nel75]

Thanks rphilp. That worked great for built-in controls 'input' and 'select'.

However, I also had a custom control (select2) for which '&& prevent" always evaluated to true and therefore the problem still persisted for that control. I fixed the problem for that control by giving it the 'gridster-no-drag' class.
The 'prevent' flag is set by a call to the 'startEvent' method on line 1121, which in turn calls the 'mouseDown' method on line 1347. The mouseDown method returns false if the event's target is one of the built-in controls listed in inputTags on line 1345, if the control has it's own click event, or if it has one of the two classes shown in the snippet below. Since the parent element of my custom control is a DIV, and none of the other conditions were true, mouseDown would return true thus causing msSetPointerCapture to be called. So I added the 'gridster-no-drag' class to the custom control so that mouseDown returns false and, in combination with your fix, causes gridster to let the event propagate down to the control.

Lines 1345-1367
var inputTags = ['select', 'input', 'textarea', 'button'];

            function mouseDown(e) {
                if (inputTags.indexOf(e.target.nodeName.toLowerCase()) !== -1) {
                    return false;
                }

                var $target = angular.element(e.target);

                // exit, if a resize handle was hit
                if ($target.hasClass('gridster-item-resizable-handler')) {
                    return false;
                }

                // exit, if the target has it's own click event
                if ($target.attr('onclick') || $target.attr('ng-click')) {
                    return false;
                }

                // only works if you have jQuery
                if ($target.closest && $target.closest('.gridster-no-drag').length) {
                    return false;
                }

[rphilp]

Good note about the gridster-no-drag class. I hadn't seen that option but it's definitely something you can use.

I'm not in a position to check this, but you're saying the mousedown function returns true for your select2 control? All you need to do is add that to inputTags array. So
var inputTags = ['select', 'input', 'textarea', button'];
should be
var inputTags = ['select', 'input', 'textarea', button', 'select2'];

That should fire off the false return on the first if statement.

[Nel75]

Thanks for the suggestion. However, the Select2 library generates the control as a div with some spans (see example of generated html below), hence I opted for the existing 'gridster-no-drag' class (rather than add a new one), which I felt was reasonable for such custom composite controls. Additionally, that's how I would expect gridster to treat such a control (as a non-draggable area), so applying that class to exclude that otherwise draggable div element made sense and didn't seem like a hack.

<div class="select2-container">
    <a class="select2-choice select2-default" href="javascript:void(0)" tabindex="-1">
        <span class="select2-chosen">Select an option</span>
        <abbr class="select2-search-choice-close"></abbr>
        <span class="select2-arrow"><b></b></span>
    </a>
    <input class="select2-focusser select2-offscreen" id="s2id_autogen4" type="text">
</div>

[kyse]

Adding the '&& prevent' check to line 1137 combined with the gridster-no-drag class has resolved my issues inputs not working. I also applied this class to my title H4 tag so users can highlight text as well. I left a flex-grow box between the title and search input in my grid header row above the grid (all contained within the gridster box) giving ample space to click-drag.

How come this isn't being applied to a release 5 months later? Whats missing?

Also just a suggestion, would be cool to add an option field for overwriting or appending element types to the inputTags. I'd rather write a decorator on that factory to make sure I don't lose the changes if I update this library. But allowing an option to inject more elements into that array would remove that need.