I am using Vue.js 2 to show Bootstrap modal. Below is an example.

<div class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" autofocus class="btn btn-primary">Always focus</button>
            </div>
        </div>
    </div>
</div>

The idea is that when modal pops up, user should be enable to press the Enter key to click on the Always focus button without using mouse. And when user press the left or right arrow button, that the focus switch from Always focus button to the Close button and vice versa.

With autofocus attribute, it works well but only if modal pops up for the every first time. For second time the modal pops up, the Always focus button loses focus.

How can I make the Always focus button always have focus everytime modal pops up? Or How can I realize the idea using whatever CSS-solution, JavaScript-solution or Vue-solution?

Note that I am using Vue.js 2. Any Vue.js solution is also wele, but not jQuery.

I am using Vue.js 2 to show Bootstrap modal. Below is an example.

<div class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" autofocus class="btn btn-primary">Always focus</button>
            </div>
        </div>
    </div>
</div>

The idea is that when modal pops up, user should be enable to press the Enter key to click on the Always focus button without using mouse. And when user press the left or right arrow button, that the focus switch from Always focus button to the Close button and vice versa.

With autofocus attribute, it works well but only if modal pops up for the every first time. For second time the modal pops up, the Always focus button loses focus.

How can I make the Always focus button always have focus everytime modal pops up? Or How can I realize the idea using whatever CSS-solution, JavaScript-solution or Vue-solution?

Note that I am using Vue.js 2. Any Vue.js solution is also wele, but not jQuery.

• javascript
• css
• vue.js
• button
• autofocus

Share Improve this question Follow asked Oct 3, 2019 at 15:36 O ConnorO Connor 4,4321616 gold badges5656 silver badges102102 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can acplish this using Vue's $refs object. (see docs) Essentially, you give the button a ref attribute, then you can always access that element in your Vue code by calling this.$refs.<whatever name you gave it>:

<div class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button ref="always_focus" type="button" autofocus class="btn btn-primary">Always focus</button>
            </div>
        </div>
    </div>
</div>

Then, add or modify your show event handler for the modal:

export default {
  ...
  methods: {
    onModalShow() {
      this.$nextTick(() => {
        this.$refs.always_focus.focus();
      });
    }
  },
  ...
}

The use of Vue's $nextTick() (docs) function here is also important. You have to wait for the button to bee visible in order to focus it. By adding the focus code to a $nextTick() callback, you can be sure that the DOM has finished updating from the previous change to your data model (eg. the change that shows the modal).

NOTE: the above is just an example, since I don't know exactly what your modal code looks like.

You can use a 'mounted' function to always focus the button when the modal is opened:

mounted: function() {
  document.getElementById("focus-button").focus();
}

Or you may be able to listen for a keypress and check if it's the enter key and programmatically click the button.

onKeyPress: function(e) {
  if (e.which == 13) {
    document.getElementById("focus-button").click();
  }
}