CODEWITHSUNDEEP
vue.jsvuejs2
Stefan Djordjevic
Stefan Djordjevic

Reputation: 41

Vue how to autofocus v-dialog (popup) when I open it on btn?

When I open popup, he don't have focus on. I need to press anything inside of window and after that my esc btn will work (for closing window). Any suggest how to focus on popup immediately after button open it?

<v-dialog @keydown.esc="cancel" v-model="show" persistent max-width="750px">
      <v-card>
        <v-card-title>
          <span class="headline"> New Exclusion </span>
        </v-card-title>
        <v-card-text>
          <v-form ref="form" v-model="valid">
            <v-container fluid>
              <v-row>
                <v-col cols="12" md="5">
                  <v-switch
                    v-model="percentOrAmountSwitch"
                    :label="percentOrAmountLabel"
                    :color="colorTheme.toggle"
                  ></v-switch>
                </v-col>
                <v-col cols="12" md="2"></v-col>
                <v-col cols="12" md="5">
                  <v-checkbox
                    label="Expiration Date"
                    v-model="expDate"
                    v-on:change="hideShow"
                  >
                  </v-checkbox>
                </v-col>
              </v-row>
              <v-row>
                <v-col cols="12" md="5">
                  <v-text-field
                    v-model="percentOrAmount"
                    :label="percentOrAmountLabel"
                    dense
                    :rules="percentOrAmountRules"
                    required
                    :prefix="flatDollar"
                    :suffix="percentBased"
                    :color="colorTheme.textField"
                  ></v-text-field>
                </v-col>
                <v-col cols="12" md="2"></v-col>
                <v-col cols="12" md="5">
                  <input
                    type="date"
                    v-model="date"
                    v-if="expDate"
                    min="1960-01-01"
                  />
                </v-col>
              </v-row>
              <v-row>

Upvotes: 3

Views: 1898

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23500

You can create ref to some input field, for example text on the modal, then focus on that element in modal in the mounted hook and use $vm.nextTick() so that you're sure the element is present in the DOM:

mounted() {
  this.$nextTick(() => this.$refs.text.focus());
}

Upvotes: 1

Related Questions