Selectable cancel not being honored correctly

[troygrosfield]

When the selectable area has a cancel defined, all that means is that the item shouldn't be selected. So, when this comes to an input and it's defined in the selectable cancel, the item shouldn't be selected, but the input should still receive focus which is doesn't. This was tested on:

• Samsung Galaxy S4
• Samsung Galaxy S6
• iPhone 6s Plus simulator

Html

<div class="selectable-area">
  <button type="button">Hello</button>
  <button type="button">World</button>
  <button type="button">Again</button>
  <input type="text" style="border: 1px solid black" />
</div>

Js

$('.selectable-area').selectable({
    'filter': 'button',
    'cancel': 'input',
    'selected': function(e, ui) {
        console.log('item selected');
    }
});

I would expect when I click on the input, it should not fire the "selected" since the item wasn't a selectable item, but I would expect the input to be in focus which it's not.

You can also test out and verify this bug via chrome dev tools using the mobile simulator (just change your device to be a mobile device):

@furf are you still maintaining this repo?

[troygrosfield]

You can verify this issue on your demo page:

• http://touchpunch.furf.com/content.php?/selectable/default-functionality

By doing the following:

Paste in the following html in dev console

<ol id="selectable2" class="ui-selectable">
    <li class="ui-widget-content ui-selectee">Item 1</li>
    <li class="ui-widget-content ui-selectee">Item 2</li>
    <li class="ui-widget-content ui-selectee">Item 3</li>
    <li class="ui-widget-content ui-selectee">Item 4</li>
    <li class="ui-widget-content ui-selectee">Item 5 <input type="text"></li>
    <li class="ui-widget-content ui-selectee">Item 6</li>
    <li class="ui-widget-content ui-selectee">Item 7</li>
</ol>

At this point when testing on mobile, you can verify that you can gain focus on the text input.

Add the selectable(...) js to make the list selectable

// remove focus from the text input if it still has focus
$('input').blur();

// make list selectable
$('#selectable2').selectable({
    'filter': '.ui-selectee',
    'cancel': 'input',
    'selected': function (e, ui) {
        console.log('item selected');
    }
});

You'll see that when testing on mobile, you can't click on the text input and have it gain focus.