Unable to use multi-select and its giving error

[deepak-sisodiya]

Affected Projects Vue.JS

Library Version: x.y.z "@appbaseio/reactivesearch-vue": "3.1.0-alpha.1",

Describe the bug I am migrating our app from vue 2 to vue 3, so also need to migrate appbase. there is is migration docs which we following. everything seems work but when we filter it gives this error

bugsnag.js:2688 {"settings":{"took":6,"searchTook":2},"SearchResults":{"error":{"root_cause":[{"type":"illegal_argument_exception","reason":"Text fields are not optimised for operations that require per-document field data like aggregations and sorting, so these operations are disabled by default. Please use a keyword field instead. Alternatively, set fielddata=true on [email] in order to load field data by uninverting the inverted index. Note that this can use significant memory."}],"type":"search_phase_execution_exception","reason":"all shards failed","phase":"query","grouped":true,"failed_shards":[{"shard":0,"index":"4760d3c8-ab04-450d-b83c-83ff9bdc1d0d","node":"Fa2quZrSSlCuIwgA2TZRVg","reason":{"type":"illegal_argument_exception","reason":"Text fields are not optimised for operations that require per-document field data like aggregations and sorting, so these operations are disabled by default. Please use a keyword field instead. Alternatively, set fielddata=true on [email] in order to load field data by uninverting the inverted index. Note that this can use significant memory."}}],"caused_by":{"type":"illegal_argument_exception","reason":"Text fields are not optimised for operations that require per-document field data like aggregations and sorting, so these operations are disabled by default. Please use a keyword field instead. Alternatively, set fielddata=true on [email] in order to load field data by uninverting the inverted index. Note that this can use significant memory.","caused_by":{"type":"illegal_argument_exception","reason":"Text fields are not optimised for operations that require per-document field data like aggregations and sorting, so these operations are disabled by default. Please use a keyword field instead. Alternatively, set fielddata=true on [email] in order to load field data by uninverting the inverted index. Note that this can use significant memory."}}},"status":400}}
console.<computed> @ bugsnag.js:2688
handleError @ utils.js:1
eval @ query.js:1

Desktop (please complete the following information):

• Browser [e.g. chrome]

  here is my component code

  
  
  <template>
  <!-- use v-show here because the popup can still stay open while the page is loading -->
  <tr>
  <th
    v-for="header of headers"
    :key="header.text"
    class="tw-border-r tw-border-r-slate-200 !tw-border-b-slate-200 !tw-bg-slate-100 !tw-min-w-[100px]"
  >
    <div class="tw-flex tw-items-center tw-justify-between">
      <div class="tw-mr-1 tw-text-sm tw-font-semibold tw-text-slate-600" :class="['text', { hidden: !header.text }]">
        {{ header.text }}
      </div>
      <div v-if="!header.text" class="tw-flex tw-flex-1 tw-items-center tw-justify-center">
        <input
          type="checkbox"
          class="tw-h-4 tw-w-4 tw-rounded tw-border-solid tw-border-slate-500 tw-text-indigo-600 focus:tw-ring-indigo-500 dark:tw-bg-black"
          :checked="allSelected"
          @change="toggleColumnSelected"
        />
      </div>
      <div v-else-if="header.value == 'user__magic_link' || header.value == 'date_registered'" />
      <v-menu v-else :modelValue="headerPopups[header.value]" :closeOnContentClick="false">
        <template #activator="{ props }">
          <button class="tw-h-full tw-mt-1" v-bind="props">
            <MagnifyingGlass v-if="header.value == 'full_name' || header.value == 'email'" class="!tw-h-5 !tw-w-5" />
            <Funnel v-else class="!tw-h-5 !tw-w-5" />
          </button>
        </template>
        <div class="tw-bg-white tw-rounded tw-flex tw-items-center !tw-p-2">
          <multi-list
            v-if="header.value === 'role'"
            componentId="role"
            dataField="role"
            :innerClass="{
              list: '!tw-p-0'
            }"
          >
            <template #renderItem="{ label }">
              <div class="tw-flex tw-text-sm tw-space-2">
                {{ $store.state.registration.roleNames[label] }}
                <img
                  v-if="$store.state.registration.roleIcons[label]"
                  :src="$store.state.registration.roleIcons[label]"
                  style="width: 13px"
                />
              </div>
            </template>
          </multi-list>
          <data-search
            v-else-if="header.value === 'full_name'"
            queryFormat="and"
            componentId="full_name"
            className="inlineSearch"
            :dataField="['full_name']"
          />
          <data-search
            v-else-if="header.value === 'email'"
            queryFormat="and"
            componentId="email"
            className="inlineSearch"
            :dataField="['email']"
          />
          <multi-list
            v-else
            :componentId="header.value"
            :dataField="`${header.value}.keyword`"
            title=""
            :showCount="false"
            :size="500"
            :innerClass="{
              list: '!tw-p-0'
            }"
          >
            <template #renderItem="{ label }">
              <div class="tw-text-sm">
                {{ label }}
              </div>
            </template>
          </multi-list>
        </div>
      </v-menu>
    </div>
  </th>
  </tr>
  </template>

Parent component

[deepak-sisodiya]

on searching also, I am getting same error

<search-box
    placeholder="Search Registrants..."
    className="appbase-search"
    :innerClass="{
      list: 'search-bar-list'
    }"
    queryFormat="and"
    filterLabel="Search"
    componentId="SearchUsers"
    :dataField="['full_name']"
  />

[SavvyShah]

It seems something is wrong with dataField type in MultiList. Use role.keyword instead of role and see if the error goes away. Also you should use search-box instead of data-search in v3. Refer migration guide for other changes.

Also can you check by removing sortOptions key passed to ReactiveList, so we can just know the root cause if above doesn't work.

[siddharthlatest]

@deepak-sisodiya Based on the error message, the references for the use of the email field for either sorting or aggregations on the searchResults componentId. The code snippet you've shared looks fine to me, as I see that you're using email.keyword there. Perhaps narrow it down further based on the error message you see. You can try removing the component in question or sortOptions values to see if they help.

And for the searching use-case error, can you share the exact error message?

[deepak-sisodiya]

@SavvyShah @siddharthlatest Thanks for the reply. I switched to other things in between. today I checked it.

Here is the update.

1. I removed sortOptions from ReactiveList , searching and filter for each column starts working now.
2. I replaced the data-search with search-box, missed it while doing migration.

New issues

1. we do not have sorting UI now. If we have sortOptions again, other things do not work.
2. following code is not working for refresh list - this issues is not due to removing sortOptions,

refreshList: throttle(function () {
      const datalist = this.$refs.datalist;

      if (datalist) {
        this.setLoadingRegistration(true);
        if (!this.columns?.length) {
          this.fetchColumns();
        }
        const currentPage = datalist.$el.__vue__.currentPageState;
        datalist.$el.__vue__.setPage(currentPage + 1);

        setTimeout(() => {
          datalist.$el.__vue__.setPage(currentPage);
          this.setLoadingRegistration(false);
        }, 100);
      } else {
        LogRocket.info('Could not refresh by page change because reactivebase was not found!');
      }
    }, 2000),

error is - Cannot read properties of undefined (reading 'currentPageState').

Please help @SavvyShah @siddharthlatest

[siddharthlatest]

@deepak-sisodiya Thanks for the update, glad to see that you got the search UI working.

On the new issues, would you be able to reproduce these two issues with one of our public demos?

[deepak-sisodiya]

@siddharthlatest where is public demo link?

[deepak-sisodiya]

@siddharthlatest @SavvyShah I have refresh button outside of table, how can I set the setPage, is there any way for it.

[deepak-sisodiya]

on refresh, I want to set page to 1

[siddharthlatest]

@deepak-sisodiya For the public demo, you can use this: https://codesandbox.io/s/github/appbaseio/vue-quick-start/tree/step-5/?from-embed (It has searchbox and reactive list). See if you can reproduce the issue by including sort options and the page operation

[deepak-sisodiya]

@siddharthlatest

1. we do not have sorting UI now. If we have sortOptions again, other things do not work. this is fixed by removing dataField and passing sortOptions

2. following code is not working for refresh list I changed the logic for it, seems working

thanks