[BUG] Select component rendered as search field

[dschuhmann]

Environment

• Hosting type
  • [ ] Form.io
  • [x] Local deployment
    • Version: 2.3.0
• Formio.js version: ^4.14.0-rc.36
• Vue-formio version: 4.0.8
• Frontend framework: vue.js
• Vue version: ^2.6.14
• Browser: Firefox, Chrome
• Browser version: Firefox 94.0.2, Chrome 96.0.4664.45 (both latest)

Steps to Reproduce

1. Add Select component to form, populate with data (tried entering values directly as well as providing JSON)
2. Add form to vue component (via URL)
3. Navigate to select component in the form

Expected behavior

Seeing a dropdown selection, from which the provided values can be selected.

Observed behavior

The vue app displays a search field and renders the selectable values directly underneath it. When a value is selected, it is shown above the search field alongside a button to remove it. No dropdown selection is rendered.

The selection component is displayed correctly in the form.io preview. I also embedded the same form with the same data in the angular demo app, where it is also rendered correctly.

The fact that the form is rendering correctly in an angular app leads me to believe that the issue is with vue-formio or the way I am using it and not with formio itself. This is the first issue I am opening on github, I hope I chose an appropriate type and provided all necessary information.

Example

Screenshot of the incorrectly rendered form. Radio component is working fine, underneath the label "Dropdown selection" a select component should be displayed. In the screenshot the form is styled with bootstrap, but I also tried it without any styling information.

The code for the vue component.

<template>
  <div>
    <h1>{{ msg }}</h1>
    <div>
      <formio
        src="http://localhost:3001/path/to/form"
        url=""
        form=""
        submission=""
        options=""
      ></formio>
    </div>
  </div>
</template>

<script>
import { Form } from 'vue-formio'

export default {
  name: 'app',
  components: { formio: Form },
  data () {
    return {
      msg: 'FormIO testing site'
    }
  }
}
</script>