QInputProps.tabindex TypeScript property missing

[tohagan]

What happened?

When setting tabindex property on q-input via either ... <q-input tabindex="1" .... />
<q-input :tabindex="1" .... />

VS Code Typescript server reports the following error:

"(property) tabindex: number Type '{ tabindex: number; modelValue: string | null | undefined; name: string; type: "email"; label: string; dense: true; outlined: true; class: string; rules: (((val: string) => true | "This value is required") | ((val: string) => true | "Email is invalid"))[]; }' is not assignable to type 'IntrinsicAttributes & VNodeProps & AllowedComponentProps & ComponentCustomProps & QInputProps'. Property 'tabindex' does not exist on type 'IntrinsicAttributes & VNodeProps & AllowedComponentProps & ComponentCustomProps & QInputProps'.ts(2322)"

What did you expect to happen?

tabindex should be a consider a legal attribute for a <q-input> element and defined as

  /**
   * Tabindex HTML attribute value
   */
  tabindex?: number | string | undefined;

An examination of QInputProps in node_modules/quasar/dist/types/index.d.ts shows that the tabindex property is not defined as expected while many other Quasar component Props types (corresponding to elements that can accept focus) do include this property.

Reproduction URL

Can't reproduce this issue a codepen/jsFiddle (only in VS Code)

How to reproduce?

1. Add a <q-input> to a Quasar form
2. Add tabindex="1" or :tabindex="1" to the <q-input> element
3. Open in Visual Studio Code.
4. Run Quasar dev to rebuild
5. Visual Studio Code displays the TypeScript error above.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

TypeScript Support

Platforms/Browsers

No response

Quasar info output

NodeJs - 14.19.0

Global packages
  NPM - 6.14.16
  yarn - 1.22.18
  @quasar/cli - 1.3.2
  @quasar/icongenie - 2.5.2
  cordova - Not installed

Important local packages
  quasar - 2.7.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.5.3 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.14.0 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.12
  pinia - 2.0.11 -- 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.18.2 -- Babel compiler core.
  webpack - 5.72.1 -- 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.8.1 -- 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

[github-actions[bot]]

Hi @tohagan! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, Codesandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[metalsadman]

see -->> https://github.com/quasarframework/quasar/issues/13602

[tohagan]

So have you updated the QInputProps interface with this missing attribute? This is issues is not because of Volar ... please inspect QInputProps at the path indicated above.

[metalsadman]

can't reproduce in quasar vite or webpack cli

[tohagan]

OK ... so did you check QInputProps in node_modules/quasar/dist/types/index.d.ts as I've indicated above (please re-read the text above).

Reproducing this depends on your/my VS Code version. I'll try to get some time to check this and compare but in the meantime you can readily confirm this issue if you inspect the type definition for QInputProps.

[tohagan]

This what I'm seeing for this type ... and tablindex is missing while other types in this file include it.

export interface QInputProps {
  /**
   * Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of 'for' prop, if it exists
   */
  name?: string | undefined;
  /**
   * Custom mask or one of the predefined mask names
   */
  mask?: string | undefined;
  /**
   * Fills string with specified characters (or underscore if value is not string) to fill mask's length
   */
  fillMask?: boolean | string | undefined;
  /**
   * Fills string from the right side of the mask
   */
  reverseFillMask?: boolean | undefined;
  /**
   * Model will be unmasked (won't contain tokens/separation characters)
   */
  unmaskedValue?: boolean | undefined;
  /**
   * Model of the component; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
   */
  modelValue: string | number | null | undefined;
  /**
   * Does field have validation errors?
   */
  error?: boolean | undefined;
  /**
   * Validation error message (gets displayed only if 'error' is set to 'true')
   */
  errorMessage?: string | undefined;
  /**
   * Hide error icon when there is an error
   */
  noErrorIcon?: boolean | undefined;
  /**
   * Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules
   */
  rules?: ValidationRule[] | undefined;
  /**
   * By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it
   */
  reactiveRules?: boolean | undefined;
  /**
   * If set to boolean true then it checks validation status against the 'rules' only after field loses focus for first time; If set to 'ondemand' then it will trigger only when component's validate() method is manually called or when the wrapper QForm submits itself
   */
  lazyRules?: boolean | "ondemand" | undefined;
  /**
   * A text label that will “float” up above the input field, once the field gets focus
   */
  label?: string | undefined;
  /**
   * Label will be always shown above the field regardless of field content (if any)
   */
  stackLabel?: boolean | undefined;
  /**
   * Helper (hint) text which gets placed below your wrapped form component
   */
  hint?: string | undefined;
  /**
   * Hide the helper (hint) text when field doesn't have focus
   */
  hideHint?: boolean | undefined;
  /**
   * Prefix
   */
  prefix?: string | undefined;
  /**
   * Suffix
   */
  suffix?: string | undefined;
  /**
   * Color name for the label from the Quasar Color Palette; Overrides the 'color' prop; The difference from 'color' prop is that the label will always have this color, even when field is not focused
   */
  labelColor?: string | undefined;
  /**
   * Color name for component from the Quasar Color Palette
   */
  color?: string | undefined;
  /**
   * Color name for component from the Quasar Color Palette
   */
  bgColor?: string | undefined;
  /**
   * Notify the component that the background is a dark color
   */
  dark?: boolean | undefined;
  /**
   * Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the 'loading' slot.
   */
  loading?: boolean | undefined;
  /**
   * Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null
   */
  clearable?: boolean | undefined;
  /**
   * Custom icon to use for the clear button when using along with 'clearable' prop
   */
  clearIcon?: string | undefined;
  /**
   * Use 'filled' design for the field
   */
  filled?: boolean | undefined;
  /**
   * Use 'outlined' design for the field
   */
  outlined?: boolean | undefined;
  /**
   * Use 'borderless' design for the field
   */
  borderless?: boolean | undefined;
  /**
   * Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones)
   */
  standout?: boolean | string | undefined;
  /**
   * Enables label slot; You need to set it to force use of the 'label' slot if the 'label' prop is not set
   */
  labelSlot?: boolean | undefined;
  /**
   * Enables bottom slots ('error', 'hint', 'counter')
   */
  bottomSlots?: boolean | undefined;
  /**
   * Do not reserve space for hint/error/counter anymore when these are not used; As a result, it also disables the animation for those; It also allows the hint/error area to stretch vertically based on its content
   */
  hideBottomSpace?: boolean | undefined;
  /**
   * Show an automatic counter on bottom right
   */
  counter?: boolean | undefined;
  /**
   * Applies a small standard border-radius for a squared shape of the component
   */
  rounded?: boolean | undefined;
  /**
   * Remove border-radius so borders are squared; Overrides 'rounded' prop
   */
  square?: boolean | undefined;
  /**
   * Dense mode; occupies less space
   */
  dense?: boolean | undefined;
  /**
   * Match inner content alignment to that of QItem
   */
  itemAligned?: boolean | undefined;
  /**
   * Put component in disabled mode
   */
  disable?: boolean | undefined;
  /**
   * Put component in readonly mode
   */
  readonly?: boolean | undefined;
  /**
   * Focus field on initial component render
   */
  autofocus?: boolean | undefined;
  /**
   * Used to specify the 'id' of the control and also the 'for' attribute of the label that wraps it; If no 'name' prop is specified, then it is used for this attribute as well
   */
  for?: string | undefined;
  /**
   * Text to be displayed as shadow at the end of the text in the control; Does NOT applies to type=file
   */
  shadowText?: string | undefined;
  /**
   * Input type
   * Default value: text
   */
  type?:
    | "text"
    | "password"
    | "textarea"
    | "email"
    | "search"
    | "tel"
    | "file"
    | "number"
    | "url"
    | "time"
    | "date"
    | undefined;
  /**
   * Debounce amount (in milliseconds) when updating model
   */
  debounce?: string | number | undefined;
  /**
   * Specify a max length of model
   */
  maxlength?: string | number | undefined;
  /**
   * Make field autogrow along with its content (uses a textarea)
   */
  autogrow?: boolean | undefined;
  /**
   * Class definitions to be attributed to the underlying input tag
   */
  inputClass?: VueClassProp | undefined;
  /**
   * Style definitions to be attributed to the underlying input tag
   */
  inputStyle?: VueStyleProp | undefined;
  /**
   * When using the 'clearable' property, this event is emitted when the clear icon is clicked
   * @param value The previous value before clearing it
   */
  onClear?: (value: any) => void;
  /**
   * Emitted when the component needs to change the model; Is also used by v-model
   * @param value New model value
   */
  "onUpdate:modelValue"?: (value: string | number | null) => void;
  /**
   * Emitted when component gets focused
   * @param evt JS event object
   */
  onFocus?: (evt: Event) => void;
  /**
   * Emitted when component loses focus
   * @param evt JS event object
   */
  onBlur?: (evt: Event) => void;
}