Wrong type ValidateProps.error / QFieldProps.error

[arnKo]

What happened?

The error prop of ValidateProps is defined in use-validate.js as boolean | null:

  error: {
    type: Boolean,
    default: null
  },

https://github.com/quasarframework/quasar/blob/dev/ui/src/composables/private/use-validate.js#L13-L16

However in the corresponding definitions file it is defined only as boolean:

    "error": {
      "type": "Boolean",
      "desc": "Does field have validation errors?",
      "category": "behavior"
    },

https://github.com/quasarframework/quasar/blob/dev/ui/src/composables/private/use-validate.json#L9-L13

This is especially a problem, as null is used in useField to hide or show the bottom container:

  const shouldRenderBottom = computed(() =>
    props.bottomSlots === true
    || props.hint !== void 0
    || hasRules.value === true
    || props.counter === true
    || props.error !== null
  )

https://github.com/quasarframework/quasar/blob/dev/ui/src/composables/private/use-field.js#L179-L185C1

This prevents us from hiding the bottom container when using the error prop in Typescript.

What did you expect to happen?

The type definition for the error prop should be corrected.

---

Additionally, I would suggest, not using a boolean | null prop and then checking the null value. Vue automatically sets false as default value for boolean props if no default is given. Therefore, when writing a wrapper component for a QField component (which IMO is a common use case), I have to carefully check for which boolean prop I have to define a default value.

Especially, when using the lastest feature of defining props with Typescript interfaces:

interface WrapperProps extends QFieldProps { ... }
defineProps<WrapperProps>()

Without a withDefaults that sets the error prop to null, the bottom container will always be visible which is clearly not intended.

Another example where this kind of wrapping a component leads to unexpected behavior is when the component uses the dark prop. Again, as default vue will set the prop to false which leads to the component being rendered in the light theme regardless of the globally configured theme.

Reproduction URL

https://stackblitz.com/edit/quasarframework-zqjz5g?file=README.md

How to reproduce?

It would be very helpful if you could add a forkable project with typescript to the issue template!

Flavour

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

Areas

Components (quasar), TypeScript Support

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[rstoenescu]

Fix will be available in Quasar v2.13.1.

This is a special case where indeed we need a way to determine if the prop was set by the user or not. We use null as default value especially because of this. When used, space should be allocated for it on the UI, otherwise it should not have a useless bottom padding for which everyone would complain. If we leave Vue with its false default, we don't actually know if it was set by the user or not. I hope this makes sense. What I've done was also add the default value in the API card (for both "error" and "dark" props throughout Quasar).