Make resizable methods makes input fields not clickable

Question

I've really strange behavior and I spent a couple of days to try to figure out what is a problem.

MooTools methods makes my input fields not clickable, and I don't know why.

$$('.class1.class2').makeResizable({
});

Above piece of code needs to make all children of div which has class 'class1' & 'class2' to be re-sizable, and that works perfectly but beside that it also makes input fields not clickable.

Does anybody had the similar problem?

Any kind of help will be appreciate.

Thanks

Answer 1

so the problem is that you have no handle passed in. when you fail to do that, the whole element becomes a listener for mousedown and attempts to click into any child element will not bubble correctly, resulting in weird behaviour.

I also found a bug in the logic for adding handlers, which seems to not evaluate handles correctly

https://github.com/mootools/mootools-more/blob/master/Source/Drag/Drag.js#L66 is wrong on many levels - it expects a collection / array of elements but looks in the global document and not child elements - yet it ends up picking element anyway and ignores passed collections like $$('.class1 .resizer')

i did a small change to accept a string for a child selector and added a resize handler.

http://jsfiddle.net/pbu5uzho/

you should submit this bug to https://github.com/mootools/mootools-more/issues though i doubt it will get picked up.

$$('.class1').makeResizable({
    handle: '.resizer'
});

the change I did to make this work was:

this.handles = this.element.getElements(this.options.handle);

alternatively, you can use something like InteractJS to handle this.

Answer 2

I'm not 100% sure but can you try this one

I think you are missing (,)

$$('.class1,.class2').makeResizable({

});