Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow Enter key in Notebook entry to add new lines by default #6354

Closed
charlesh88 opened this issue Feb 16, 2023 · 6 comments · Fixed by #6365 or #6464
Closed

Allow Enter key in Notebook entry to add new lines by default #6354

charlesh88 opened this issue Feb 16, 2023 · 6 comments · Fixed by #6365 or #6464
Assignees
Milestone

Comments

@charlesh88
Copy link
Contributor

charlesh88 commented Feb 16, 2023

Is your feature request related to a problem? Please describe.
Line breaks by default from the Enter key was the initial design approach, but that was changed after some user requests at that time. However, after an extended period of Notebook usage by multiple constituents, it's become clear that there is a strong desire to allow line breaks in Notebook entries as the default action. This will become even more important when we go after entry formatting, that allows bulleted lists and tables.

From VIPER user requests 225.

Describe alternatives you've considered
To support this but try to retain some of the Enter key's streamlining, we should do the following:

  • Remap the Enter back to its original usage of adding lines in entries.
  • Allow a key modifier like Cmd+Enter (or Windows key+Enter) to close an entry.
  • Keep the "tab out" function which currently closes the entry.
  • Add commit and (ideally) cancel buttons to the edit mode of the entry. It's not clear we need a "cancel" button, which could be significantly more effort - the expectation would be to revert all changes to the entry.

Additional context
Add any other context or screenshots about the feature request here.

@charlesh88 charlesh88 self-assigned this Feb 16, 2023
charlesh88 added a commit that referenced this issue Feb 17, 2023
- Removed enter key handlers from Vue component.
- Added "Save" button.
charlesh88 added a commit that referenced this issue Feb 23, 2023
- Removed enter key handlers from Vue component.
- Added "Save" button.
@charlesh88
Copy link
Contributor Author

charlesh88 commented Feb 24, 2023

Testing Notes

  1. Create or edit a Notebook Shift Log or Notebook. The Shift Log is preferred to test for regressions on locked pages.
  2. Go to a page with several entries; add new entries if needed.
  3. Hover over an entry other than the current one, verify that it "lights up" a little bit to indicate clickability.
  4. Click directly into the text of a currently unselected entry, verify that it does NOT immediately put the text field into "edit" mode, but does select the entry.
  5. Click again into the text field of the selected entry, verify that the input is now editable by adding or modifying the text.
  6. Press the Enter key while editing. Verify that a line return is added to the text and the entry remains in edit mode.
  7. Press the Tab key while editing, and verify that edit mode is exited and any changes were saved. Also verify that you are NOT tabbed into the input field of a following entry.
  8. While editing, click anywhere outside the entry and verify that behavior is the same as step 7.
  9. Repeat step 5, and while editing observe that a button with a checkmark appears at the lower right of the text field. Click that button and verify that the input is no longer in edit mode and that any changes were saved.
  10. Nav away and back from the Notebook; verify that any edits were persisted.
  11. If testing a Shift Log, commit a page or go to an already committed page. Verify that entries cannot be edited as expected.

Additional Testing Notes for fixes in #6464

  1. Open browser console
  2. create a new notebook
  3. create the first entry by clicking the + in the drop area
  4. click the trash icon and OK to delete the first entry.
  5. You should not see a console error anymore and the entry should be removed

Reference

Hovering over an entry (step 3)
Screen Shot 2023-02-24 at 3 36 53 PM
Having clicked to select an entry (step 4)
Screen Shot 2023-02-24 at 3 36 59 PM
Having clicked in the text input of a selected entry (step 5)
Screen Shot 2023-02-24 at 3 37 03 PM

jvigliotta pushed a commit that referenced this issue Mar 10, 2023
* Closes #6354 Notebook Enter key adds new lines
- Removed enter key handlers from Vue component.
- Added "Save" button.
* entry must be selected before editing
* focus on newly created entry
* Closes #6354 Notebook Enter key adds new lines
- Removed enter key handlers from Vue component.
- Added "Save" button.
* do not allow edit unless entry is selected
* remove css for disabled cass

---------

Co-authored-by: David Tsay <david.e.tsay@nasa.gov>
@davetsay
Copy link
Contributor

filed this as a follow up bug, #6411

@rukmini-bose
Copy link
Contributor

This all looks good. Verified Testathon 3/14/2023

@akhenry
Copy link
Contributor

akhenry commented Mar 14, 2023

Verified fixed

@davetsay
Copy link
Contributor

i appreciate all the verifieds but....

i think something is seriously borked here.
you can get into weird states where the new entry doesn't get focused, and then clicking on the input to focus it makes the entry go away.

separate issue is that if you try to delete a new entry, you get an error since the new entry isn't yet persisted

@davetsay davetsay reopened this Mar 16, 2023
@davetsay davetsay self-assigned this Mar 17, 2023
@davetsay davetsay mentioned this issue Mar 17, 2023
15 tasks
@ozyx
Copy link
Contributor

ozyx commented Mar 17, 2023

Verified fixed-- Testathon 3/17/2023 🍀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants