Resolve "Editing overflowing content with the Editable component doesn't "scroll back" after saving"

changelog.md

@@ -19,6 +19,8 @@
   guide please use the updated .conf files to enable this feature).
 * **Premium** Tables and views can now be exported to JSON and XML.
 * Removed URL field max length and fixed the backend failing hard because of that.
+* Fixed bug where the focus of an Editable component was not always during and after
+  editing if the parent component had overflow hidden.
 * Templates:
   * Lightweight CRM
   * Wedding Planning
@@ -46,7 +48,7 @@
 ## Released (2021-04-08)
 
 * Added support for importing tables from XML files.
-* Added support for different character encodings when importing CSV files.
+* Added support for different** character encodings when importing CSV files.
 * Prevent websocket reconnect loop when the authentication fails.
 * Refactored the GridView component and improved interface speed.
 * Prevent websocket reconnect when the connection closes without error.

web-frontend/modules/core/assets/scss/helpers.scss

@@ -82,6 +82,10 @@
   user-select: initial !important;
 }
 
+.forced-text-overflow-initial {
+  text-overflow: initial !important;
+}
+
 .prevent-scroll {
   overflow: hidden !important;
 }

web-frontend/modules/core/components/Editable.vue

@@ -27,6 +27,7 @@ export default {
       editing: false,
       oldValue: '',
       newValue: '',
+      oldTextOverflow: '',
     }
   },
   watch: {
@@ -47,6 +48,14 @@ export default {
       this.$emit('editing', true)
       this.$nextTick(() => {
         focusEnd(this.$refs.editable)
+        // In almost all use cases, the parent has overflow hidden and in that case we
+        // need to see if the scrollLeft must be changed so that we can see the cursor
+        // which has been placed at the end.
+        const parent = this.$el.parentElement
+        if (parent.scrollWidth > parent.clientWidth) {
+          parent.scrollLeft = parent.scrollWidth - parent.clientWidth
+          parent.classList.add('forced-text-overflow-initial')
+        }
       })
     },
     /**
@@ -57,6 +66,16 @@ export default {
     change() {
       this.editing = false
       this.$emit('editing', false)
+      this.$nextTick(() => {
+        // In almost all use cases, the parent has overflow hidden and it could be that
+        // because of the cursor, the scrollLeft value has changed. Here we change it
+        // back to what is was before.
+        const parent = this.$el.parentElement
+        parent.classList.remove('forced-text-overflow-initial')
+        if (parent.scrollWidth > parent.clientWidth) {
+          parent.scrollLeft = 0
+        }
+      })
 
       if (this.oldValue === this.newValue) {
         return

web-frontend/modules/core/utils/dom.js

@@ -32,22 +32,11 @@ export const isDomElement = (obj) => {
  * @param element
  */
 export const focusEnd = (element) => {
+  const range = document.createRange()
+  const selection = window.getSelection()
+  range.selectNodeContents(element)
+  range.collapse(false)
+  selection.removeAllRanges()
+  selection.addRange(range)
   element.focus()
-
-  if (
-    typeof window.getSelection !== 'undefined' &&
-    typeof document.createRange !== 'undefined'
-  ) {
-    const range = document.createRange()
-    range.selectNodeContents(element)
-    range.collapse(false)
-    const sel = window.getSelection()
-    sel.removeAllRanges()
-    sel.addRange(range)
-  } else if (typeof document.body.createTextRange !== 'undefined') {
-    const textRange = document.body.createTextRange()
-    textRange.moveToElementText(element)
-    textRange.collapse(false)
-    textRange.select()
-  }
 }