[SOLVED] Make resizable methods makes input fields not clickable

Make resizable methods makes input fields not clickable

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

Solution

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.