-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Prevent a block and console error for input[type=email]
#26074
Prevent a block and console error for input[type=email]
#26074
Conversation
When this is at the top of a block, on first addding the block, there is a block and JS error: DOMException: Failed to set the 'selectionStart' property on 'HTMLInputElement': The input element's type ('email') does not support selection. at placeCaretAtHorizontalEdge (https://path/to/wp-content/plugins/gutenberg/build/dom/index.js?ver=cbf62a0bae5cfd2eeff038ee115edc0a:390:32) This looks to be because HTMLInputElement only has a selectionStart property for 'text/number-containing or elements' https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
It looks like document.createElement( 'input' ) doesn't create an object with .selectionStart. So manually add one, although it's not ideal.
If there's no selectionStart, it should not be moved.
PHPUnit tests failed, though this PR doesn't touch a PHP file: https://github.com/WordPress/gutenberg/runs/1249706078
Hm, the PHPUnit failure above is from:
...which this PR doesn't touch. That's failing on the master branch also. |
This should be ready for review, not planning any more commits unless more builds fail. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @ellatrix, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks like a worthwhile fix given an email input currently crashes the block 😓 .
The issue that I noticed when testing is that up/down arrow key navigation doesn't work in the same way for email inputs as it does for other inputs (see the search block for an example), the input is essentially a trap for navigating between blocks unless the user switches to navigation mode using escape
.
I'm not sure if that's related to the change here or if some other code needs to be fixed. @ellatrix any thoughts?
It sounds like we need to adjust |
Having checked this PR again, I assume that a similar problem may have been solved by #40192.
This issue also appears to have already been resolved. @talldan @ellatrix
Screencasta5ae0e684f5beec00021d34de13f172b.mp4 |
Description
Fixes an issue where if an
input[type="email"]
is at the top of a block, there's a block and console error. Though this is fixed once you reload the page.How has this been tested?
Steps to reproduce:
5.5.1
, and themaster
branch of GutenbergThat error is from:
gutenberg/packages/dom/src/dom.js
Line 281 in efc836a
It looks like the
selectionStart
property applies 'only to text/number-containing or elements'.Screenshots
With this PR, there's no error:
Types of changes
Bug fix (non-breaking change which fixes an issue)
Checklist: