Cannot type in the Link Input dialog when in a paragraph

[ephox-mogran]

Issue Overview

The Link input in a paragraph doesn't accept input. Note, that a JS error that the open PR fixes ( #3398 ) is not the cause of this issue, although it does make it harder to debug.

Steps to Reproduce (for bugs)

1. Create a new paragraph
2. Create a link in that paragraph
3. Try and type

Expected Behavior

The characters are added to the input

Current Behavior

The characters disappear and the input stays either empty or with one character.

Note, that if you move the mouse left and right during typing, you can type into the input.

Possible Solution

We've looked into this a little bit. If the Slot in Editable is set to bubbleVirtually, then it doesn't happen, but we're not convinced that that is a good solution.

[ephox-mogran]

It looks like the issue is based around how the manual slot fill works. We think that the slot isn't re-rendering because it's in a completely different part of the tree (toolbar). The fill render code is being called, but because we aren't bubbling virtually, then the render is returning null (and the slot is not re-rendering).

const { getSlot = noop } = this.context;
const { name, children } = this.props;
const slot = getSlot( name );
if ( ! slot || ! slot.props.bubblesVirtually ) {
	return null;
}

So this returns null AND doesn't tell the slot to update, so nothing changes. However, we can probably get the slot to update if we put the code in componentDidUpdate.

	componentDidUpdate() {
		const { getSlot = noop } = this.context;
		const slot = getSlot( this.props.name );
		if ( slot && ! slot.props.bubblesVirtually ) {
			slot.forceUpdate();
		}
	}