fix: remove attrs bind & css on wrapper if dynamic component

14nrv · Apr 12, 2021 · 4e8d764 · 4e8d764
1 parent 42779b2
commit 4e8d764
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 15 deletions.
diff --git a/src/components/Fields/Control.vue b/src/components/Fields/Control.vue
@@ -7,19 +7,19 @@
     :immediate="!!item.value"
     v-slot="{ errors, ariaInput }")
 
-    .control(:class="{'has-icons-left': item.iconLeft, 'has-icons-right': shouldShowErrorIcon}")
+    div(:class="{ 'control': !dynamicComponent, 'has-icons-left': item.iconLeft, 'has-icons-right': shouldShowErrorIcon }")
       component(v-model.lazy.trim="value",
-                v-bind="getDynamicComponentAttrs"
                 :item="item",
                 :is="dynamicComponent || `app-${getComponent}`",
                 :error="errors[0]",
                 :ariaInput="ariaInput")
 
-      span.icon.is-small.is-left(v-if="item.iconLeft")
-        i.fas(:class="`fa-${item.iconLeft}`")
-      span.icon.is-small.is-right(v-if="shouldShowErrorIcon")
-        i.fas.fa-exclamation-triangle
-      p.help.is-danger(v-if="errors.length") {{ errors[0] }}
+      span(v-if="!dynamicComponent")
+        span.icon.is-small.is-left(v-if="item.iconLeft")
+          i.fas(:class="`fa-${item.iconLeft}`")
+        span.icon.is-small.is-right(v-if="shouldShowErrorIcon")
+          i.fas.fa-exclamation-triangle
+        p.help.is-danger(v-if="errors.length") {{ errors[0] }}
 </template>
 
 <script>
@@ -84,10 +84,6 @@ export default {
     getComponent () {
       return this.isNormalInput ? 'input' : this.item.type
     },
-    getDynamicComponentAttrs () {
-      const { is, attr } = this.item
-      return is && attr ? attr : {}
-    },
     getRules () {
       const { rules = {}, pattern } = this.item
       rules.required = this.item.isRequired !== false

diff --git a/src/components/Form/FormComponent.spec.js b/src/components/Form/FormComponent.spec.js
@@ -39,6 +39,10 @@ const CustomField = Vue.component('CustomField', {
     item: {
       type: Object,
       required: true
+    },
+    error: {
+      type: String,
+      default: null
     }
   },
   mounted () {
@@ -50,7 +54,7 @@ const CustomField = Vue.component('CustomField', {
     }
   },
   render (h) {
-    return <input vOn:input={ this.handleClick } />
+    return <div><input vOn:input={this.handleClick} attrs={this.item.attr} /><p class="is-danger">{ this.error }</p></div>
   }
 })
 

diff --git a/src/components/Form/FormError.spec.js b/src/components/Form/FormError.spec.js
@@ -60,15 +60,15 @@ describe('Form Error', () => {
   it('show error if input value has not min length', async () => {
     const LABEL_INPUT_SLUGIFY = slug(LABEL_INPUT)
     const $inputTest = `input[name=${LABEL_INPUT_SLUGIFY}]`
-    const $error = `${$inputTest} ~ .help.is-danger`
+    const $error = `${$inputTest} ~ span .help.is-danger`
 
     expect($error).not.toBeADomElement()
 
     type('123456789', $inputTest)
     await flush()
 
     expect('.is-danger').toBeADomElement()
-    expect(`${$inputTest} ~ .icon.is-right`).toBeADomElement()
+    expect(`${$inputTest} ~ span .icon.is-right`).toBeADomElement()
 
     expect($error).toHaveText(`The ${LABEL_INPUT_SLUGIFY} field must be at least ${MIN_LENGTH} characters`, $error)
 
@@ -86,7 +86,7 @@ describe('Form Error', () => {
 
       it(`set ${isMinValue ? 'min' : 'max'} value control on input number`, async () => {
         const inputValue = (isMinValue ? val - 1 : val + 1).toString()
-        const $error = `${INPUT_NUMBER} ~ .help.is-danger`
+        const $error = `${INPUT_NUMBER} ~ span .help.is-danger`
 
         type(inputValue, INPUT_NUMBER)
         expect(INPUT_NUMBER).toHaveValue(inputValue)