Default Block Appender: Remove redundant event handlers (#8714)

WordPress · Aug 15, 2018 · ad5e8d3 · ad5e8d3
1 parent a0e0847
commit ad5e8d3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 33 deletions.
diff --git a/packages/editor/src/components/default-block-appender/index.js b/packages/editor/src/components/default-block-appender/index.js
@@ -37,6 +37,19 @@ export function DefaultBlockAppender( {
 
 	const value = decodeEntities( placeholder ) || __( 'Write your story' );
 
+	// The appender "button" is in-fact a text field so as to support
+	// transitions by WritingFlow occurring by arrow key press. WritingFlow
+	// only supports tab transitions into text fields and to the block focus
+	// boundary.
+	//
+	// See: https://github.com/WordPress/gutenberg/issues/4829#issuecomment-374213658
+	//
+	// If it were ever to be made to be a proper `button` element, it is
+	// important to note that `onFocus` alone would not be sufficient to
+	// capture click events, notably in Firefox.
+	//
+	// See: https://gist.github.com/cvrebert/68659d0333a578d75372
+
 	return (
 		<div
 			data-root-client-id={ rootClientId || '' }
@@ -51,8 +64,6 @@ export function DefaultBlockAppender( {
 				type="text"
 				readOnly
 				onFocus={ onAppend }
-				onClick={ onAppend }
-				onKeyDown={ onAppend }
 				value={ showPrompt ? value : '' }
 			/>
 			<InserterWithShortcuts rootClientId={ rootClientId } layout={ layout } />

diff --git a/packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap b/packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
@@ -9,14 +9,6 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
   <input
     aria-label="Add block"
     className="editor-default-block-appender__content"
-    onClick={
-      [MockFunction] {
-        "calls": Array [
-          Array [],
-        ],
-        "results": undefined,
-      }
-    }
     onFocus={
       [MockFunction] {
         "calls": Array [
@@ -25,14 +17,6 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
         "results": undefined,
       }
     }
-    onKeyDown={
-      [MockFunction] {
-        "calls": Array [
-          Array [],
-        ],
-        "results": undefined,
-      }
-    }
     readOnly={true}
     role="button"
     type="text"
@@ -60,9 +44,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
   <input
     aria-label="Add block"
     className="editor-default-block-appender__content"
-    onClick={[MockFunction]}
     onFocus={[MockFunction]}
-    onKeyDown={[MockFunction]}
     readOnly={true}
     role="button"
     type="text"
@@ -90,9 +72,7 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
   <input
     aria-label="Add block"
     className="editor-default-block-appender__content"
-    onClick={[MockFunction]}
     onFocus={[MockFunction]}
-    onKeyDown={[MockFunction]}
     readOnly={true}
     role="button"
     type="text"

diff --git a/packages/editor/src/components/default-block-appender/test/index.js b/packages/editor/src/components/default-block-appender/test/index.js
@@ -27,17 +27,6 @@ describe( 'DefaultBlockAppender', () => {
 		expect( wrapper ).toMatchSnapshot();
 	} );
 
-	it( 'should append a default block when input clicked', () => {
-		const onAppend = jest.fn();
-		const wrapper = shallow( <DefaultBlockAppender isVisible onAppend={ onAppend } showPrompt /> );
-		const input = wrapper.find( 'input.editor-default-block-appender__content' );
-
-		expect( input.prop( 'value' ) ).toEqual( 'Write your story' );
-		input.simulate( 'click' );
-
-		expectOnAppendCalled( onAppend );
-	} );
-
 	it( 'should append a default block when input focused', () => {
 		const onAppend = jest.fn();
 		const wrapper = shallow( <DefaultBlockAppender isVisible onAppend={ onAppend } showPrompt /> );