Skip to content

fix(b-modal): handle enforce focus case where tinyMCE editor inside modal (fixes #4537) #4538

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.

Sign up for GitHub

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

Jump to bottom
Closed
wants to merge 4 commits into from
Closed

fix(b-modal): handle enforce focus case where tinyMCE editor inside modal (fixes #4537) #4538

wants to merge 4 commits into from

Conversation

tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Dec 30, 2019 •
edited
Loading

Describe the PR

Handle enforce focus case when tinyMCE editor is inside a modal.

fixes #4537

PR checklist

What kind of change does this PR introduce? (check at least one)

  • Bugfix
  • Feature
  • Enhancement
  • ARIA accessibility
  • Documentation update
  • Other (please describe)

Does this PR introduce a breaking change? (check one)

  • No
  • Yes (please describe)

The PR fulfills these requirements:

  • It's submitted to the dev branch, not the master branch
  • When resolving a specific issue, it's referenced in the PR's title (i.e. [...] (fixes #xxx[,#xxx]), where "xxx" is the issue number)
  • It should address only one issue or feature. If adding multiple features or fixing a bug and adding a new feature, break them into separate PRs if at all possible.
  • The title should follow the Conventional Commits naming convention (i.e. fix(alert): not alerting during SSR render, docs(badge): update pill examples, chore(docs): fix typo in README, etc). This is very important, as the CHANGELOG is generated from these messages.

If new features/enhancement/fixes are added or changed:

  • Includes documentation updates (including updating the component's package.json for slot and event changes)
  • Includes any needed TypeScript declaration file updates
  • New/updated tests are included and passing (if required)
  • Existing test suites are passing
  • CodeCov for patch has met target
  • The changes have not impacted the functionality of other components or directives
  • ARIA Accessibility has been taken into consideration (Does it affect screen reader users or keyboard only users? Clickable items should be in the tab index, etc.)

If adding a new feature, or changing the functionality of an existing feature, the PR's
description above includes:

  • A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

@tmorehouse tmorehouse added Type: Fix PR: Patch Requires patch version bump labels Dec 30, 2019
@tmorehouse tmorehouse marked this pull request as ready for review December 30, 2019 15:57
@codecov
Copy link

codecov bot commented Dec 30, 2019 •
edited
Loading

Codecov Report

Merging #4538 into dev will increase coverage by <.01%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##              dev    #4538      +/-   ##
==========================================
+ Coverage   99.92%   99.92%   +<.01%     
==========================================
  Files         251      251              
  Lines        5220     5224       +4     
  Branches     1381     1385       +4     
==========================================
+ Hits         5216     5220       +4     
  Misses          3        3              
  Partials        1        1
Impacted Files Coverage Δ
src/utils/transporter.js 100% <100%> (ø) ⬆️
src/icons/helpers/make-icon.js 100% <100%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update dfffab1...34de3e0. Read the comment docs.

@tmorehouse tmorehouse changed the title fix(b-modal): handle enforce focus case where tinyMCE editor inside modal (closes #4537) fix(b-modal): handle enforce focus case where tinyMCE editor inside modal (fixes #4537) Dec 30, 2019
@jacobmllr95
Copy link
Member

@tmorehouse Not sure if we should add something that only effects a fraction of users that are using tinyMCE.

@tmorehouse
Copy link
Member Author

tmorehouse commented Jan 7, 2020 •
edited
Loading

@jackmu95 yeah... it is mainly an issue with embedded iframes in the modal (tinyMCE uses an <iframe>).

Although there is a way to get TinyMCE to not use an iframe, and instead use a content editable container, although I can't remember how that is set/enabled.

@asika32764
Copy link

Maybe we can consider add a hook to let developer decide how to stop the focus event, otherwise it has no any way to stop this event now.

@tmorehouse
Copy link
Member Author

@asika32764 You can set the prop no-enforce-focus on the modal to disable the enforce-focus routine, which would be an interim workaround.

@asika32764
Copy link

Seems works for my project. Can this prop caused any side-effects?

@tmorehouse
Copy link
Member Author

@asika32764 the downside is that if you press tab several times, then the focus will move to an element behind the modal, which can make it hard for keyboard only users to get back into the modal.

And other option you could try is to put the editor inside a DIV that prevents bubbling of the focusin/out events (so that they do not reach the focus management listener in the modal):

<b-modal .... >
  <div @focusin.stop @focusout.stop>
    <!-- place MCE editor component here -->
  </div>
</b-modal>

@jacobmllr95 jacobmllr95 mentioned this pull request Jan 30, 2020
Merged
20 tasks
@jacobmllr95
Copy link
Member

Closed in favor of #4702.

@jacobmllr95 jacobmllr95 deleted the issue/4537 branch January 31, 2020 19:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jacobmllr95 jacobmllr95 Awaiting requested review from jacobmllr95

Assignees
No one assigned
Labels
PR: Patch Requires patch version bump Type: Fix Type: Third-party
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Tinymce-vue dialog unable to edit in bootstrap-vue modal.
3 participants
@tmorehouse @jacobmllr95 @asika32764