QSelect no-option template does not work with Typescript

[engineertdog]

What happened?

When reproducing the Github example layout, everyone except for the no-option template for QSelect works. What I've noticed is that vanilla JavaScript allows the template to work. However, when the Search bar is converted to TypeScript, the no-option template no longer works.

When you click on the search bar for the first time, it should display the contents of the no-option template. When the refs and functions for the search bar are converted to TypeScript, the contents of the no-option template no longer display. There are no errors in the log when this occurs.

What did you expect to happen?

When you convert the QSelect component's refs and functions to TypeScript, I would expect that the no-option template continues to work as it did with vanilla JavaScript.

Reproduction URL

https://github.com/engineertdog/quasar-qselect-demo

How to reproduce?

1. Clone reproduction repository
2. Run npm install
3. Run quasar dev
4. Click on the search bar

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar), TypeScript Support

Platforms/Browsers

Firefox

Quasar info output

Operating System - Windows_NT(10.0.22621) - win32/x64
NodeJs - 18.7.0

Global packages
  NPM - 8.15.0
  yarn - 1.22.15
  @quasar/cli - 1.3.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.10.0 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.6.2 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.15.5 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.41 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.5
  pinia - 2.0.23 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.19.3 -- Babel compiler core.
  webpack - 5.74.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.9.3 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

No response

[pdanpdan]

please make your reproduction work and we'll reopen

[engineertdog]

Codesandbox doesn't work as it should. I've replaced the reproduction URL with a repository with the issue.

[pdanpdan]

I don't understand what is not working for you - the QSelect in the toolbar that always has at least 2 values so no-option is not used?

[engineertdog]

That is incorrect.

There are no options upon initialization due to the line const filteredOptions = ref([]) and const options = ref(null). That means when you initially click on the QSelect, it will display the no-option template. In this case, it takes 2 seconds before the two options are shown because of this code in the filter function.

if (options.value === null) {
        // load data
        setTimeout(() => {
          options.value = stringOptions
          search.value.filter('')
        }, 2000)
        update()
        return
 }

This is the example layout using vanilla JavaScript:
https://user-images.githubusercontent.com/8217254/196979569-0c5f085e-fc5e-4215-a903-1b7cda0206cf.mp4

This is the broken version using TypeScript:
https://user-images.githubusercontent.com/8217254/196979768-30ef76be-642d-4558-8f27-3ef72cf0221b.mp4

The only difference between the two examples are the fact that the script section is TypeScript vs JavaScript. The component definition is exactly the same.

[pdanpdan]

You put the update I the wrong place

if (options.value === null) {
        // load data
        setTimeout(() => {
          options.value = stringOptions
          search.value.filter('')
          update()
        }, 2000)
        
        return
 }

[engineertdog]

That's not where it is in the gallery.

More importantly, that's not valid in TypeScript.

Even if you update the call to update(() => console.log("updated"));, it doesn't work. Can you provide a working typescript example?

[engineertdog]

Looking at it again, the gallery is correct, the update function does need to be outside of the setTimeout. However, the implementation in the linked gallery is wrong. You need to provide a callback function.

if (options.value === null) {
        // load data
        setTimeout(() => {
          options.value = stringOptions;
          search.value?.filter("");
        }, 2000);

        update(() => console.log("updated"));
        return;
}

[engineertdog]

Here is a clean TypeScript version for anyone that may need it.

import { defineComponent, ref, Ref } from "vue";
import { QSelect, QSelectProps } from "quasar";

const stringOptions = [
  "quasarframework/quasar",
  "quasarframework/quasar-awesome"
];

interface INavbarSearchOptions {
  label: string;
}
interface INavbarSearchFilteredOptions extends INavbarSearchOptions {
  type: string;
}

export default defineComponent({
  name: "NavbarSearch",
  setup: () => {
    const search = ref(null) as Ref<QSelect | null>;
    const searchText = ref("");
    const options = ref<string[] | null>(null);
    const filteredOptions = ref<Array<INavbarSearchOptions | INavbarSearchFilteredOptions>>([]);

    const filter: QSelectProps["onFilter"] = (filterVal: string, update) => {
      if (options.value === null) {
        // load data
        setTimeout(() => {
          options.value = stringOptions;
          search.value?.filter("");
        }, 2000);
      }

      update(() => searchUpdate(filterVal));
    };

    const searchUpdate = (filterVal?: string) => {
      if (options.value) {
        if (filterVal) {
          filteredOptions.value = [
            {
              label: filterVal,
              type: "In this repository"
            },
            {
              label: filterVal,
              type: "All GitHub"
            },
            ...options.value
              .filter(op => op.toLowerCase().includes(filterVal.toLowerCase()))
              .map(op => ({ label: op }))
          ];
        } else {
          filteredOptions.value = options.value.map(op => ({ label: op }));
        }
      }
    };

    return {
      search,
      searchText,
      options,
      filteredOptions,
      filter,
    };
  }
});