fix(refs dplan-12315): Make multiselect validation vue3 compatible (#…

…1054)

CHANGELOG.md

@@ -5,6 +5,8 @@ Since v0.0.10, this Changelog is formatted according to the [Common Changelog][c
 ## UNRELEASED
 
 ### Fixed
+
+- ([#1054](https://github.com/demos-europe/demosplan-ui/pull/1054)) Fix validating dpMultiselect ([@salisdemos](https://github.com/salisdemos))
 - ([#1052](https://github.com/demos-europe/demosplan-ui/pull/1052)) Pass RowData from DpDataTableExtended to DpDataTable slots ([@salisdemos](https://github.com/salisdemos))
 
 ## v0.4.1 - 2024-10-07

src/components/DpMultiselect/DpMultiselect.vue

@@ -20,7 +20,6 @@
         name,
         options,
         placeholder,
-        required,
         searchable,
         selectGroupLabel,
         selectLabel,
@@ -29,6 +28,7 @@
         trackBy,
         value
       }"
+      :class="{ 'is-required' : required }"
       :data-cy="dataCy"
       :data-dp-validate-error-fieldname="dataDpValidateErrorFieldname"
       :model-value="value"

src/lib/validation/dpValidateMultiselectDirective.js

@@ -9,15 +9,17 @@ const dpValidateMultiselectDirective = {
     // Set initially correct validity value (no dropdown options => isValid)
     const component = binding.instance
     const hasOptions = component.groupValues ? component.options.some(group => group[component.groupValues].length > 0) : component.options.length > 0
-    el.setAttribute('data-dp-validate-is-valid', !hasOptions)
+
+    component.$el.setAttribute('data-dp-validate-is-valid', !hasOptions)
     const validateMultiselectField = (e) => {
       e.stopPropagation()
-      const validate = (e) => {
+      const validate = () => {
         document.removeEventListener('mouseup', validate)
         validateMultiselect(el)
       }
       document.addEventListener('mouseup', validate)
     }
+
     el.addEventListener('mouseup', validateMultiselectField)
   },
 
@@ -28,19 +30,20 @@ const dpValidateMultiselectDirective = {
 
     const component = binding.instance
     const hasOptions = component.groupValues ? component.options.some(group => group[component.groupValues].length > 0) : component.options.length > 0
-    let isValid = checkValue(component.value)
-    if (hasOptions === false) {
-      isValid = true
-    }
-    el.setAttribute('data-dp-validate-is-valid', isValid)
+    const isValid = !hasOptions ? true : checkValue(component.value)
+
+    component.$el.setAttribute('data-dp-validate-is-valid', isValid)
+    validateMultiselect(component.$el)
   }
 }
 
 function checkValue (val) {
   if (!val) {
     return false
   }
+
   let isValid
+
   if (Array.isArray(val)) { // If it is a multiple select, value is Array
     if (val.length === 0) {
       isValid = false
@@ -54,6 +57,7 @@ function checkValue (val) {
   } else if (typeof val === 'string') { // In single selects value is object or string
     isValid = val !== ''
   }
+
   return isValid
 }