giorgosart/react-easy-edit

only containing new line characters prevents editing.

zmartell opened this issue · 4 comments

zmartell commented

Describe the bug
If the value only contains newline characters, '\n', it is impossible to click on it, to do any sort of inline editing.

I have for example, and if notes contains just '\n' or '\n\n\n\n' then it is impossible to select it to edit.

      <EasyEdit type={Types.TEXTAREA} value={notes} onSave={save} />

To Reproduce
Steps to reproduce the behavior:

  1. Create a inline containing just "\n" without quotations.
  2. Try to edit it.
  3. Fail.

Expected behavior
I should be able to edit it.

Desktop (please complete the following information):
I tried various OS's like Desktop Chrome and Safari.

giorgosart commented

Thank you for logging this @zmartell, i'll take a look and get back to you as soon as possible.

zmartell commented

Hi giorgosart,

Thanks for this. I am not sure why, If the value is blank its fine, and if its like "\nhello" or "hello\n" its fine but if its "\n" or like "\n\n" etc etc its broken. I let end users write notes, and then realized that someone just put an empty line, and then can no longer edit it.

giorgosart commented

Hey @zmartell I can't see anything wrong with the component itself, what's happening is that the component's value is correctly set to \n which cannot be represented in the html "view" mode of the component.

A few suggestions:

  • Add padding or/and border to the component to make it visible to the user
  • Add a validation function in that does not allow users to just save "\n" as a component value

Can you please try this and let me know if that works for you?

giorgosart commented

Hey @zmartell I will be closing this down as there is nothing wrong as far as I can see with the library itself, let me know if you thing otherwise.