How do you add a line break when editing a text area during an inline edit?

SuiteCRM Forum - English Language SuiteCRM General Discussion
1

Hi,

I have managed to control the width and height of an inline edit text area with CSS (which for some reason wasn’t spanning the 100% width of its container).

However when i try edit the textarea field using ‘inline’ editing i cant add a new line. Pressing the ‘return’ key simply saves the page.

How can i add a line break when editing a text area during an inline edit?

Thanks
Bungle

2

Hello

May i ask which field you are trying to edit on with the line break? It wouldn’t be the ‘address’ fields by any chance?

Regards

3

Hi,

I was editing a custom textfield, however i have the same issue with the description field, or any other textarea it seems.

As soon as i press enter the textarea loses focus and is saved.

thanks
Bungle

4

As far as i am aware, users are currently unable to hit ‘enter’ and create a new line while using inline editing. I know that this is a problem with TextArea and the address fields when inline editing.

I guess ideally it would be a ‘shift+Enter’ operation on textAreas with an OOB instance to create a new line. And i am also guessing that the ‘ENTER’ function will save it instantly and no code has been added to accommodate this function.

5

I have added some code to fix that issue with textAreas where you can now use “SHIFT + ENTER” to enter new lines on textAreas. It is a half fix for now but should resolve issues about adding new lines. Hopefully this comes out in a new release :slight_smile:

all the best!

6

Hi DarrenTang94,

could you share your solution so that everyone could benefit from it?

Thx!

7

Of Course!

in the code go to:

include -> inlineEditing.js

then replace the validateFormAndSave function with this new code

function validateFormAndSave(field,id,module,type){
$("#inlineEditSaveButton").on(‘click’, function () {
var valid_form = check_form(“EditView”);
if(valid_form){
handleSave(field, id, module, type)
$(document).off(‘click’);
}else{
return false
};
});
// also want to save on enter/return being pressed
$(document).keypress(function(e) {
if ((e.which == 13) && (e.shiftKey)) {
}
else if (e.which == 13) {
e.preventDefault();
$("#inlineEditSaveButton").click();
}
});
}

Please note: This code has not been officially tested so copy and paste at your own will! Also, there is a small bug where you cannot see the linebreaks straight away. But if you refresh the page after the inline edit, all should be good!

Have fun!

8

Thank you. That’s a great help.

The page refresh bug is a minor issue for me :slight_smile: