quasar 2.19.2 → 2.20.0

package/src/components/select/QSelect.js

@@ -1,13 +1,13 @@
 import {
-  h,
-  ref,
   computed,
-  watch,
+  getCurrentInstance,
+  h,
+  nextTick,
+  onBeforeUnmount,
   onBeforeUpdate,
   onUpdated,
-  onBeforeUnmount,
-  nextTick,
-  getCurrentInstance
+  ref,
+  watch
 } from 'vue'
 
 import QField from '../field/QField.js'
@@ -22,32 +22,33 @@ import QMenu from '../menu/QMenu.js'
 import QDialog from '../dialog/QDialog.js'
 
 import useField, {
-  useFieldState,
-  useFieldProps,
+  fieldValueIsFilled,
   useFieldEmits,
-  fieldValueIsFilled
+  useFieldProps,
+  useFieldState
 } from '../../composables/private.use-field/use-field.js'
 import {
   useVirtualScroll,
   useVirtualScrollProps
 } from '../virtual-scroll/use-virtual-scroll.js'
 import {
-  useFormProps,
-  useFormInputNameAttr
+  useFormInputNameAttr,
+  useFormProps
 } from '../../composables/use-form/private.use-form.js'
 import useKeyComposition from '../../composables/private.use-key-composition/use-key-composition.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { isDeepEqual } from '../../utils/is/is.js'
-import { stop, prevent, stopAndPrevent } from '../../utils/event/event.js'
+import { prevent, stop, stopAndPrevent } from '../../utils/event/event.js'
 import { normalizeToInterval } from '../../utils/format/format.js'
 import {
-  shouldIgnoreKey,
-  isKeyCode
+  isKeyCode,
+  shouldIgnoreKey
 } from '../../utils/private.keyboard/key-composition.js'
 import { hMergeSlot } from '../../utils/private.render/render.js'
 
 const validateNewValueMode = v => ['add', 'add-unique', 'toggle'].includes(v)
+// oxlint-disable-next-line no-template-curly-in-string
 const reEscapeList = '.*+?^${}()|[]\\'
 const fieldPropsList = Object.keys(useFieldProps)
 
@@ -213,7 +214,7 @@ export default createComponent({
 
     const virtualScrollItemSizeComputed = computed(() =>
       props.virtualScrollItemSize === void 0
-        ? props.optionsDense === true
+        ? props.optionsDense
           ? 24
           : 48
         : props.virtualScrollItemSize
@@ -237,23 +238,20 @@ export default createComponent({
     const state = useFieldState()
 
     const innerValue = computed(() => {
-      const mapNull = props.mapOptions === true && props.multiple !== true,
+      const mapNull = props.mapOptions && !props.multiple,
         val =
-          props.modelValue !== void 0 &&
-          (props.modelValue !== null || mapNull === true)
-            ? props.multiple === true && Array.isArray(props.modelValue)
+          props.modelValue !== void 0 && (props.modelValue !== null || mapNull)
+            ? props.multiple && Array.isArray(props.modelValue)
               ? props.modelValue
               : [props.modelValue]
             : []
 
-      if (props.mapOptions === true && Array.isArray(props.options) === true) {
+      if (props.mapOptions && Array.isArray(props.options)) {
         const cache =
-          props.mapOptions === true && innerValueCache !== void 0
-            ? innerValueCache
-            : []
+          props.mapOptions && innerValueCache !== void 0 ? innerValueCache : []
         const values = val.map(v => getOption(v, cache))
 
-        return props.modelValue === null && mapNull === true
+        return props.modelValue === null && mapNull
           ? values.filter(v => v !== null)
           : values
       }
@@ -281,7 +279,7 @@ export default createComponent({
     const computedInputClass = computed(() => {
       let cls = 'q-field__input q-placeholder col'
 
-      if (props.hideSelected === true || innerValue.value.length === 0) {
+      if (props.hideSelected || innerValue.value.length === 0) {
         return [cls, props.inputClass]
       }
 
@@ -292,9 +290,8 @@ export default createComponent({
 
     const menuContentClass = computed(
       () =>
-        (props.virtualScrollHorizontal === true
-          ? 'q-virtual-scroll--horizontal'
-          : '') + (props.popupContentClass ? ' ' + props.popupContentClass : '')
+        (props.virtualScrollHorizontal ? 'q-virtual-scroll--horizontal' : '') +
+        (props.popupContentClass ? ' ' + props.popupContentClass : '')
     )
 
     const noOptions = computed(() => virtualScrollLength.value === 0)
@@ -308,29 +305,26 @@ export default createComponent({
     )
 
     const needsHtmlFn = computed(() =>
-      props.optionsHtml === true ? () => true : opt => opt?.html === true
+      props.optionsHtml ? () => true : opt => opt?.html === true
     )
 
     const valueAsHtml = computed(
       () =>
-        props.displayValueHtml === true ||
+        props.displayValueHtml ||
         (props.displayValue === void 0 &&
-          (props.optionsHtml === true ||
-            innerValue.value.some(needsHtmlFn.value)))
+          (props.optionsHtml || innerValue.value.some(needsHtmlFn.value)))
     )
 
-    const tabindex = computed(() =>
-      state.focused.value === true ? props.tabindex : -1
-    )
+    const tabindex = computed(() => (state.focused.value ? props.tabindex : -1))
 
     const comboboxAttrs = computed(() => {
       const attrs = {
         tabindex: props.tabindex,
         role: 'combobox',
         'aria-label': props.label,
-        'aria-readonly': props.readonly === true ? 'true' : 'false',
-        'aria-autocomplete': props.useInput === true ? 'list' : 'none',
-        'aria-expanded': menu.value === true ? 'true' : 'false',
+        'aria-readonly': props.readonly ? 'true' : 'false',
+        'aria-autocomplete': props.useInput ? 'list' : 'none',
+        'aria-expanded': menu.value ? 'true' : 'false',
         'aria-controls': `${state.targetUid.value}_lb`
       }
 
@@ -345,7 +339,7 @@ export default createComponent({
     const listboxAttrs = computed(() => ({
       id: `${state.targetUid.value}_lb`,
       role: 'listbox',
-      'aria-multiselectable': props.multiple === true ? 'true' : 'false'
+      'aria-multiselectable': props.multiple ? 'true' : 'false'
     }))
 
     const selectedScope = computed(() =>
@@ -361,15 +355,13 @@ export default createComponent({
     )
 
     const optionScope = computed(() => {
-      if (virtualScrollLength.value === 0) {
-        return []
-      }
+      if (virtualScrollLength.value === 0) return []
 
       const { from, to } = virtualScrollSliceRange.value
 
       return props.options.slice(from, to).map((opt, i) => {
         const disable = isOptionDisabled.value(opt) === true
-        const active = isOptionSelected(opt) === true
+        const active = isOptionSelected(opt)
         const index = from + i
 
         const itemProps = {
@@ -383,19 +375,19 @@ export default createComponent({
           dense: props.optionsDense,
           dark: isOptionsDark.value,
           role: 'option',
-          'aria-selected': active === true ? 'true' : 'false',
+          'aria-selected': active ? 'true' : 'false',
           id: `${state.targetUid.value}_${index}`,
           onClick: () => {
             toggleOption(opt)
           }
         }
 
-        if (disable !== true) {
+        if (!disable) {
           if (optionIndex.value === index) itemProps.focused = true
 
-          if ($q.platform.is.desktop === true) {
+          if ($q.platform.is.desktop) {
             itemProps.onMousemove = () => {
-              if (menu.value === true) setOptionIndex(index)
+              if (menu.value) setOptionIndex(index)
             }
           }
         }
@@ -422,11 +414,11 @@ export default createComponent({
 
     const squaredMenu = computed(
       () =>
-        props.optionsCover === false &&
-        props.outlined !== true &&
-        props.standout !== true &&
-        props.borderless !== true &&
-        props.rounded !== true
+        !props.optionsCover &&
+        !props.outlined &&
+        !props.standout &&
+        !props.borderless &&
+        !props.rounded
     )
 
     const computedOptionsSelectedClass = computed(() =>
@@ -450,7 +442,8 @@ export default createComponent({
     )
 
     // returns method to tell if an option is disabled;
-    // takes into account 'option-disable' prop
+    // takes into account 'option-disable' prop;
+    // must be compared strictly to boolean true
     const isOptionDisabled = computed(() =>
       getPropValueFn(props.optionDisable, 'disable')
     )
@@ -472,7 +465,7 @@ export default createComponent({
         onKeypress: onTargetKeypress,
         onFocus: selectInputText,
         onClick(e) {
-          if (hasDialog === true) stop(e)
+          if (hasDialog) stop(e)
         }
       }
 
@@ -490,19 +483,16 @@ export default createComponent({
         innerValueCache = val
 
         if (
-          props.useInput === true &&
-          props.fillInput === true &&
-          props.multiple !== true &&
+          props.useInput &&
+          props.fillInput &&
+          !props.multiple &&
           // Prevent re-entering in filter while filtering
           // Also prevent clearing inputValue while filtering
-          state.innerLoading.value !== true &&
-          ((dialog.value !== true && menu.value !== true) ||
-            hasValue.value !== true)
+          !state.innerLoading.value &&
+          ((!dialog.value && !menu.value) || !hasValue.value)
         ) {
-          if (userInputValue !== true) resetInputValue()
-          if (dialog.value === true || menu.value === true) {
-            filter('')
-          }
+          if (!userInputValue) resetInputValue()
+          if (dialog.value || menu.value) filter('')
         }
       },
       { immediate: true }
@@ -515,13 +505,13 @@ export default createComponent({
     watch(virtualScrollLength, rerenderMenu)
 
     function getEmittingOptionValue(opt) {
-      return props.emitValue === true ? getOptionValue.value(opt) : opt
+      return props.emitValue ? getOptionValue.value(opt) : opt
     }
 
     function removeAtIndex(index) {
       if (index !== -1 && index < innerValue.value.length) {
-        if (props.multiple === true) {
-          const model = props.modelValue.slice()
+        if (props.multiple) {
+          const model = [...props.modelValue]
           emit('remove', { index, value: model.splice(index, 1)[0] })
           emit('update:modelValue', model)
         } else {
@@ -538,8 +528,8 @@ export default createComponent({
     function add(opt, unique) {
       const val = getEmittingOptionValue(opt)
 
-      if (props.multiple !== true) {
-        if (props.fillInput === true) {
+      if (!props.multiple) {
+        if (props.fillInput) {
           updateInputValue(getOptionLabel.value(opt), true, true)
         }
 
@@ -549,11 +539,11 @@ export default createComponent({
 
       if (innerValue.value.length === 0) {
         emit('add', { index: 0, value: val })
-        emit('update:modelValue', props.multiple === true ? [val] : val)
+        emit('update:modelValue', props.multiple ? [val] : val)
         return
       }
 
-      if (unique === true && isOptionSelected(opt) === true) return
+      if (unique && isOptionSelected(opt)) return
 
       if (
         props.maxValues !== void 0 &&
@@ -562,7 +552,7 @@ export default createComponent({
         return
       }
 
-      const model = props.modelValue.slice()
+      const model = [...props.modelValue]
 
       emit('add', { index: model.length, value: val })
       model.push(val)
@@ -571,7 +561,7 @@ export default createComponent({
 
     function toggleOption(opt, keepOpen) {
       if (
-        state.editable.value !== true ||
+        !state.editable.value ||
         opt === void 0 ||
         isOptionDisabled.value(opt) === true
       ) {
@@ -580,10 +570,10 @@ export default createComponent({
 
       const optValue = getOptionValue.value(opt)
 
-      if (props.multiple !== true) {
-        if (keepOpen !== true) {
+      if (!props.multiple) {
+        if (!keepOpen) {
           updateInputValue(
-            props.fillInput === true ? getOptionLabel.value(opt) : '',
+            props.fillInput ? getOptionLabel.value(opt) : '',
             true,
             true
           )
@@ -595,29 +585,26 @@ export default createComponent({
 
         if (
           innerValue.value.length === 0 ||
-          isDeepEqual(getOptionValue.value(innerValue.value[0]), optValue) !==
-            true
+          !isDeepEqual(getOptionValue.value(innerValue.value[0]), optValue)
         ) {
-          emit('update:modelValue', props.emitValue === true ? optValue : opt)
+          emit('update:modelValue', props.emitValue ? optValue : opt)
         }
 
         return
       }
 
-      if (hasDialog !== true || dialogFieldFocused.value === true) {
-        state.focus()
-      }
+      if (!hasDialog || dialogFieldFocused.value) state.focus()
 
       selectInputText()
 
       if (innerValue.value.length === 0) {
-        const val = props.emitValue === true ? optValue : opt
+        const val = props.emitValue ? optValue : opt
         emit('add', { index: 0, value: val })
-        emit('update:modelValue', props.multiple === true ? [val] : val)
+        emit('update:modelValue', props.multiple ? [val] : val)
         return
       }
 
-      const model = props.modelValue.slice(),
+      const model = [...props.modelValue],
         index = innerOptionsValue.value.findIndex(v => isDeepEqual(v, optValue))
 
       if (index !== -1) {
@@ -627,7 +614,7 @@ export default createComponent({
           return
         }
 
-        const val = props.emitValue === true ? optValue : opt
+        const val = props.emitValue ? optValue : opt
 
         emit('add', { index: model.length, value: val })
         model.push(val)
@@ -637,7 +624,7 @@ export default createComponent({
     }
 
     function setOptionIndex(index) {
-      if ($q.platform.is.desktop !== true) return
+      if (!$q.platform.is.desktop) return
 
       const val = index !== -1 && index < virtualScrollLength.value ? index : -1
 
@@ -648,7 +635,7 @@ export default createComponent({
 
     // oxlint-disable-next-line default-param-last
     function moveOptionSelection(localOffset = 1, skipInputValue) {
-      if (menu.value === true) {
+      if (menu.value) {
         let index = optionIndex.value
         do {
           index = normalizeToInterval(
@@ -666,11 +653,7 @@ export default createComponent({
           setOptionIndex(index)
           scrollTo(index)
 
-          if (
-            skipInputValue !== true &&
-            props.useInput === true &&
-            props.fillInput === true
-          ) {
+          if (!skipInputValue && props.useInput && props.fillInput) {
             setInputValue(
               index >= 0
                 ? getOptionLabel.value(props.options[index])
@@ -694,7 +677,7 @@ export default createComponent({
 
     function selectInputText(e) {
       if (
-        props.useInput === true &&
+        props.useInput &&
         targetRef.value !== null &&
         (e === void 0 ||
           (targetRef.value === e.target &&
@@ -708,7 +691,7 @@ export default createComponent({
       // if ESC and we have an opened menu
       // then stop propagation (might be caught by a QDialog
       // and so it will also close the QDialog, which is wrong)
-      if (isKeyCode(e, 27) === true && menu.value === true) {
+      if (isKeyCode(e, 27) && menu.value) {
         stop(e)
         // on ESC we need to close the dialog also
         hidePopup()
@@ -748,19 +731,16 @@ export default createComponent({
 
           if (option === void 0) return false
 
-          if (innerValue.value.indexOf(option) === -1) {
-            toggleOption(option)
-          } else {
-            hidePopup()
-          }
+          if (innerValue.value.includes(option)) hidePopup()
+          else toggleOption(option)
 
           return true
         }
         const fillFn = afterFilter => {
           if (
-            findFn(getOptionValue) !== true &&
-            afterFilter !== true &&
-            findFn(getOptionLabel) !== true
+            !findFn(getOptionValue) &&
+            !afterFilter &&
+            !findFn(getOptionLabel)
           ) {
             filter(value, true, () => fillFn(true))
           }
@@ -779,17 +759,17 @@ export default createComponent({
     function onTargetKeydown(e) {
       emit('keydown', e)
 
-      if (shouldIgnoreKey(e) === true) return
+      if (shouldIgnoreKey(e)) return
 
       const newValueModeValid =
         inputValue.value.length !== 0 &&
         (props.newValueMode !== void 0 || props.onNewValue !== void 0)
 
       const tabShouldSelect =
-        e.shiftKey !== true &&
-        props.disableTabSelection !== true &&
-        props.multiple !== true &&
-        (optionIndex.value !== -1 || newValueModeValid === true)
+        !e.shiftKey &&
+        !props.disableTabSelection &&
+        !props.multiple &&
+        (optionIndex.value !== -1 || newValueModeValid)
 
       // escape
       if (e.keyCode === 27) {
@@ -798,7 +778,7 @@ export default createComponent({
       }
 
       // tab
-      if (e.keyCode === 9 && tabShouldSelect === false) {
+      if (e.keyCode === 9 && !tabShouldSelect) {
         closeMenu()
         return
       }
@@ -806,17 +786,13 @@ export default createComponent({
       if (
         e.target === void 0 ||
         e.target.id !== state.targetUid.value ||
-        state.editable.value !== true
+        !state.editable.value
       ) {
         return
       }
 
       // down
-      if (
-        e.keyCode === 40 &&
-        state.innerLoading.value !== true &&
-        menu.value === false
-      ) {
+      if (e.keyCode === 40 && !state.innerLoading.value && !menu.value) {
         stopAndPrevent(e)
         showPopup()
         return
@@ -825,16 +801,13 @@ export default createComponent({
       // backspace
       if (
         e.keyCode === 8 &&
-        (props.useChips === true || props.clearable === true) &&
-        props.hideSelected !== true &&
+        (props.useChips || props.clearable) &&
+        !props.hideSelected &&
         inputValue.value.length === 0
       ) {
-        if (
-          props.multiple === true &&
-          Array.isArray(props.modelValue) === true
-        ) {
+        if (props.multiple && Array.isArray(props.modelValue)) {
           removeAtIndex(props.modelValue.length - 1)
-        } else if (props.multiple !== true && props.modelValue !== null) {
+        } else if (!props.multiple && props.modelValue !== null) {
           emit('update:modelValue', null)
         }
 
@@ -885,30 +858,29 @@ export default createComponent({
       // keyboard search when not having use-input
       if (
         optionsLength > 0 &&
-        props.useInput !== true &&
+        !props.useInput &&
         e.key !== void 0 &&
         e.key.length === 1 && // printable char
-        e.altKey === false && // not kbd shortcut
-        e.ctrlKey === false && // not kbd shortcut
-        e.metaKey === false && // not kbd shortcut, especially on macOS with Command key
+        !e.altKey && // not kbd shortcut
+        !e.ctrlKey && // not kbd shortcut
+        !e.metaKey && // not kbd shortcut, especially on macOS with Command key
         (e.keyCode !== 32 || searchBuffer.length !== 0) // space in middle of search
       ) {
-        if (menu.value !== true) showPopup(e)
+        if (!menu.value) showPopup(e)
 
         const char = e.key.toLocaleLowerCase(),
           keyRepeat = searchBuffer.length === 1 && searchBuffer[0] === char
 
         searchBufferExp = Date.now() + 1500
-        if (keyRepeat === false) {
+        if (!keyRepeat) {
           stopAndPrevent(e)
           searchBuffer += char
         }
 
         const searchRe = new RegExp(
           '^' +
-            searchBuffer
-              .split('')
-              .map(l => (reEscapeList.indexOf(l) !== -1 ? '\\' + l : l))
+            [...searchBuffer]
+              .map(l => (reEscapeList.includes(l) ? '\\' + l : l))
               .join('.*'),
           'i'
         )
@@ -916,17 +888,16 @@ export default createComponent({
         let index = optionIndex.value
 
         if (
-          keyRepeat === true ||
+          keyRepeat ||
           index < 0 ||
-          searchRe.test(getOptionLabel.value(props.options[index])) !== true
+          !searchRe.test(getOptionLabel.value(props.options[index]))
         ) {
           do {
             index = normalizeToInterval(index + 1, -1, optionsLength - 1)
           } while (
             index !== optionIndex.value &&
             (isOptionDisabled.value(props.options[index]) === true ||
-              searchRe.test(getOptionLabel.value(props.options[index])) !==
-                true)
+              !searchRe.test(getOptionLabel.value(props.options[index])))
           )
         }
 
@@ -935,11 +906,7 @@ export default createComponent({
             setOptionIndex(index)
             scrollTo(index)
 
-            if (
-              index >= 0 &&
-              props.useInput === true &&
-              props.fillInput === true
-            ) {
+            if (index >= 0 && props.useInput && props.fillInput) {
               setInputValue(getOptionLabel.value(props.options[index]), true)
             }
           })
@@ -948,12 +915,13 @@ export default createComponent({
         return
       }
 
-      // enter, space (when not using use-input and not in search), or tab (when not using multiple and option selected)
+      // enter, space (when not using use-input and not in search),
+      // or tab (when not using multiple and option selected)
       // same target is checked above
       if (
         e.keyCode !== 13 &&
-        (e.keyCode !== 32 || props.useInput === true || searchBuffer !== '') &&
-        (e.keyCode !== 9 || tabShouldSelect === false)
+        (e.keyCode !== 32 || props.useInput || searchBuffer !== '') &&
+        (e.keyCode !== 9 || !tabShouldSelect)
       ) {
         return
       }
@@ -965,22 +933,22 @@ export default createComponent({
         return
       }
 
-      if (newValueModeValid === true) {
+      if (newValueModeValid) {
         const done = (val, mode) => {
           if (mode) {
-            if (validateNewValueMode(mode) !== true) return
+            if (!validateNewValueMode(mode)) return
           } else {
             mode = props.newValueMode
           }
 
-          updateInputValue('', props.multiple !== true, true)
+          updateInputValue('', !props.multiple, true)
 
           if (val === void 0 || val === null) return
 
           const fn = mode === 'toggle' ? toggleOption : add
           fn(val, mode === 'add-unique')
 
-          if (props.multiple !== true) {
+          if (!props.multiple) {
             targetRef.value?.focus()
             hidePopup()
           }
@@ -992,18 +960,18 @@ export default createComponent({
           done(inputValue.value)
         }
 
-        if (props.multiple !== true) return
+        if (!props.multiple) return
       }
 
-      if (menu.value === true) {
+      if (menu.value) {
         closeMenu()
-      } else if (state.innerLoading.value !== true) {
+      } else if (!state.innerLoading.value) {
         showPopup()
       }
     }
 
     function getVirtualScrollEl() {
-      return hasDialog === true
+      return hasDialog
         ? menuContentRef.value
         : menuRef.value !== null && menuRef.value.contentEl !== null
           ? menuRef.value.contentEl
@@ -1015,28 +983,24 @@ export default createComponent({
     }
 
     function getSelection() {
-      if (props.hideSelected === true) {
-        return []
-      }
+      if (props.hideSelected) return []
 
       if (slots['selected-item'] !== void 0) {
-        return selectedScope.value
-          .map(scope => slots['selected-item'](scope))
-          .slice()
+        return selectedScope.value.map(scope => slots['selected-item'](scope))
       }
 
       if (slots.selected !== void 0) {
-        return [].concat(slots.selected())
+        return [slots.selected()].flat()
       }
 
-      if (props.useChips === true) {
+      if (props.useChips) {
         return selectedScope.value.map((scope, i) =>
           h(
             QChip,
             {
               key: 'option-' + i,
               removable:
-                state.editable.value === true &&
+                state.editable.value &&
                 isOptionDisabled.value(scope.opt) !== true,
               dense: true,
               textColor: props.color,
@@ -1048,7 +1012,7 @@ export default createComponent({
             () =>
               h('span', {
                 class: 'ellipsis',
-                [scope.html === true ? 'innerHTML' : 'textContent']:
+                [scope.html ? 'innerHTML' : 'textContent']:
                   getOptionLabel.value(scope.opt)
               })
           )
@@ -1058,14 +1022,14 @@ export default createComponent({
       return [
         h('span', {
           class: 'ellipsis',
-          [valueAsHtml.value === true ? 'innerHTML' : 'textContent']:
+          [valueAsHtml.value ? 'innerHTML' : 'textContent']:
             ariaCurrentValue.value
         })
       ]
     }
 
     function getAllOptions() {
-      if (noOptions.value === true) {
+      if (noOptions.value) {
         return slots['no-option'] !== void 0
           ? slots['no-option']({ inputValue: inputValue.value })
           : void 0
@@ -1085,8 +1049,7 @@ export default createComponent({
                   h(QItemSection, () =>
                     h(QItemLabel, () =>
                       h('span', {
-                        [scope.html === true ? 'innerHTML' : 'textContent']:
-                          scope.label
+                        [scope.html ? 'innerHTML' : 'textContent']: scope.label
                       })
                     )
                   )
@@ -1095,20 +1058,19 @@ export default createComponent({
       let options = padVirtualScroll('div', optionScope.value.map(fn))
 
       if (slots['before-options'] !== void 0) {
-        options = slots['before-options']().concat(options)
+        options = [slots['before-options'](), ...options].flat()
       }
 
       return hMergeSlot(slots['after-options'], options)
     }
 
     function getInput(fromDialog, isTarget) {
-      const attrs =
-        isTarget === true
-          ? { ...comboboxAttrs.value, ...state.splitAttrs.attributes.value }
-          : void 0
+      const attrs = isTarget
+        ? { ...comboboxAttrs.value, ...state.splitAttrs.attributes.value }
+        : void 0
 
       const data = {
-        ref: isTarget === true ? targetRef : void 0,
+        ref: isTarget ? targetRef : void 0,
         key: 'i_t',
         class: computedInputClass.value,
         style: props.inputStyle,
@@ -1116,18 +1078,17 @@ export default createComponent({
         // required for Android in order to show ENTER key when in form
         type: 'search',
         ...attrs,
-        id: isTarget === true ? state.targetUid.value : void 0,
+        id: isTarget ? state.targetUid.value : void 0,
         maxlength: props.maxlength,
         autocomplete: props.autocomplete,
-        'data-autofocus':
-          fromDialog === true || props.autofocus === true || void 0,
-        disabled: props.disable === true,
-        readonly: props.readonly === true,
+        'data-autofocus': fromDialog === true || props.autofocus || void 0,
+        disabled: props.disable,
+        readonly: props.readonly,
         ...inputControlEvents.value
       }
 
-      if (fromDialog !== true && hasDialog === true) {
-        if (Array.isArray(data.class) === true) {
+      if (!fromDialog && hasDialog) {
+        if (Array.isArray(data.class)) {
           data.class = [...data.class, 'no-pointer-events']
         } else {
           data.class += ' no-pointer-events'
@@ -1147,7 +1108,7 @@ export default createComponent({
         inputValueTimer = null
       }
 
-      if (e && e.target && e.target.qComposing === true) return
+      if (e?.target?.qComposing) return
 
       setInputValue(e.target.value || '')
       // mark it here as user input so that if updateInputValue is called
@@ -1155,10 +1116,7 @@ export default createComponent({
       userInputValue = true
       defaultInputValue = inputValue.value
 
-      if (
-        state.focused.value !== true &&
-        (hasDialog !== true || dialogFieldFocused.value === true)
-      ) {
+      if (!state.focused.value && (!hasDialog || dialogFieldFocused.value)) {
         state.focus()
       }
 
@@ -1175,7 +1133,7 @@ export default createComponent({
         inputValue.value = val
 
         if (
-          emitImmediately === true ||
+          emitImmediately ||
           props.inputDebounce === 0 ||
           props.inputDebounce === '0'
         ) {
@@ -1192,26 +1150,23 @@ export default createComponent({
     function updateInputValue(val, noFiltering, internal) {
       userInputValue = internal !== true
 
-      if (props.useInput === true) {
+      if (props.useInput) {
         setInputValue(val, true)
 
-        if (noFiltering === true || internal !== true) {
+        if (noFiltering || userInputValue) {
           defaultInputValue = val
         }
 
-        if (noFiltering !== true) filter(val)
+        if (!noFiltering) filter(val)
       }
     }
 
     function filter(val, keepClosed, afterUpdateFn) {
-      if (
-        props.onFilter === void 0 ||
-        (keepClosed !== true && state.focused.value !== true)
-      ) {
+      if (props.onFilter === void 0 || (!keepClosed && !state.focused.value)) {
         return
       }
 
-      if (state.innerLoading.value === true) {
+      if (state.innerLoading.value) {
         emit('filterAbort')
       } else {
         state.innerLoading.value = true
@@ -1220,16 +1175,16 @@ export default createComponent({
 
       if (
         val !== '' &&
-        props.multiple !== true &&
+        !props.multiple &&
         innerValue.value.length !== 0 &&
-        userInputValue !== true &&
+        !userInputValue &&
         val === getOptionLabel.value(innerValue.value[0])
       ) {
         val = ''
       }
 
       const localFilterId = setTimeout(() => {
-        if (menu.value === true) menu.value = false
+        if (menu.value) menu.value = false
       }, 10)
 
       if (filterId !== null) clearTimeout(filterId)
@@ -1240,7 +1195,7 @@ export default createComponent({
         val,
         (fn, afterFn) => {
           if (
-            (keepClosed === true || state.focused.value === true) &&
+            (keepClosed || state.focused.value) &&
             filterId === localFilterId
           ) {
             clearTimeout(filterId)
@@ -1253,10 +1208,10 @@ export default createComponent({
             nextTick(() => {
               state.innerLoading.value = false
 
-              if (state.editable.value === true) {
-                if (keepClosed === true) {
-                  if (menu.value === true) hidePopup()
-                } else if (menu.value === true) {
+              if (state.editable.value) {
+                if (keepClosed) {
+                  if (menu.value) hidePopup()
+                } else if (menu.value) {
                   updateMenu(true)
                 } else {
                   menu.value = true
@@ -1278,13 +1233,13 @@ export default createComponent({
           }
         },
         () => {
-          if (state.focused.value === true && filterId === localFilterId) {
+          if (state.focused.value && filterId === localFilterId) {
             clearTimeout(filterId)
             state.innerLoading.value = false
             innerLoadingIndicator.value = false
           }
 
-          if (menu.value === true) menu.value = false
+          if (menu.value) menu.value = false
         }
       )
     }
@@ -1297,11 +1252,8 @@ export default createComponent({
           class: menuContentClass.value,
           style: props.popupContentStyle,
           modelValue: menu.value,
-          fit: props.menuShrink !== true,
-          cover:
-            props.optionsCover === true &&
-            noOptions.value !== true &&
-            props.useInput !== true,
+          fit: !props.menuShrink,
+          cover: props.optionsCover && !noOptions.value && !props.useInput,
           anchor: props.menuAnchor,
           self: props.menuSelf,
           offset: props.menuOffset,
@@ -1378,7 +1330,7 @@ export default createComponent({
         )
       ]
 
-      if (menu.value === true) {
+      if (menu.value) {
         content.push(
           h(
             'div',
@@ -1400,7 +1352,7 @@ export default createComponent({
         {
           ref: dialogRef,
           modelValue: dialog.value,
-          position: props.useInput === true ? 'top' : void 0,
+          position: props.useInput ? 'top' : void 0,
           transitionShow: transitionShowComputed,
           transitionHide: props.transitionHide,
           transitionDuration: props.transitionDuration,
@@ -1416,12 +1368,8 @@ export default createComponent({
             {
               class:
                 'q-select__dialog' +
-                (isOptionsDark.value === true
-                  ? ' q-select__dialog--dark q-dark'
-                  : '') +
-                (dialogFieldFocused.value === true
-                  ? ' q-select__dialog--focused'
-                  : '')
+                (isOptionsDark.value ? ' q-select__dialog--dark q-dark' : '') +
+                (dialogFieldFocused.value ? ' q-select__dialog--focused' : '')
             },
             content
           )
@@ -1444,7 +1392,7 @@ export default createComponent({
 
     function onDialogHide(e) {
       hidePopup()
-      if (state.focused.value === false) emit('blur', e)
+      if (!state.focused.value) emit('blur', e)
       resetInputValue()
     }
 
@@ -1462,21 +1410,21 @@ export default createComponent({
     }
 
     function closeMenu() {
-      if (dialog.value === true) return
+      if (dialog.value) return
 
       optionIndex.value = -1
 
-      if (menu.value === true) {
+      if (menu.value) {
         menu.value = false
       }
 
-      if (state.focused.value === false) {
+      if (!state.focused.value) {
         if (filterId !== null) {
           clearTimeout(filterId)
           filterId = null
         }
 
-        if (state.innerLoading.value === true) {
+        if (state.innerLoading.value) {
           emit('filterAbort')
           state.innerLoading.value = false
           innerLoadingIndicator.value = false
@@ -1485,9 +1433,9 @@ export default createComponent({
     }
 
     function showPopup(e) {
-      if (state.editable.value !== true) return
+      if (!state.editable.value) return
 
-      if (hasDialog === true) {
+      if (hasDialog) {
         state.onControlFocusin(e)
         dialog.value = true
         nextTick(() => {
@@ -1499,7 +1447,7 @@ export default createComponent({
 
       if (props.onFilter !== void 0) {
         filter(inputValue.value)
-      } else if (noOptions.value !== true || slots['no-option'] !== void 0) {
+      } else if (!noOptions.value || slots['no-option'] !== void 0) {
         menu.value = true
       }
     }
@@ -1510,11 +1458,9 @@ export default createComponent({
     }
 
     function resetInputValue() {
-      if (props.useInput === true) {
+      if (props.useInput) {
         updateInputValue(
-          props.multiple !== true &&
-            props.fillInput === true &&
-            innerValue.value.length !== 0
+          !props.multiple && props.fillInput && innerValue.value.length !== 0
             ? getOptionLabel.value(innerValue.value[0]) || ''
             : '',
           true,
@@ -1526,7 +1472,7 @@ export default createComponent({
     function updateMenu(show) {
       let localOptionIndex = -1
 
-      if (show === true) {
+      if (show) {
         if (innerValue.value.length !== 0) {
           const val = getOptionValue.value(innerValue.value[0])
           localOptionIndex = props.options.findIndex(v =>
@@ -1541,11 +1487,11 @@ export default createComponent({
     }
 
     function rerenderMenu(newLength, oldLength) {
-      if (menu.value === true && state.innerLoading.value === false) {
+      if (menu.value && !state.innerLoading.value) {
         localResetVirtualScroll(-1, true)
 
         nextTick(() => {
-          if (menu.value === true && state.innerLoading.value === false) {
+          if (menu.value && !state.innerLoading.value) {
             if (newLength > oldLength) {
               localResetVirtualScroll()
             } else {
@@ -1557,9 +1503,7 @@ export default createComponent({
     }
 
     function updateMenuPosition() {
-      if (dialog.value === false && menuRef.value !== null) {
-        menuRef.value.updatePosition()
-      }
+      if (!dialog.value) menuRef.value?.updatePosition()
     }
 
     function onControlPopupShow(e) {
@@ -1578,19 +1522,17 @@ export default createComponent({
 
     function updatePreState() {
       hasDialog =
-        $q.platform.is.mobile !== true && props.behavior !== 'dialog'
+        !$q.platform.is.mobile && props.behavior !== 'dialog'
           ? false
           : props.behavior !== 'menu' &&
-            (props.useInput === true
+            (props.useInput
               ? slots['no-option'] !== void 0 ||
                 props.onFilter !== void 0 ||
-                noOptions.value === false
+                !noOptions.value
               : true)
 
       transitionShowComputed =
-        $q.platform.is.ios === true &&
-        hasDialog === true &&
-        props.useInput === true
+        $q.platform.is.ios && hasDialog && props.useInput
           ? 'fade'
           : props.transitionShow
     }
@@ -1620,10 +1562,9 @@ export default createComponent({
       updateInputValue,
       isOptionSelected,
       getEmittingOptionValue,
-      isOptionDisabled: (...args) =>
-        isOptionDisabled.value.apply(null, args) === true,
-      getOptionValue: (...args) => getOptionValue.value.apply(null, args),
-      getOptionLabel: (...args) => getOptionLabel.value.apply(null, args)
+      isOptionDisabled: (...args) => isOptionDisabled.value(...args) === true,
+      getOptionValue: (...args) => getOptionValue.value(...args),
+      getOptionLabel: (...args) => getOptionLabel.value(...args)
     })
 
     Object.assign(state, {
@@ -1631,9 +1572,9 @@ export default createComponent({
 
       fieldClass: computed(
         () =>
-          `q-select q-field--auto-height q-select--with${props.useInput !== true ? 'out' : ''}-input` +
-          ` q-select--with${props.useChips !== true ? 'out' : ''}-chips` +
-          ` q-select--${props.multiple === true ? 'multiple' : 'single'}`
+          `q-select q-field--auto-height q-select--with${props.useInput ? '' : 'out'}-input` +
+          ` q-select--with${props.useChips ? '' : 'out'}-chips` +
+          ` q-select--${props.multiple ? 'multiple' : 'single'}`
       ),
 
       inputRef,
@@ -1643,7 +1584,7 @@ export default createComponent({
 
       floatingLabel: computed(
         () =>
-          (props.hideSelected !== true && hasValue.value === true) ||
+          (!props.hideSelected && hasValue.value) ||
           typeof inputValue.value === 'number' ||
           inputValue.value.length !== 0 ||
           fieldValueIsFilled(props.displayValue)
@@ -1651,13 +1592,13 @@ export default createComponent({
 
       getControlChild: () => {
         if (
-          state.editable.value !== false &&
-          (dialog.value === true || // dialog always has menu displayed, so need to render it
-            noOptions.value !== true ||
+          state.editable.value &&
+          (dialog.value || // dialog always has menu displayed, so need to render it
+            !noOptions.value ||
             slots['no-option'] !== void 0)
         ) {
-          return hasDialog === true ? getDialog() : getMenu()
-        } else if (state.hasPopupOpen === true) {
+          return hasDialog ? getDialog() : getMenu()
+        } else if (state.hasPopupOpen) {
           // explicitly set it otherwise TAB will not blur component
           state.hasPopupOpen = false
         }
@@ -1677,7 +1618,7 @@ export default createComponent({
           // label from QField will propagate click on the input
           prevent(e)
 
-          if (hasDialog !== true && menu.value === true) {
+          if (!hasDialog && menu.value) {
             closeMenu()
             targetRef.value?.focus()
             return
@@ -1689,26 +1630,25 @@ export default createComponent({
 
       getControl: fromDialog => {
         const child = getSelection()
-        const isTarget =
-          fromDialog === true || dialog.value !== true || hasDialog !== true
+        const isTarget = fromDialog === true || !dialog.value || !hasDialog
 
-        if (props.useInput === true) {
+        if (props.useInput) {
           child.push(getInput(fromDialog, isTarget))
         }
         // there can be only one (when dialog is opened the control in dialog should be target)
-        else if (state.editable.value === true) {
-          const attrs = isTarget === true ? comboboxAttrs.value : void 0
+        else if (state.editable.value) {
+          const attrs = isTarget ? comboboxAttrs.value : void 0
 
           child.push(
             h('input', {
-              ref: isTarget === true ? targetRef : void 0,
+              ref: isTarget ? targetRef : void 0,
               key: 'd_t',
               class: 'q-select__focus-target',
-              id: isTarget === true ? state.targetUid.value : void 0,
+              id: isTarget ? state.targetUid.value : void 0,
               value: ariaCurrentValue.value,
               readonly: true,
               'data-autofocus':
-                fromDialog === true || props.autofocus === true || void 0,
+                fromDialog === true || props.autofocus || void 0,
               ...attrs,
               onKeydown: onTargetKeydown,
               onKeyup: onTargetKeyup,
@@ -1717,7 +1657,7 @@ export default createComponent({
           )
 
           if (
-            isTarget === true &&
+            isTarget &&
             typeof props.autocomplete === 'string' &&
             props.autocomplete.length !== 0
           ) {
@@ -1734,7 +1674,7 @@ export default createComponent({
 
         if (
           nameProp.value !== void 0 &&
-          props.disable !== true &&
+          !props.disable &&
           innerOptionsValue.value.length !== 0
         ) {
           const opts = innerOptionsValue.value.map(value =>
@@ -1755,7 +1695,7 @@ export default createComponent({
         }
 
         const attrs =
-          props.useInput === true || isTarget !== true
+          props.useInput || !isTarget
             ? void 0
             : state.splitAttrs.attributes.value
 
@@ -1771,14 +1711,13 @@ export default createComponent({
       },
 
       getInnerAppend: () =>
-        props.loading !== true &&
-        innerLoadingIndicator.value !== true &&
-        props.hideDropdownIcon !== true
+        !props.loading &&
+        !innerLoadingIndicator.value &&
+        !props.hideDropdownIcon
           ? [
               h(QIcon, {
                 class:
-                  'q-select__dropdown-icon' +
-                  (menu.value === true ? ' rotate-180' : ''),
+                  'q-select__dropdown-icon' + (menu.value ? ' rotate-180' : ''),
                 name: dropdownArrowIcon.value
               })
             ]