Strange behavior in Firefox - input text with ENTER opens page for editing

Question

_{Friday, May 16, 2014 3:21 PM | 2 votes}

We don't usually use Firefox, and the behavior works as expected in IE and Chrome, but this is driving me nuts.

SharePoint 2010 SP1 

In a team site, on a new page in /SitePages (so it's a wiki style page), add an HTML Form webpart (or a CEWP pointed to a .js file, same behavior)

The code (below) has an input text box, a button, and a JQuery routine that captures the enter key and clicks the button. Note I've also tried different methods - doing onkeyup events to capture the enter key as well. 

In IE/Chrome, it works. Click button works. Using enter key works.

In Firefox (29.0.1, Windows 7 Enterprise SP1), clicking button works as expected. But using ENTER key works then the page is put into edit mode.

I can't figure out what's causing the edit mode. I've tried Fiddler and debugging scripts but can't make any sense of what I see. Any ideas? This is one of those 'Friday puzzles' I work on and while it won't happen most of the time, one of the main users of a new site I'm working on likes Firefox, so she'll run into this.

<input type="text" name="fmgSearch" id="fmgSearch"   /> 
<input type="button" id="fmgDesignerBtn" class="fmgBtn" value="Search Designers" onclick="javascript:findContest(fmgSearch.value,'Designer')"/>
<div id="fmgRequestsSearchResults"></div>

<script type="text/javascript" src="/Javascript/JQuery/JQueryMin-1.11.1.js"></script>
<script src="/Javascript/JQuery/jquery.SPServices-2014.01.min.js"></script>
<script type="text/javascript">

    $(document).ready(function() {
        $("#fmgSearch").keyup(function(event){         
            if(event.keyCode == 13){
                $("#fmgDesignerBtn").click();
            }
        });
        $('#fmgSearch').focus();
     
    }); // end of document ready
    
    // dummy function for test
    function findContest(search, type) {
        $('#fmgRequestsSearchResults').empty();
        $('#fmgRequestsSearchResults').append('<span>Ran test</span>');
        
    }
</script>

Robin

All replies (12)

_{Tuesday, May 20, 2014 1:44 AM}

Hi Robin,

I did some tests, and found this issue was related to Enter key in a Textbox using Firefox in SharePoint 2010.

We will help to submit the issue to proper pipeline for you. Again, thank you for your report which will definitely make SharePoint a better products. There might be some time delay. Appreciate your time and patience.

Thanks,

Wendy

Forum Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help. If you have feedback for TechNet Subscriber Support, contact [email protected].

Wendy Li
TechNet Community Support

_{Tuesday, May 20, 2014 1:56 PM}

Thanks for confirming Wendy, appreciate your help.

Robin

_{Friday, May 23, 2014 9:08 PM}

The issue is not specific to FireFox or SharePoint 2010. I've confirmed the problem is also on SharePoint 2013 and it happens in Chrome as well. 

It appears to be a problem in SharePoint where the underlying focus is on the toolbar instead of the controls in the body of the page.

_{Tuesday, May 27, 2014 12:13 PM}

We have now encountered this bug in several SharePoint Online environments. This is to be considered critical as we now have several broken forms. Working to find a workaround, but this should be fixed soon by MS.

_{Tuesday, May 27, 2014 1:55 PM | 3 votes}

I did a quick (and dirty) fix for this, but it has one problem. After this handler has blocked the submit, you can only enter edit mode using the edit-button at ribbon. Edit button at upper right corner stops to work for some reason. After site refresh everything works again, so not a major issue.

<script>

// SharePoint input element bug handler
// More bug: http://social.technet.microsoft.com/Forums/sharepoint/en-US/33df42ba-00b3-41a8-8fb9-f8187cfc216d/strange-behavior-in-firefox-input-text-with-enter-opens-page-for-editing?forum=sharepointgeneralprevious
// This fix stops form submit => blocks transfer to edit mode

var disableFormSubmitDueToBug = false;
var bugSubmitHandlerAttached = false;

$('*selector for inputs here*').keydown(function(e){
if(e.keyCode == 13 ) { 
  disableFormSubmitDueToBug = true;
  bindBugSubmitHandler();
} else {
  unbindBugSubmitHandler();
}
}).focusout(function(){
unbindBugSubmitHandler();
});

function bindBugSubmitHandler(){
$( "form" ).bind("submit", function( e ) {
if(disableFormSubmitDueToBug) {
e.preventDefault();
console.log('Blocked submit by SP bug handler');
}
bugSubmitHandlerAttached = true;
});
}

function unbindBugSubmitHandler(){
if(bugSubmitHandlerAttached){
$( "form" ).unbind("submit");
bugSubmitHandlerAttached = false;
console.log('SP bug submit handler unbind occurred');
}
}
</script>

_{Tuesday, May 27, 2014 2:18 PM}

Thanks Jouko. I did a quick test of your code but it didn't stop the edit mode for me, but this gives me something to work with. I understand what your code is trying to do - it seems reasonable to me. There must be something else in our environment - could be patch level, who knows. I know it's running because I do get to the 'blocked submit' message.

Thanks all for taking the time to look at this. I will keep working with this 'fix' and see if I can understand why it doesn't work for us. At least it gives me more ideas!.

Robin

_{Wednesday, May 28, 2014 12:51 PM}

We have a mutual interest to find a workaround for this :-) I have to wonder how the browser still takes you to the edit mode even though submit action should be blocked by preventDefault;

There must be some other bindings to the form submit in your environment then. If you find a workaround, please let us know.

I'm far from being happy about the solution I quickly did yesterday and I'm now stuck doing other things. I would really appreciate if someone would be able to implement a better solution.

_{Tuesday, July 29, 2014 10:41 AM}

Today I also faced this issue. Running on SP 2013 Server Enterprise, SP1. Enters to edit mode on at least Firefox & Chrome, doesn't on IE. Seems to appear only on site pages based on wiki page form.

Unfortunately couldn't figure out how to prevent this from happening (either).

Just less than a month ago I had a similar page with input form, running on SP2013 Server Enterprise RTM, and I'm pretty sure the page was also a site pages/wiki page -type of a page. No problems back then. So could this be something which has changed over the updates, or is someone using RTM version with this issue too?

_{Tuesday, July 29, 2014 8:48 PM}

I am having same issue in chrome with SP 2013 ,  anybody have any workarounds?

_{Monday, March 9, 2015 7:21 PM}

I did a quick (and dirty) fix for this, but it has one problem. After this handler has blocked the submit, you can only enter edit mode using the edit-button at ribbon. Edit button at upper right corner stops to work for some reason. After site refresh everything works again, so not a major issue.

<script>

// SharePoint input element bug handler
// More bug: http://social.technet.microsoft.com/Forums/sharepoint/en-US/33df42ba-00b3-41a8-8fb9-f8187cfc216d/strange-behavior-in-firefox-input-text-with-enter-opens-page-for-editing?forum=sharepointgeneralprevious
// This fix stops form submit => blocks transfer to edit mode

var disableFormSubmitDueToBug = false;
var bugSubmitHandlerAttached = false;

$('*selector for inputs here*').keydown(function(e){
if(e.keyCode == 13 ) { 
  disableFormSubmitDueToBug = true;
  bindBugSubmitHandler();
} else {
  unbindBugSubmitHandler();
}
}).focusout(function(){
unbindBugSubmitHandler();
});

function bindBugSubmitHandler(){
$( "form" ).bind("submit", function( e ) {
if(disableFormSubmitDueToBug) {
e.preventDefault();
console.log('Blocked submit by SP bug handler');
}
bugSubmitHandlerAttached = true;
});
}

function unbindBugSubmitHandler(){
if(bugSubmitHandlerAttached){
$( "form" ).unbind("submit");
bugSubmitHandlerAttached = false;
console.log('SP bug submit handler unbind occurred');
}
}
</script>

Thank you SO much for writing this script. It worked for me.

Where the code says: $('*selector for inputs here*').keydown(function(e){

You need to replace *selector or inputs here* with the name of your input box, so for me it was:

$("input[name^='client_name']").keydown(function(e){

_{Thursday, September 8, 2016 2:23 PM}

GREAT

I'v adapted your code to check tab input for my input formular;-)

e.preventDefault(); is the key-line!

**Thanks!** 

(tested on o365 sharepoint 2016)
https://gist.github.com/josy1024/680cd04d9b68608103638fd567cfadaa

_{Wednesday, March 14, 2018 12:38 AM}

Didn't work for me, Sharepoint 2013