Skip to content
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

Rich Text Editor | Blinking caret | in editor disappears after clicking any button in Firefox browser. #1454

Closed
Tracked by #1288
aagash-ni opened this issue Aug 25, 2023 · 0 comments · Fixed by #1455
Closed
Tracked by #1288

Rich Text Editor | Blinking caret | in editor disappears after clicking any button in Firefox browser. #1454

aagash-ni opened this issue Aug 25, 2023 · 0 comments · Fixed by #1455
Labels
tech debt

Comments

@aagash-ni
Copy link
Contributor

aagash-ni commented Aug 25, 2023 •
edited by vikisekarNI
Loading

🧹 Tech Debt

Once the editor gets focused, the blinking caret will be visible until we click other buttons in the Firefox browser (Changing focus). But once clicked, the editor internally has its focus but the blinking caret disappears.

Before button click:
image

After button click: (caret does not blink even when the editor is in focus)
image

Note: This issue can be reproducible only in the shadow DOM (Firefox browser). It seems like this bug is a Firefox issue and still it is not fixed in Firefox browser

Reference to the conversation: #1416 (comment)
@aagash-ni aagash-ni added tech debt triage New issue that needs to be reviewed labels Aug 25, 2023
@aagash-ni aagash-ni changed the title Rich Text Editor | Blinking caret | in the nimble-rich-text-editor disappears after clicking any button in Firefox browser. Rich Text Editor | Blinking caret | in editor disappears after clicking any button in Firefox browser. Aug 25, 2023
@aagash-ni aagash-ni mentioned this issue Aug 25, 2023
Merged
1 task
@vikisekarNI vikisekarNI linked a pull request Aug 25, 2023 that will close this issue
Rich Text Editor | Fix for Editor's blinking caret disappearing issue in Firefox browser #1455
Merged
1 task
@jattasNI jattasNI mentioned this issue Aug 25, 2023
Open
38 tasks
@aagash-ni aagash-ni mentioned this issue Aug 28, 2023
Merged
1 task
@m-akinc m-akinc removed the triage New issue that needs to be reviewed label Aug 29, 2023
rajsite pushed a commit that referenced this issue Aug 31, 2023
@aagash-ni @AagashRaaj
Rich Text Editor | Fix for Editor's blinking caret disappearing issue…
fcc12d5 
… in Firefox browser (#1455)

# Pull Request

## 🤨 Rationale

This PR contains workaround for resolves
#1454 Firefox issue when the editor
gets focused, the blinking caret will be visible until we click format
buttons (Bold, Italic ...). But once any of the buttons are clicked, the
editor internally has its focus but the blinking caret disappears.

Issue Link : #1454

## 👩‍💻 Implementation

- Triggering `Blur()` and setting `focus()` in the editor will make the
caret re-appears when clicking the formatting buttons.

## 🧪 Testing

- Verified the caret visibility in the Firefox browser when clicking on
the format button. Since Firefox is reporting the editor as an active
element even though Caret is not rendered, manually verified this
behavior.
- Added a test case to verify the active element in the browser
especially when clicking the format button.


## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

---------

Co-authored-by: Aagash Raaj <[email protected]>
This was referenced Sep 1, 2023
Merged
Merged
aagash-ni added a commit that referenced this issue Sep 6, 2023
@aagash-ni
Rich Text Editor | Revert Firefox workaround for caret disappearing i…
ff093f4 
…ssue (#1482)

# Pull Request

## 🤨 Rationale

Issue Link : #1454

Reverting the workaround made for the above issue of blinking Caret
disappeared when clicking on the formatting button in Firefox, As it is
fixed with the latest release of Firefox browser
([v117](https://www.mozilla.org/en-US/firefox/117.0/releasenotes/)).

## 👩‍💻 Implementation

Removed `forceFocusEditor()` function on button interaction handlers.

## 🧪 Testing

- Manually tested the behavior by installing the latest Firefox browser
(v117) and comparing the behaviors with previous versions (v116 and
before).
Firefox behaviour test link:
https://bug1496769.bmoattachments.org/attachment.cgi?id=9014846, Please
use this to verify in
different versions of Firefox. (Note: The above link doesn't seem like
works with NI VPN)

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
tech debt
Projects
Nimble Design System Priorities
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Rich Text Editor | Fix for Editor's blinking caret disappearing issue in Firefox browser ni/nimble
2 participants
@m-akinc @aagash-ni