cheetah-framework/js/framework/components/QueryBuilder/mixins/Criterion.js

Cheetah Framework JS used in all our applications

import Criterion from '@cheetah/models/Criterion'
import FormErrorHelper from '@cheetah/form/FormErrorHelper'

export default {
  mixins: [FormErrorHelper],

  props: {
    editing: {
      type: Boolean,
      default: false
    },
    fields: {
      type: Array,
      required: true
    },
    criterion: {
      type: Criterion,
      required: true
    },
    readonly: Boolean
  },

  computed: {
    selectedField () {
      return this.getField(this.criterion.field)
    }
  },

  methods: {
    getField (fieldKey) {
      return _.find(this.fields, { key: fieldKey })
    },
    handleClick () {
      if (this.readonly) {
        return
      }
      this.$emit('click')
      this.$nextTick(() => {
        const firstInput = this.$el.querySelector('input, select')
        if (firstInput) {
          // Always focus the field
          firstInput.focus()

          if (!_.includes(['radio', 'checkbox'], firstInput.type)) {
            // Click in case there is an action (such as dropdown)
            firstInput.click()
          }
        }
      })
    }
  }
}