Rich Select's required prop not working properly

[KimangKhenng]

I used with fetch-options to get options from servers. I put it inside a form so that the required prop can be used.
However, the required prop doesn't do anything when I try to submit. the form simply bypassed .
Here is my example:

<form method="post" @submit.prevent="submit">
..
<t-input-group
            label="Nationality"
            class="w-1/6"
        >
          <t-rich-select
                :fetch-options="fetchOptions"
                v-model="shareHolder.nationality"
                :minimum-input-length="3"
                clearable
                :required="true"
                :name="`shareHolders[${index}][nationality]`"
                placeholder="Select a nationality..."
                text-attribute="name"
                value-attribute="id"
            >
              <template
                  slot="label"
                  slot-scope="{ className, option, query }"
              >
                <div class="flex">
                  <div class="flex flex-col ml-2 text-gray-800">
                    <strong>{{ option.raw.name }}</strong>
                    <span class="text-sm leading-tight text-gray-700">{{ option.raw.country }}</span>
                  </div>
                </div>
              </template>
            </t-rich-select>
        </t-input-group>
..
</form>

[alfonsobries]

@KimangKhenng can yo share the fetch options method?

[KimangKhenng]

Thanks for your reply,

This is my fetch-options function.

fetchOptions (q) {
      return fetch(`${this.$config.baseURL + apiHead}miscellaneous/nationalities/search?name=${q}`)
          .then((response) => response.json())
          .then((data) => ({ results: data.items }))
}

[alfonsobries]

@KimangKhenng cannot find any issue with the method so maybe the result from your API request is not being properly formated, what do you see if you console.log(data.items) for example?

[KimangKhenng]

Hi @alfonsobries ,

Once again, thanks for your attention!
this is the console output when I search with keyword : cam

[
    {
        "id": "14e4783b-0ba3-44f1-adfa-6ddf09c2212b",
        "name": "Camarinense",
        "country": "Camarines Sur",
        "createdDate": "2021-07-12T16:02:24.244Z",
        "updatedDate": "2021-07-12T16:02:24.244Z"
    },
    {
        "id": "da3d5512-b948-48ed-aa3e-a5b6022a009a",
        "name": "Cambodian",
        "country": "Cambodia",
        "createdDate": "2021-07-12T16:02:24.244Z",
        "updatedDate": "2021-07-12T16:02:24.244Z"
    },
    {
        "id": "6164cc49-b551-4ebf-8af8-d0633f7f5dfc",
        "name": "Cameroonian",
        "country": "Cameroon",
        "createdDate": "2021-07-12T16:02:24.244Z",
        "updatedDate": "2021-07-12T16:02:24.244Z"
    },
    {
        "id": "c138225c-35a1-4946-b19e-a836f1c949c4",
        "name": "Camiguin",
        "country": "Camiguin",
        "createdDate": "2021-07-12T16:02:24.244Z",
        "updatedDate": "2021-07-12T16:02:24.244Z"
    },
    {
        "id": "bf3351bf-c0eb-44f7-b104-8d77622c0e90",
        "name": "Campanian",
        "country": "Campania",
        "createdDate": "2021-07-12T16:02:24.244Z",
        "updatedDate": "2021-07-12T16:02:24.244Z"
    },
    {
        "id": "3caf75db-dc27-4f4f-adcc-211216ff4227",
        "name": "Campechan",
        "country": "Campeche",
        "createdDate": "2021-07-12T16:02:24.244Z",
        "updatedDate": "2021-07-12T16:02:24.244Z"
    },
    {
        "id": "07f8758e-045d-47d0-b6ab-b341de3cf131",
        "name": "Campechano",
        "country": "Campeche",
        "createdDate": "2021-07-12T16:02:24.244Z",
        "updatedDate": "2021-07-12T16:02:24.244Z"
    },
    {
        "id": "71828606-c6bb-4f92-8fef-2cbeeb118cc7",
        "name": "Campineiro",
        "country": "Campinas",
        "createdDate": "2021-07-12T16:02:24.244Z",
        "updatedDate": "2021-07-12T16:02:24.244Z"
    },
    {
        "id": "1e0d5e2e-26c7-49de-a8df-6e7d990493f9",
        "name": "Maccam",
        "country": "Sunderland",
        "createdDate": "2021-07-12T16:02:24.244Z",
        "updatedDate": "2021-07-12T16:02:24.244Z"
    },
    {
        "id": "303a86c4-b4d7-4c42-8b05-664c044df3ad",
        "name": "North Camarinean",
        "country": "Camarines Norte",
        "createdDate": "2021-07-12T16:02:24.244Z",
        "updatedDate": "2021-07-12T16:02:24.244Z"
    },
    {
        "id": "21906c18-ab06-4825-947e-dd6b809af79a",
        "name": "South Camarinean",
        "country": "Camarines Sur",
        "createdDate": "2021-07-12T16:02:24.244Z",
        "updatedDate": "2021-07-12T16:02:24.244Z"
    }
]

[Mlekar]

It doesn't work with a regular rich select either (options supplied from an array for example). Even though the required prop is set, you can just submit anyway without any problems. So I believe the required prop doesn't do anything just in general.

[shawnhwei]

I've also noticed this. Seems "required" was forgotten in the renderer.

vue-tailwind/src/renderers/TRichSelectRenderer.ts

Line 149 in 7abbabc

attrs: {

.