New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can not focus in modal popover input field #1464

Closed
rut2 opened this Issue Dec 14, 2017 · 5 comments

Comments

Projects
None yet
2 participants
@rut2

rut2 commented Dec 14, 2017

the scenario is a bit complex. I am using bootstrap-vue modal and popover. I want to display a form within modal -> popover. something like this.

image

But because of modal-content element's tabindex = -1, I can not focus on input field ever. Even if I click on input field it is not working.

It is working in perfectly after I remove tabindex=-1 from DOM

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Dec 14, 2017

Removing the tabidex on modal-content will break accessibility (for screen reader users and keyboard only users).

Currently popovers and tooltips get appended to the modal-dialog div, if they detect that the trigger element is inside a modal.

We might need to change that to append to modal-content to ensure that the popover/tooltip is within the tab-constraint area.

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Dec 14, 2017

To currently get around this, wrap your modal content in a div (if you haven't already), give it a unique id, and then use the container prop of <b-popover> to specify the div's ID:

<b-modal ...>
  <div id="my-container">
    <!-- other modal content here -->
    <b-btn id="my-button">Add</b-btn>
    <b-popover target="my-button" container="my-container" title="Title">
      <label for="my-input">Input</label>
      <b-form-input id="my-input"></b-form-input>
    </b-popover>
  </div>
</b-modal>

This will ensure that your popover is within the _enforce focus_ region of the modal.

tmorehouse added a commit that referenced this issue Dec 14, 2017

fix(tooltip+popover): append to `.modal-content` instead of `.modal`
Ensures that interactive popovers  (i.e. with input(s)) are inside the enforce focus tab ring cycle

Fixes #1464

tmorehouse added a commit that referenced this issue Dec 14, 2017

fix(tooltip+popover): auto-append to `.modal-content` instead of `.mo…
…dal` (#1465)

Ensures that interactive popovers  (i.e. with input(s)) are inside the enforce focus tab ring cycle

Fixes #1464
@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Dec 14, 2017

This fix will be available in the next release (v1.4.0)

@rut2

This comment has been minimized.

rut2 commented Dec 14, 2017

It is working perfectly good.

thank you @tmorehouse

vue-bootstrap is best :)

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Dec 17, 2017

v1.4.0 has been released, which now appends the tooltip/popover to the modal-content container rather than the modal outer container.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment