Forms: use a placeholder attribute in the editor instead of value (#41712)

Author: simison

projects/packages/forms/changelog/update-forms-placeholder-attr-in-editor

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Forms: use placeholder attribute in editor instead of value

projects/packages/forms/src/blocks/contact-form/components/jetpack-field.js

@@ -3,7 +3,6 @@ import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { createHigherOrderComponent, compose } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import clsx from 'clsx';
-import { isEmpty } from 'lodash';
 import { useFormStyle } from '../util/form';
 import { withSharedFieldAttributes } from '../util/with-shared-field-attributes';
 import JetpackFieldControls from './jetpack-field-controls';
@@ -20,7 +19,7 @@ const JetpackField = props => {
 		requiredText,
 		label,
 		setAttributes,
-		placeholder,
+		placeholder = '',
 		width,
 		insertBlocksAfter,
 		type,
@@ -31,7 +30,7 @@ const JetpackField = props => {
 	const blockProps = useBlockProps( {
 		className: clsx( 'jetpack-field', {
 			'is-selected': isSelected,
-			'has-placeholder': ! isEmpty( placeholder ),
+			'has-placeholder': placeholder !== '',
 		} ),
 		style: blockStyle,
 	} );
@@ -51,8 +50,9 @@ const JetpackField = props => {
 					className="jetpack-field__input"
 					onChange={ e => setAttributes( { placeholder: e.target.value } ) }
 					style={ fieldStyle }
-					type={ type }
-					value={ placeholder }
+					type={ isSelected ? 'text' : type }
+					value={ isSelected ? placeholder : '' }
+					placeholder={ placeholder }
 					onClick={ event => type === 'file' && event.preventDefault() }
 					onKeyDown={ event => {
 						if ( event.defaultPrevented || event.key !== 'Enter' ) {
@@ -70,7 +70,6 @@ const JetpackField = props => {
 				setAttributes={ setAttributes }
 				placeholder={ placeholder }
 				attributes={ attributes }
-				hidePlaceholder={ type === 'number' }
 			/>
 		</>
 	);