Firefox - Can't click any input fields

[tomfulton]

In Firefox, its impossible to click on any input fields in the Archetype Editor (or dropdowns, etc) or Prevalue Editor when sorting is enabled.

This looks to be because the copy of angular-ui-sortable in the Umbraco Core that we're referencing, is calling .disableSelection(), which causes this known issue in Firefox.

This doesn't look to be an issue in the angular-ui-sortable standalone directive, but it appears the copy in the core has been modified a bit. Unfortunately, the copy in the core is minified, so it's difficult to see what's really going on, though I think its only that one change.

I'm hoping we can find out from HQ about why that was added and if it can be removed, since it's deprecated anyway. Couldn't seem to find any bugs with it removed.

As a VERY hacky workaround, I tried doing this, but it seems its happening on more than just input elements (option, who knows what else), so I'm not sure how well this really works or if we should just run it on a bunch of controls.

$timeout(function() {
    $('.archetypeEditor .controls input')
        .bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(e) { 
            e.stopImmediatePropagation();
        }); 
}, 1000);

As another option, I was hoping we could just use the real copy of angular-ui-sortable, but I don't think that's possible since it'll be using the same name as the core's copy.

Umbraco bug: U4-4281

[jmk1]

Hi Tom, where do I add this workaround? I've had a look through the Umbraco files but can't see where this code would go?

[tomfulton]

@jmk1 I added this right in controller.js (Archetype's) when doing some testing. Should work, but intermittently and still a bit flaky.

Thinking we might try to just have to do the sorting ourselves instead of re-using the ui-sortable directive

[jmk1]

Tom - In my version (0.4.0-alpha) there isn't a controller.js in the app_plugins/archetype folder. There is only an archetype.js file - is this the one that I should be editing?

[kgiszewski]

@jmk1 Yes. Our build script concats them all into that one file.

[jmk1]

Thanks Kevin. One other thing I'm having trouble with - after I've edited the archetype.js file, I don't think the updated file is loading in Umbraco - I've tried clearing the browser cache and restarting the application. Is there anything else I need to do?

[kgiszewski]

@jmk1 Yep :) Check this link to clear the cache: http://imulus.github.io/Archetype/#umbraco-caching

[tomfulton]

@jmk1 👍 - beat me to it.

Worth mentioning, as Kevin pointed out, ideally you'd want to work off the source (controller.js) and use our build script to copy the changes to your site Umbraco (grunt watch:dev --target="D:\yoursite"). But, what you're doing should work fine - you're likely just running into the heavy caching in Umbraco 7.

[jmk1]

Thanks for the help guys - I'm not very good with all of the new js in the U7 backend. I still can't get it to work, if I paste the timeout function (as per Tom's example above) into archetype.js (at the bottom, outside of the other functions) nothing seems to happen. And if I copy the function into the angular.module("umbraco").controller("Imulus.ArchetypeController",...) function, then the datatype disappears and is replaced by a textbox multiple with a red border. Is there anything else I should be doing?

[tomfulton]

@jmk1 Just tested this out again and seems to be working for most cases - might as well try it out and see how it goes. Pull request: #73

Mind giving it a shot? Here's an installable package if that helps.

[jmk1]

Thanks very much Tom - I can now get it working in Firefox. It doesn't look like the updated javascript was included in the installable package js? However I copied over the new js lines from the pull request, and changed the $timeout to setTimeout and it's all working in Firefox. Thanks for the help! I appreciate it.

[tomfulton]

@jmk1 Whoops, may have sent you the wrong file. Glad you got it worked out! I'm not very confident in this fix, but we'll roll with it for now and see how it works. Let us know if you hit any issues.

[kgiszewski]

Re-opening as we've received two reports this week on this issue.

[sniffdk]

Just stumpled upon this one. In case no one noticed yet, you can click the the field names to focus the input fields, except for the regex field apparently 😄

[kgiszewski]

Now's your chance to be a Archetype contributor! (hint: PR) ;)

[sniffdk]

Yeah, been thinking about it, it's a great project :)

[kipusoep]

Having the same issue.

[kgiszewski]

@tomfulton if you still think this is related to the custom version of ui-sortable, maybe we could include the un-modified version with Archetype and load it on Archetype pages (therefore overriding the modified version)?

[tomfulton]

@kgiszewski Yeah, I would think that's still the issue, but I haven't looked in quite some time. I imagine your idea will work, assuming it's possible to override modules like that

[Blatant]

Just a quick one to say I'm experiancing the same issue in Firefox/Win7. I installed from nuGet so I'm honestly not sure what version I am running!
PS. Once you get the cursor focused on a control, you can still tab through the fields...

[kipusoep]

Any updates? Using Chrome instead of Firefox for back-office stuff sucks 👎 :-P

[kgiszewski]

Not likely that an update will come soon. It appears tied to the variant of ui-sortable in the Umbraco core. We haven't heard back from the core team. We have tried a variety of hacks, but ultimately we use Chrome to workaround this issue.

http://issues.umbraco.org/issue/U4-4281

Please read and consider voting.

[Benjaminsson]

If you hide the labels Firefox still misbehaves. Maybe an edge case but good to know if someone run in to this.

[kjac]

Fixed... at some point :)