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

CKEditor 4 mobile - buttons remain highlighted after being deselected #4611

Closed
jswiderski opened this issue Apr 9, 2021 · 2 comments
Closed

CKEditor 4 mobile - buttons remain highlighted after being deselected #4611

jswiderski opened this issue Apr 9, 2021 · 2 comments
Assignees
@Comandeer
Labels
browser:android The issue can only be reproduced on a mobile device with Android system. browser:ios The issue can only be reproduced on a mobile device with iOS. plugin:toolbar The plugin which probably causes the issue. status:confirmed An issue confirmed by the development team. support:2 An issue reported by a commercially licensed client. type:bug A bug.
Milestone
4.16.1

Comments

@jswiderski
Copy link
Contributor

Type of report

Bug

Provide detailed reproduction steps (if any)

  1. Open any editor sample on iOS or Android - https://ckeditor.com/docs/ckeditor4/latest/examples/standardpreset.html
  2. Tap on one of basic styles button like BOLD
  3. Start typing
  4. Tap on the BOLD button again to disable bold style
  5. Type few more characters

Expected result

The BOLD button should't be focused.

Actual result

The BOLD button is focused but not active which could be confusing to some of users especially that in desktop buttons aren't focused.

obraz

  • focused and active

obraz

  • focused and inactive. This is what you can see after disabling BOLD style on mobile.

obraz

  • not focused and inactive. This is what you can see after disabling BOLD style on desktop.

Other details

  • Browser: Any
  • OS: Android, iOS
  • CKEditor version: 4.0
  • Installed CKEditor plugins: BasicStyles
@jswiderski jswiderski added the type:bug A bug. label Apr 9, 2021
@f1ames f1ames added status:confirmed An issue confirmed by the development team. plugin:toolbar The plugin which probably causes the issue. browser:ios The issue can only be reproduced on a mobile device with iOS. browser:android The issue can only be reproduced on a mobile device with Android system. size:M support:2 An issue reported by a commercially licensed client. and removed size:M labels Apr 9, 2021
@Comandeer
Copy link
Member

Comandeer commented Apr 9, 2021 •
edited
Loading

The issue is probably connected with how :hover and :focus styles work on mobile (they are often activated upon tapping on the button). One of the solutions can be using pointer media query to detect touch device and disable :hover and :focus styles. Actually there is even more suitable media query for this task: hover one.

@Comandeer Comandeer self-assigned this Apr 15, 2021
@Comandeer Comandeer mentioned this issue Apr 15, 2021
Merged
3 tasks
@f1ames f1ames added this to the 4.16.1 milestone Apr 20, 2021
@CKEditorBot
Copy link
Collaborator

Closed in #4623

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

@Comandeer Comandeer

Labels
browser:android The issue can only be reproduced on a mobile device with Android system. browser:ios The issue can only be reproduced on a mobile device with iOS. plugin:toolbar The plugin which probably causes the issue. status:confirmed An issue confirmed by the development team. support:2 An issue reported by a commercially licensed client. type:bug A bug.
Projects
None yet
Milestone
4.16.1
Development

No branches or pull requests
4 participants
@f1ames @Comandeer @jswiderski @CKEditorBot