diff --git a/client/src/components/Libraries/LibrariesList.vue b/client/src/components/Libraries/LibrariesList.vue
index 8d3dd475a4f..673885dcff8 100644
--- a/client/src/components/Libraries/LibrariesList.vue
+++ b/client/src/components/Libraries/LibrariesList.vue
@@ -51,30 +51,31 @@
                 <textarea
                     v-if="row.item.editMode"
                     class="form-control input_library_name"
-                    :ref="`name-${row.item.id}`"
-                    :value="row.item.name"
+                    v-model="row.item.name"
                     rows="3"
                 />
 
                 <div class="deleted-item" v-else-if="row.item.deleted && include_deleted">{{ row.item.name }}</div>
                 <b-link v-else :to="{ path: `folders/${row.item.root_folder_id}` }">{{ row.item.name }}</b-link>
             </template>
-            <template v-slot:cell(description)="row">
+            <template v-slot:cell(description)="{ item }">
                 <LibraryEditField
-                    @toggleDescriptionExpand="toggleDescriptionExpand(row.item)"
-                    :ref="`description-${row.item.id}`"
-                    :is-expanded="row.item.isExpanded"
-                    :is-edit-mode="row.item.editMode"
-                    :text="row.item.description"
+                    @toggleDescriptionExpand="toggleDescriptionExpand(item)"
+                    :ref="`description-${item.id}`"
+                    :is-expanded="item.isExpanded"
+                    :is-edit-mode="item.editMode"
+                    :text="item.description"
+                    :changed-value.sync="item[newDescriptionProperty]"
                 />
             </template>
-            <template v-slot:cell(synopsis)="row">
+            <template v-slot:cell(synopsis)="{ item }">
                 <LibraryEditField
-                    @toggleDescriptionExpand="toggleDescriptionExpand(row.item)"
-                    :ref="`synopsis-${row.item.id}`"
-                    :is-expanded="row.item.isExpanded"
-                    :is-edit-mode="row.item.editMode"
-                    :text="row.item.synopsis"
+                    @toggleDescriptionExpand="toggleDescriptionExpand(item)"
+                    :ref="`synopsis-${item.id}`"
+                    :is-expanded="item.isExpanded"
+                    :is-edit-mode="item.editMode"
+                    :text="item.synopsis"
+                    :changed-value.sync="item[newSynopsisProperty]"
                 />
             </template>
             <template v-slot:cell(is_unrestricted)="row">
@@ -208,6 +209,8 @@ export default {
     data() {
         const galaxy = getGalaxyInstance();
         return {
+            newDescriptionProperty: "newDescription",
+            newSynopsisProperty: "newSynopsis",
             isNewLibFormVisible: false,
             currentPage: 1,
             fields: fields,
@@ -245,8 +248,14 @@ export default {
             this.$refs.libraries_list.refresh();
         },
         saveChanges(item) {
-            item.description = this.$refs[`description-${item.id}`].textField;
-            item.synopsis = this.$refs[`synopsis-${item.id}`].textField;
+            const description = item[this.newDescriptionProperty];
+            const synopsis = item[this.newSynopsisProperty];
+            if (description) {
+                item.description = description;
+            }
+            if (synopsis) {
+                item.synopsis = synopsis;
+            }
             this.services.saveChanges(
                 item,
                 () => {
diff --git a/client/src/components/Libraries/LibraryEditField.vue b/client/src/components/Libraries/LibraryEditField.vue
index 7d20e88427c..41259336464 100644
--- a/client/src/components/Libraries/LibraryEditField.vue
+++ b/client/src/components/Libraries/LibraryEditField.vue
@@ -3,7 +3,7 @@
         <div class="text-field">
             <!-- edit mode -->
             <div v-if="isEditMode">
-                <textarea class="form-control" v-model="textField" rows="3" />
+                <b-form-textarea class="form-control" :value="text" @change="updateValue" rows="3" no-resize />
             </div>
             <!-- shrink long text -->
             <div v-else-if="text.length > maxDescriptionLength && !isExpanded">
@@ -45,6 +45,9 @@ export default {
         text: {
             type: String,
         },
+        changedValue: {
+            type: String,
+        },
         isEditMode: {
             type: Boolean,
         },
@@ -55,10 +58,12 @@ export default {
     data() {
         return {
             maxDescriptionLength: MAX_DESCRIPTION_LENGTH,
-            textField: this.text,
         };
     },
     methods: {
+        updateValue(value) {
+            this.$emit("update:changedValue", value);
+        },
         toggleDescriptionExpand() {
             this.$emit("toggleDescriptionExpand");
         },