Fixed image add link input disappears issue #5942

faishal · 2018-04-03T06:02:58Z

Fixes #5894
Same as #3822

Description

When you begin typing anything in the image link input, it simply just closes the UI due to key events propagation, changing the states and triggering updates.

How Has This Been Tested?

Add image block and try to add a link from the toolbar. When you start typing, input should stay open.

Types of changes

Bug fix

Checklist:

My code is tested.
My code follows the WordPress code style.
My code has proper inline documentation.

paulwilde · 2018-04-04T11:28:56Z

This fixes it for me, by the way.

danielbachhuber · 2018-04-10T13:29:45Z

Thanks for the pull request, @faishal

@WordPress/gutenberg-core Do you think it's possible to add e2e tests for this?

aduth · 2018-04-10T19:59:16Z

just closes the UI due to key events propagation, changing the states and triggering updates.

Propagating to where to do what state changes?

Asking because while it occasionally has merit, I am very cautious of introducing Event#stopPropagation since in solving one issue it has a tendency to subtly introduce other, much more difficult to debug issues. If we need it, we should be clear at what point it fails, whether it's relevant for the component in question to have awareness of said propagation (e.g. a components/ component shouldn't be made to tailor to the editor specifically), and ultimately to document its existence very clearly for the next maintainer.

…d it by stopping event propagation Signed-off-by: Faishal Saiyed <[email protected]>

youknowriad · 2018-04-18T09:31:37Z

I rebased this but it looks like the suggestions are not showing up properly in the image link?

The issue was that on mobile, the block toolbar has overflow auto so as to scroll horizontally. This hid the suggestions box in a weird scrollbar. This PR tweaks that, so the suggestions don't show up on mobile at all. This is not an ideal fix, but suggestions weren't very mobile friendly in the first place. Suggest we get this in now as a bandaid, and then look at addressing suggestions on mobile separately, for example using the same technique the block switcher uses.

jasmussen · 2018-04-18T10:02:23Z

Okay, I pushed a fix to make sure the link suggestions show up when making image links.

The issue was that on mobile, the block toolbar has overflow auto so as to scroll horizontally. This hid the suggestions box in a weird scrollbar.

I fixed so suggestions don't show up on mobile at all. This is not an ideal fix, but suggestions weren't very mobile friendly in the first place. Suggest we get this in now as a bandaid, and then look at addressing suggestions on mobile separately, for example using the same technique the block switcher uses.

Screenshots:

jasmussen · 2018-04-18T10:33:22Z

Also fixed an issue with link suggestions in captions:

youknowriad · 2018-04-18T10:47:01Z

I also updated the way we fix the event propagation from closing the toolbar. This was happening because the ObserveTyping component was observing typing in link modals as well. I updated the PR to avoid observing typing in block toolbars. The classname is hardcoded but I think it's fine since it's defined in the same module.

youknowriad

LGTM 👍

youknowriad · 2018-04-18T11:19:07Z

Merging, this bug fix is important to get in before the release.

aduth · 2018-04-18T17:13:45Z

blocks/library/image/editor.scss

+	@include break-small() {
+		margin: -1px;
+	}
+}


Files should end in newline.

Tip: Enforced automatically if installing an EditorConfig plugin.

aduth · 2018-04-18T17:21:34Z

editor/components/observe-typing/index.js

@@ -120,7 +120,8 @@ class ObserveTyping extends Component {

 		// Abort early if already typing, or key press is incurred outside a
 		// text field (e.g. arrow-ing through toolbar buttons).
-		if ( isTyping || ! isTextField( target ) ) {
+		// Ignore typing in a block toolbar
+		if ( isTyping || ! isTextField( target ) || target.closest( '.editor-block-toolbar' ) ) {


I understand this was merged because it's a bug, but we should be more explicit about when typing should and should not be triggered. It may well be that this is the correct approach to look for a toolbar ancestor, though could also be that it's a single fix to a larger problem. Are there other text fields in editor which shouldn't trigger isTyping ?

One such example on a quick glance is the inserter search for the default block, where the inserter button inexplicably disappears upon typing:

I originally liked that ObserveTyping was moved out of the block component because it's something of a global behavior, and BlockListBlock already has an abundant number of concerns, but am thinking more and more that it should at least be scoped in some way to the contents of a block. This still leaves open some possibility for issues with things like link inputs in RichText though.

This still leaves open some possibility for issues with things like link inputs in RichText though.

I think triggering isTyping in that case is the correct behavior.

--
For me, All inputs and richtext in block edit functions should trigger the behavior. Side UI shouldn't. All side UI is triggered is shown outside the editor content area (Popovers) aside the toolbar, so the fix made sense.

But I understand that wrapping only the BlockEdit component with this might also fix the issue. It would have been a good approach too.

* WordPress#5894:Image add link input disappear when start typing, fixed it by stopping event propagation Signed-off-by: Faishal Saiyed <[email protected]> * Fix issues with suggestions not working in image block The issue was that on mobile, the block toolbar has overflow auto so as to scroll horizontally. This hid the suggestions box in a weird scrollbar. This PR tweaks that, so the suggestions don't show up on mobile at all. This is not an ideal fix, but suggestions weren't very mobile friendly in the first place. Suggest we get this in now as a bandaid, and then look at addressing suggestions on mobile separately, for example using the same technique the block switcher uses. * Fix issue with caption links * Ignore typing in block toolbars

youknowriad added this to the 2.7 milestone Apr 18, 2018

WordPress#5894:Image add link input disappear when start typing, fixe…

72bb5c6

…d it by stopping event propagation Signed-off-by: Faishal Saiyed <[email protected]>

youknowriad force-pushed the fix/image-add-link branch from db3086d to 72bb5c6 Compare April 18, 2018 09:29

youknowriad added the [Type] Bug An existing feature does not function as intended label Apr 18, 2018

Fix issue with caption links

6758902

Ignore typing in block toolbars

193bcb0

youknowriad approved these changes Apr 18, 2018

View reviewed changes

youknowriad merged commit 7e25ca2 into WordPress:master Apr 18, 2018

aduth reviewed Apr 18, 2018

View reviewed changes

aduth mentioned this pull request Apr 18, 2018

Add polish #6138

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixed image add link input disappears issue #5942

Fixed image add link input disappears issue #5942

faishal commented Apr 3, 2018 •

edited

Loading

paulwilde commented Apr 4, 2018

danielbachhuber commented Apr 10, 2018

aduth commented Apr 10, 2018

youknowriad commented Apr 18, 2018

jasmussen commented Apr 18, 2018

jasmussen commented Apr 18, 2018

youknowriad commented Apr 18, 2018

youknowriad left a comment

youknowriad commented Apr 18, 2018

aduth Apr 18, 2018

aduth Apr 18, 2018 •

edited

Loading

youknowriad Apr 18, 2018

Fixed image add link input disappears issue #5942

Fixed image add link input disappears issue #5942

Conversation

faishal commented Apr 3, 2018 • edited Loading

Description

How Has This Been Tested?

Types of changes

Checklist:

paulwilde commented Apr 4, 2018

danielbachhuber commented Apr 10, 2018

aduth commented Apr 10, 2018

youknowriad commented Apr 18, 2018

jasmussen commented Apr 18, 2018

jasmussen commented Apr 18, 2018

youknowriad commented Apr 18, 2018

youknowriad left a comment

Choose a reason for hiding this comment

youknowriad commented Apr 18, 2018

aduth Apr 18, 2018

Choose a reason for hiding this comment

aduth Apr 18, 2018 • edited Loading

Choose a reason for hiding this comment

youknowriad Apr 18, 2018

Choose a reason for hiding this comment

faishal commented Apr 3, 2018 •

edited

Loading

aduth Apr 18, 2018 •

edited

Loading