Textarea can't use Enter key to wrap

m2163926

Why textarea can't use Enter key to wrap

bindrid

You are going to have to give us more information because hitting the enter key in a textarea will give you a hard line break.

How does this relate to DataTables?

m2163926

I know textarea in browser can give a hard line break.
But I use DataTables fields textarea it don't give me hard line break.
I disable js it can give me a hard line break so I don't know why.

m2163926

This html is my test sample.
https://jsbin.com/rijozizoqi/edit?html,output

allan

Thanks - you are correct! The error is in the following block of code in Editor:

    // Prevent submit by a host `<form>`
    $(document).on( 'keydown'+namespace, function ( e ) {
        if ( e.keyCode === 13 && that.s.displayed ) { // return
            e.preventDefault();
        }
    } );

A short term fix would be:

    // Prevent submit by a host `<form>`
    $(document).on( 'keydown'+namespace, function ( e ) {
        if ( e.keyCode === 13 && that.s.displayed && document.activeElement && document.activeElement.nodeName.toLowerCase() !== 'textarea' ) { // return
            e.preventDefault();
        }
    } );

I think there is probably a better way, so I'm going to look into it further. But that's a workaround.

Allan

allan

Yup - here is a better way - it uses the canReturnSubmit plug-in method from the fields which will check what return should do:

    $(document).on( 'keydown'+namespace, function ( e ) {
        if ( e.keyCode === 13 && that.s.displayed ) { // return
            var el = $(document.activeElement);

            if ( el ) {
                var field = that._fieldFromNode( el );

                if ( field.canReturnSubmit( el ) ) {
                    e.preventDefault();
                }
            }
        }
    } );

To be in the next version of Editor!

Allan

m2163926

Sorry what is the namespace?
Is .dt?

And what is the that?
Is that = editor?

m2163926

Is my code wrong?

  $(document).ready(function() {
      editor = new $.fn.dataTable.Editor( {
          ajax: "/api",
          table: "#user",
          fields: [ {
              type:  "textarea",
              label: "welcome",
              name: "welcome"
          }]
      } );

      table = $('#user').DataTable( {
          dom: "Bfrtip",
          ajax: "/api",
          columns: [
              { data: "name"},
          ],
          select: true,
          buttons: [
              { extend: "create", editor: editor },
              { extend: "edit",   editor: editor },
          ]
      } );
  } );

  $(document).on( 'keydown'+'.dt', function ( e ) {
      if ( e.keyCode === 13 && editor.s.displayed ) { // return
          var el = $(document.activeElement);

          if ( el ) {
              var field = editor._fieldFromNode( el );

              if ( field.canReturnSubmit( el ) ) {
                  e.preventDefault();
              }
          }
      }
  } );

allan

Ah yes - that code I posted above needs to go into Editor itself. As I mentioned:

The error is in the following block of code in Editor:

That is the block that the above would replace.

Regards,
Allan

wharekura

Multi-line textarea data has caused xss validation warning when trying to delete a row. I could "turn off" microsoft's xss validation via web.config but that is overkill.

If anyone else is experiencing the above pain (most likely just my setup) this may help:

        editor.on('preSubmit', function (e, data, action) {
            if (action === 'remove') {
                // clear textarea text as it causes xss validation error on deletion        
                $.each(data.data, function (key, values) {
                    data.data[key]['YourNamespace']['YourField'] = null;
                });
            }
        });

laurentP13

Hi Allan,
thanks for the answer, though I can't locate where to apply the fix as the dataTables.editor file is minified.
Can you pls help ?
thanks,
Laurent

allan

You'd need the licensed version to apply the fix as the demo is obfuscated.

Allan

allan

I should say that we are working on 1.8 at the moment which will contain the fix.

Allan

laurentP13

Understood. Buying Editor was definitely in my todo anyhow Such a great package!
Laurent

wharekura

multi line entry into textboxes with enter key is now working without using a workaround in 1.8. However still need workaround for System.Web.HttpRequestValidationException: 'A potentially dangerous Request.Form value was detected from the client.

allan

Use UnvalidatedRequestValues rather than Request.Form. See the MSDN documentation here.

Allan

wharekura

Thank you Allan. That is one way (also heaps easy) and so is the web.config change.

My 'preSubmit' code snippet above worked for one page but not for another, so I did the following hack. However will now look into unvalidatedrequestvalues and "promise"

        $('#organisation').on('click', 'a.editor_remove', function (e) {
            e.preventDefault();

            if (confirm('Are you sure you want to remove this record?')) {

                // get row id
                //------------------------------------------------------
                rowKeyToDelete = $(this).closest('tr');

                //------------------------------------------------------------------
                // clear textarea text as it causes xss validation error on deletion
                //------------------------------------------------------------------
                editor.edit(rowKeyToDelete, false)
                    .set('Organisation.Description', 'x')
                    .set('Organisation.Address', 'x')
                    .submit();
            }              
        });

        editor.on("submitSuccess", function (e, jason, data, action) {

            //------------------------------------------------------------------
            // Remove after a wait as doing an edit submit then a delete
            // submit straight after, didnt work
            //------------------------------------------------------------------
            if (rowKeyToDelete !== null) {
                setTimeout(function () {
                    editor.remove(rowKeyToDelete, false).submit();
                    rowKeyToDelete = null;
                }, 1000);
            }
        });