feat: support wrapped input (#25), closes #11, closes #18

* feat: support wrapped input

* test(e2e): wrapped input

Co-authored-by: 尹程程 <yincc@idss-cn.com>
Co-authored-by: Guillaume Chau <guillaume.b.chau@gmail.com>

packages/test-e2e/src/router.js

@@ -9,6 +9,7 @@ import OmitKey from './views/OmitKey.vue'
 import MapInsert from './views/MapInsert.vue'
 import Limit from './views/Limit.vue'
 import ItemSlot from './views/ItemSlot.vue'
+import WrappedInput from './views/WrappedInput.vue'
 
 Vue.use(VueRouter)
 
@@ -49,6 +50,10 @@ const routes = [
     path: '/item-slot',
     component: ItemSlot,
   },
+  {
+    path: '/wrapped-input',
+    component: WrappedInput,
+  },
 ]
 
 const router = new VueRouter({

packages/test-e2e/src/views/WrappedInput.vue

@@ -0,0 +1,61 @@
+<script>
+export default {
+  components: {
+    WrappedTextarea: {
+      render (h) {
+        return <div>
+          <textarea class="input"/>
+        </div>
+      },
+    },
+
+    WrappedInput: {
+      render (h) {
+        return <div>
+          <input class="input"/>
+        </div>
+      },
+    },
+  },
+
+  data () {
+    return {
+      items: [
+        {
+          value: 'akryum',
+          firstName: 'Guillaume',
+        },
+        {
+          value: 'posva',
+          firstName: 'Eduardo',
+        },
+        {
+          value: 'atinux',
+          firstName: 'Sébastien',
+        },
+      ],
+      useTextarea: true,
+    }
+  },
+}
+</script>
+
+<template>
+  <div
+    class="demo"
+  >
+    <label class="toggle">
+      <input type="checkbox" v-model="useTextarea">
+      Use textarea
+    </label>
+
+    <Mentionable
+      :keys="['@']"
+      :items="items"
+    >
+      <WrappedTextarea v-if="useTextarea" />
+
+      <WrappedInput v-else />
+    </Mentionable>
+  </div>
+</template>

packages/test-e2e/tests/e2e/specs/wrapped-input.js

@@ -0,0 +1,24 @@
+describe('wrapped input support', () => {
+  it('finds the textarea', () => {
+    cy.visit('/wrapped-input')
+    cy.get('.input').type('abc')
+    cy.get('.popover').should('not.exist')
+    cy.get('.input').type(' @')
+    cy.get('.popover').should('be.visible')
+      .should('contain', 'akryum')
+      .should('contain', 'posva')
+      .should('contain', 'atinux')
+  })
+
+  it('finds the input', () => {
+    cy.visit('/wrapped-input')
+    cy.get('.toggle').click()
+    cy.get('.input').type('abc')
+    cy.get('.popover').should('not.exist')
+    cy.get('.input').type(' @')
+    cy.get('.popover').should('be.visible')
+      .should('contain', 'akryum')
+      .should('contain', 'posva')
+      .should('contain', 'atinux')
+  })
+})

packages/vue-mention/src/Mentionable.vue

@@ -125,7 +125,11 @@ export default {
     getInput () {
       const [vnode] = this.$scopedSlots.default()
       if (vnode) {
-        return vnode.elm
+        if (vnode.elm.tagName === 'INPUT' || vnode.elm.tagName === 'TEXTAREA') {
+          return vnode.elm
+        } else {
+          return vnode.elm.querySelector('input') || vnode.elm.querySelector('textarea')
+        }
       }
       return null
     },