Dropdown list using afQuickField

Question

Am trying to add dropdown category field that has three options this is my code for this function

  category: {
    type: String,
    allowedValues: ["Android","IOS","Unity"],
    autoform: {
      afFieldInput: {
        firstOption: "(Select the Category)"
      }
    }
  }

It works fine when i use this piece of code

{{> quickForm collection="Products" id="insertProductForm" type="insert"}}

the dropdown list appears fine but when i use the code below to get the form

{{#autoForm collection="Products" id="inserP" type="insert"}}
    <fieldset>
      {{> afQuickField name='category'}}
    </fieldset>
    <button type="submit" class="btn btn-primary">Submit</button>
  {{/autoForm}}

i can see a category field but without a dropdown menu, (normal field that accept character input)

how can i show the dropdown list using afQuickField?

Answer 1

In the docs, there is the afFieldInput option which allows us to specify how each input element is to be built.

In your case the code will become:

{{#autoForm collection="Products" id="inserP" type="insert"}}
    <fieldset>
        {{> afFieldInput name='category' type='select'  options='allowed'}}
    </fieldset>
    <button type="submit" class="btn btn-primary">Submit</button>
{{/autoForm}}

type='select' specifies the type of input field to use.

options='allowed' specifies that we want to use allowedValues from the schema.