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

[Details Block] The space key doesn't work (Firefox) #49679

Closed
gyurmey2 opened this issue Apr 10, 2023 · 6 comments · Fixed by #50540
Closed

[Details Block] The space key doesn't work (Firefox) #49679

gyurmey2 opened this issue Apr 10, 2023 · 6 comments · Fixed by #50540
Assignees
@t-hamano
Labels
[Block] Details Affects the Details Block - used to display content which can be shown/hidden Browser Issues Issues or PRs that are related to browser specific problems Needs Technical Feedback Needs testing from a developer perspective. [Type] Bug An existing feature does not function as intended

Comments

@gyurmey2
Copy link

Description

The space key doesn't work when entering text in the "Details Summary" field. This only happens in Firefox browsers.

Step-by-step reproduction instructions

  1. Add Details block in Firefox browser.
  2. Go to the Details Summary field.
  3. Try entering any text including spaces.

Screenshots, screen recording, code snippet

details

Environment info

  • WordPress: 6.2
  • Theme: TT3
  • Browsers: Firefox 111.0.1, Firefox Developer 112.0b9, Firefox Nightly 113.0a1
  • OS: Windows 10

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes
@t-hamano t-hamano added the [Block] Details Affects the Details Block - used to display content which can be shown/hidden label Apr 10, 2023
@t-hamano
Copy link
Contributor

@gyurmey2
Tahnks for the rerport. I was able to reproduce it too.

Firefox Version: 111.0.1 (64-bit)

f4b24416bed753812c0eb9857b798a01.mp4

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended Browser Issues Issues or PRs that are related to browser specific problems labels Apr 10, 2023
@t-hamano
Copy link
Contributor

I think this is a problem unique to Firefox. If I give the summary element, or any of its children, the contententeditable attribute and press the space key in the text, it is treated as a click event and no space is inserted.

Here is the code I used to test:

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<details>
<summary><div contenteditable>Editable Details Summary</div></summary>
<p>Details Content</p>
</details>

<script>
document.querySelector('summary').addEventListener('click', function(event) {
	console.log( 'clicked!' );
});
</script>

</body>
</html>

@carolinan carolinan mentioned this issue Apr 16, 2023
Merged
@carolinan
Copy link
Contributor

carolinan commented Apr 16, 2023 •
edited
Loading

I can reproduce this and I have tried to use different combinations of "KeyUp" instead of "onClick" for the prevent, but I have been unable to solve it.
I tried both with the separate <summary> element as a wrapper for the RichText (the way the block is currently built) and using summary as a tag in the RichText.

@carolinan carolinan added Needs Dev Ready for, and needs developer efforts Needs Technical Feedback Needs testing from a developer perspective. labels Apr 17, 2023
@t-hamano t-hamano mentioned this issue May 10, 2023
Closed
@richtabor richtabor added this to Polish May 10, 2023
@richtabor richtabor moved this to Needs development in Polish May 10, 2023
@talldan
Copy link
Contributor

talldan commented May 11, 2023 •
edited
Loading

Here's the bug report for firefox - https://bugzilla.mozilla.org/show_bug.cgi?id=1822860. It has been triaged and accepted which is good.

I'm not sure if we can add any workarounds to RichText, or if we should just wait for the firefox bug to be resolved. It seems like it's being considered a normal priority, but I left a comment asking why that is and if there's a workaround.

@talldan
Copy link
Contributor

talldan commented May 11, 2023 •
edited
Loading

There's a suggestion for a workaround from a Firefox maintainer:

Currently, the workaround is not use contenteditable in the elements or prevent default of space keydown events and do document.execCommand("insertText", false, " ").

The latter sounds like a good option 👍

@t-hamano t-hamano mentioned this issue May 11, 2023
Merged
@t-hamano t-hamano self-assigned this May 11, 2023
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label May 11, 2023
@t-hamano
Copy link
Contributor

I am trying to fix in #50540.

@priethor priethor moved this from Needs development to In progress in Polish May 17, 2023
@priethor priethor removed the Needs Dev Ready for, and needs developer efforts label May 24, 2023
@priethor priethor removed the [Status] In Progress Tracking issues with work in progress label May 26, 2023
@priethor priethor moved this from In progress to Done in Polish May 26, 2023
@vpzomtrrfrt vpzomtrrfrt mentioned this issue Jul 24, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@t-hamano t-hamano

Labels
[Block] Details Affects the Details Block - used to display content which can be shown/hidden Browser Issues Issues or PRs that are related to browser specific problems Needs Technical Feedback Needs testing from a developer perspective. [Type] Bug An existing feature does not function as intended
Projects
Polish
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix: Can't type space if RichText component is inside button/summary in Firefox WordPress/gutenberg
5 participants
@talldan @carolinan @priethor @t-hamano @gyurmey2