@ditojs/admin 2.7.3 → 2.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.7.3",
+  "version": "2.7.4",
   "type": "module",
   "description": "Dito.js Admin is a schema based admin interface for Dito.js Server, featuring auto-generated views and forms and built with Vue.js",
   "repository": "https://github.com/ditojs/dito/tree/master/packages/admin",
@@ -83,7 +83,7 @@
     "vite": "^4.3.5"
   },
   "types": "types",
-  "gitHead": "13bec1eda290997bdc10d110652180cdc9d3653b",
+  "gitHead": "6f35889443fbf18b1853dfaeb801766d197f0b87",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoSchema.vue

@@ -475,12 +475,14 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     repositionErrors() {
-      // Force repositioning of error tooltips, as otherwise they
-      // sometimes don't show up in the right place initially when
-      // changing tabs
-      const scrollParent = this.$refs.content.closest('.dito-scroll')
-      scrollParent.scrollTop++
-      scrollParent.scrollTop--
+      // Fire a fake scroll event to force the repositioning of error tooltips,
+      // as otherwise they sometimes don't show up in the right place initially
+      // when changing tabs.
+      const scrollContainer = this.$refs.content.closest('.dito-scroll')
+      const dispatch = () => scrollContainer.dispatchEvent(new Event('scroll'))
+      dispatch()
+      // This is required to handle `&--label-vertical` based layout changes.
+      setTimeout(dispatch, 0)
     },
 
     focus() {

package/src/mixins/TypeMixin.js

@@ -3,7 +3,7 @@ import ValidationMixin from './ValidationMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { computeValue } from '../utils/schema.js'
 import { getItem, getParentItem } from '../utils/data.js'
-import { camelize } from '@ditojs/utils'
+import { asArray, camelize } from '@ditojs/utils'
 
 // @vue/component
 export default {
@@ -251,9 +251,7 @@ export default {
     // @overridable
     async scrollIntoView() {
       await this.focusSchema()
-      let { element = this } = this.$refs
-      element = element.scrollIntoView ? element : element.$el
-      element.scrollIntoView?.({
+      this.getFocusElement()?.scrollIntoView?.({
         behavior: 'smooth',
         block: 'center'
       })
@@ -261,16 +259,17 @@ export default {
 
     // @overridable
     focusElement() {
-      let { element = this } = this.$refs
-      element = element.focus ? element : element.$el
-      element.focus?.()
+      this.getFocusElement()?.focus?.()
     },
 
     // @overridable
     blurElement() {
-      let { element = this } = this.$refs
-      element = element.blur ? element : element.$el
-      element.blur?.()
+      this.getFocusElement()?.blur?.()
+    },
+
+    getFocusElement() {
+      const element = asArray(this.$refs.element)[0] ?? this
+      return element.$el ?? element
     },
 
     async focusSchema() {