From 0aee803434a0485b400df612b7812d4109732212 Mon Sep 17 00:00:00 2001
From: tg-ephox <30682649+tg-ephox@users.noreply.github.com>
Date: Tue, 14 Nov 2017 22:14:31 +1000
Subject: [PATCH] FIX - Cannot type in the Link Input dialog when in a
 paragraph (#3468)

---
 components/slot-fill/fill.js      |  8 +++++++
 components/slot-fill/test/slot.js | 36 +++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/components/slot-fill/fill.js b/components/slot-fill/fill.js
index a47f283cb3b432..91824106fe2772 100644
--- a/components/slot-fill/fill.js
+++ b/components/slot-fill/fill.js
@@ -39,6 +39,14 @@ class Fill extends Component {
 		}
 	}
 
+	componentDidUpdate() {
+		const { getSlot = noop } = this.context;
+		const slot = getSlot( this.props.name );
+		if ( slot && ! slot.props.bubblesVirtually ) {
+			slot.forceUpdate();
+		}
+	}
+
 	render() {
 		const { getSlot = noop } = this.context;
 		const { name, children } = this.props;
diff --git a/components/slot-fill/test/slot.js b/components/slot-fill/test/slot.js
index 4cacedefe12a25..a2253a3427bb18 100644
--- a/components/slot-fill/test/slot.js
+++ b/components/slot-fill/test/slot.js
@@ -10,6 +10,27 @@ import Slot from '../slot';
 import Fill from '../fill';
 import Provider from '../provider';
 
+/**
+ * WordPress Dependencies
+ */
+import { Component } from '@wordpress/element';
+
+class Filler extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.state = {
+			num: 1,
+		};
+	}
+	render() {
+		return [
+			<button key="1" type="button" onClick={ () => this.setState( { num: this.state.num + 1 } ) } />,
+			<Fill name={ this.props.name } key="2">{ this.state.num.toString() }</Fill>,
+		];
+	}
+}
+
 describe( 'Slot', () => {
 	it( 'should render empty Fills', () => {
 		const element = mount(
@@ -60,4 +81,19 @@ describe( 'Slot', () => {
 
 		expect( element.find( 'Slot > div' ).html() ).toBe( '<div><span></span><div></div>text</div>' );
 	} );
+
+	it( 'should re-render Slot when not bubbling virtually', () => {
+		const element = mount(
+			<Provider>
+				<Slot name="egg" />
+				<Filler name="egg" />
+			</Provider>
+		);
+
+		expect( element.find( 'Slot > div' ).html() ).toBe( '<div>1</div>' );
+
+		element.find( 'button' ).simulate( 'click' );
+
+		expect( element.find( 'Slot > div' ).html() ).toBe( '<div>2</div>' );
+	} );
 } );