diff --git a/src/shared/components/photo-or-note-field.module.scss b/src/shared/components/photo-or-note-field.module.scss index b3d8834..1f738b1 100644 --- a/src/shared/components/photo-or-note-field.module.scss +++ b/src/shared/components/photo-or-note-field.module.scss @@ -18,13 +18,23 @@ } .noteSubTab { - .addNote { - border: 0; - background-color: #f9ffc0; - width: 100%; - height: 200px; - padding: 10px; - font-size: 18px; + .addNoteContainer { + position: relative; + + .addNote { + border: 0; + background-color: #f9ffc0; + width: 100%; + height: 200px; + padding: 10px; + font-size: 18px; + } + + .addNoteButton { + position: absolute; + top: 10px; + right: 12.5px; + } } .note { diff --git a/src/shared/components/photo-or-note-field.tsx b/src/shared/components/photo-or-note-field.tsx index a3d10e2..09224e1 100644 --- a/src/shared/components/photo-or-note-field.tsx +++ b/src/shared/components/photo-or-note-field.tsx @@ -223,22 +223,33 @@ export const PhotoOrNoteField: React.FC = props => { const handleSelectNoteSubTab = () => setSubTab("note"); const handleSelectPhotoSubTab = () => setSubTab("photo"); - const handleAddNoteKeyUp = (e: React.KeyboardEvent) => { + const getAddNoteContent = () => { if (!inputDisabled && addNoteRef.current) { - const note = addNoteRef.current.value.trim(); - if ((note.length > 0) && (e.keyCode === 13)) { - e.preventDefault(); - updateFormData([{ - isPhoto: false, - localPhotoUrl: "", - remotePhotoUrl: "", - note, - timestamp: timestamp() - }, ...formData]); + return addNoteRef.current.value.trim(); + } + return ""; + }; + const handleAddNote = () => { + const note = getAddNoteContent(); + if (note.length > 0) { + updateFormData([{ + isPhoto: false, + localPhotoUrl: "", + remotePhotoUrl: "", + note, + timestamp: timestamp() + }, ...formData]); + if (addNoteRef.current) { addNoteRef.current.value = ""; } } }; + const handleAddNoteKeyUp = (e: React.KeyboardEvent) => { + if ((getAddNoteContent().length > 0) && (e.keyCode === 13)) { + e.preventDefault(); + handleAddNote(); + } + }; const handleDeletePhotoOrNote = (item: IPhotoOrNote) => { if (inputDisabled) { return; @@ -274,7 +285,10 @@ export const PhotoOrNoteField: React.FC = props => { const renderNoteSubTab = () => { return (
- {!inputDisabled &&