Fixed space bar for RichText in Firefox

WordPress · Aug 7, 2020 · 7857885 · 7857885
1 parent f771953
commit 7857885
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 23 deletions.
diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
@@ -12,32 +12,32 @@ import { ToggleControl } from '@wordpress/components';
 import { useEffect, useRef } from '@wordpress/element';
 import { SPACE } from '@wordpress/keycodes';
 
-export default ( {
+export default function DetalsEdit( {
 	attributes,
 	className,
 	clientId,
 	isSelected,
 	setAttributes,
-} ) => {
+} ) {
 	const summaryRef = useRef( null );
 
+	const keyUpListener = ( e ) => {
+		if ( e.keyCode === SPACE ) {
+			e.preventDefault();
+		}
+	};
+
+	const clickListener = ( e ) => e.preventDefault();
+
 	useEffect( () => {
 		if ( ! summaryRef.current ) {
 			return;
 		}
 
-		const keyDownListener = ( e ) => {
-			if ( e.keyCode === SPACE ) {
-				e.preventDefault();
-			}
-		};
-
-		const clickListener = ( e ) => e.preventDefault();
-
-		summaryRef.current.addEventListener( 'keyup', keyDownListener );
+		summaryRef.current.addEventListener( 'keyup', keyUpListener );
 		summaryRef.current.addEventListener( 'click', clickListener );
 		return () => {
-			summaryRef.current.removeEventListener( 'keyup', keyDownListener );
+			summaryRef.current.removeEventListener( 'keyup', keyUpListener );
 			summaryRef.current.removeEventListener( 'click', clickListener );
 		};
 	}, [ summaryRef.current ] );
@@ -63,18 +63,18 @@ export default ( {
 				/>
 			</InspectorControls>
 			<details className={ className } open={ showInnerBlocks }>
-				<summary ref={ summaryRef }>
-					<RichText
-						value={ attributes.summaryContent }
-						onChange={ ( summaryContent ) =>
-							setAttributes( { summaryContent } )
-						}
-						placeholder={ __( 'Write a summary…' ) }
-						aria-label={ __( 'Summary text' ) }
-					/>
-				</summary>
+				<RichText
+					tagName="summary"
+					value={ attributes.summaryContent }
+					onChange={ ( summaryContent ) =>
+						setAttributes( { summaryContent } )
+					}
+					ref={ summaryRef }
+					placeholder={ __( 'Write a summary…' ) }
+					aria-label={ __( 'Summary text' ) }
+				/>
 				<InnerBlocks />
 			</details>
 		</>
 	);
-};
+}
diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js
@@ -521,6 +521,11 @@ function RichText( {
 	function handleSpace( event ) {
 		const { keyCode, shiftKey, altKey, metaKey, ctrlKey } = event;
 
+		if ( keyCode === SPACE && TagName === 'summary' ) {
+			handleChange( insert( createRecord(), ' ' ) );
+			return;
+		}
+
 		if (
 			// Only override when no modifiers are pressed.
 			shiftKey ||