@gitlab/ui/dist/vendor/bootstrap-vue/src/mixins/form-control.js

GitLab UI Components

import { extend } from '../vue';
import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../constants/props';
import { requestAF, isVisible, matches, select, attemptFocus } from '../utils/dom';
import { makePropsConfigurable, makeProp } from '../utils/props';

// --- Constants ---

const SELECTOR = 'input, textarea, select';

// --- Props ---

const props = makePropsConfigurable({
  autofocus: makeProp(PROP_TYPE_BOOLEAN, false),
  disabled: makeProp(PROP_TYPE_BOOLEAN, false),
  form: makeProp(PROP_TYPE_STRING),
  id: makeProp(PROP_TYPE_STRING),
  name: makeProp(PROP_TYPE_STRING),
  required: makeProp(PROP_TYPE_BOOLEAN, false)
}, 'formControls');

// --- Mixin ---

// @vue/component
const formControlMixin = extend({
  props,
  mounted() {
    this.handleAutofocus();
  },
  /* istanbul ignore next */
  activated() {
    this.handleAutofocus();
  },
  methods: {
    handleAutofocus() {
      this.$nextTick(() => {
        requestAF(() => {
          let el = this.$el;
          if (this.autofocus && isVisible(el)) {
            if (!matches(el, SELECTOR)) {
              el = select(SELECTOR, el);
            }
            attemptFocus(el);
          }
        });
      });
    }
  }
});

export { formControlMixin, props };