normalize IDs for form fields in Checkout (#47650)

* normalize IDs for form fields and fix types

* update docs as well

* update rest of docs

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* fix linting for document

* also align classnames

* revert to correct classname

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/address-line-2-field.tsx

@@ -9,14 +9,14 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { AddressFieldProps } from './types';
+import { AddressLineFieldProps } from './types';
 
-const Address2Field = < T extends AddressFormValues | ContactFormValues >( {
+const AddressLine2Field = < T extends AddressFormValues | ContactFormValues >( {
 	field,
 	props,
 	onChange,
 	value,
-}: AddressFieldProps< T > ): JSX.Element => {
+}: AddressLineFieldProps< T > ): JSX.Element => {
 	const isFieldRequired = field?.required ?? false;
 
 	// Display the input field if it has a value or if it is required.
@@ -57,4 +57,4 @@ const Address2Field = < T extends AddressFormValues | ContactFormValues >( {
 	);
 };
 
-export default Address2Field;
+export default AddressLine2Field;

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/address-line-fields.tsx

@@ -7,22 +7,22 @@ import { AddressFormValues, ContactFormValues } from '@woocommerce/settings';
 /**
  * Internal dependencies
  */
-import Address2Field from './address-2-field';
-import { AddressFieldsProps } from './types';
+import AddressLine2Field from './address-line-2-field';
+import { AddressLineFieldsProps } from './types';
 import { createFieldProps } from './utils';
 
-const AddressFields = < T extends AddressFormValues | ContactFormValues >( {
-	id,
+const AddressLineFields = < T extends AddressFormValues | ContactFormValues >( {
+	formId,
 	address1,
 	address2,
 	addressType,
 	onChange,
-}: AddressFieldsProps< T > ): JSX.Element => {
+}: AddressLineFieldsProps< T > ): JSX.Element => {
 	const address1FieldProps = address1
-		? createFieldProps( address1.field, id, addressType )
+		? createFieldProps( address1.field, formId, addressType )
 		: undefined;
 	const address2FieldProps = address2
-		? createFieldProps( address2.field, id, addressType )
+		? createFieldProps( address2.field, formId, addressType )
 		: undefined;
 
 	return (
@@ -40,7 +40,7 @@ const AddressFields = < T extends AddressFormValues | ContactFormValues >( {
 				/>
 			) }
 			{ address2?.field && ! address2?.field?.hidden && (
-				<Address2Field
+				<AddressLine2Field
 					field={ address2.field }
 					props={ address2FieldProps }
 					onChange={ onChange }
@@ -51,4 +51,4 @@ const AddressFields = < T extends AddressFormValues | ContactFormValues >( {
 	);
 };
 
-export default AddressFields;
+export default AddressLineFields;

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/form.tsx

@@ -34,7 +34,7 @@ import prepareFormFields from './prepare-form-fields';
 import validateShippingCountry from './validate-shipping-country';
 import customValidationHandler from './custom-validation-handler';
 import Combobox from '../../combobox';
-import AddressFields from './address-fields';
+import AddressLineFields from './address-line-fields';
 import { createFieldProps, getFieldData } from './utils';
 
 /**
@@ -125,8 +125,6 @@ const Form = < T extends AddressFormValues | ContactFormValues >( {
 				if ( field.type === 'checkbox' ) {
 					return (
 						<CheckboxControl
-							className={ `wc-block-components-address-form__${ field.key }` }
-							label={ field.label }
 							key={ field.key }
 							checked={ Boolean( values[ field.key ] ) }
 							onChange={ ( checked: boolean ) => {
@@ -154,11 +152,11 @@ const Form = < T extends AddressFormValues | ContactFormValues >( {
 					);
 
 					return (
-						<AddressFields
+						<AddressLineFields
 							address1={ address1 }
 							address2={ address2 }
 							addressType={ addressType }
-							id={ id }
+							formId={ id }
 							key={ field.key }
 							onChange={ ( key, value ) => {
 								onChange( {
@@ -235,7 +233,10 @@ const Form = < T extends AddressFormValues | ContactFormValues >( {
 							{ ...fieldProps }
 							className={ classnames(
 								'wc-block-components-select-input',
-								`wc-block-components-select-input-${ field.key }`
+								`wc-block-components-select-input-${ field.key }`.replaceAll(
+									'/',
+									'-'
+								)
 							) }
 							value={ values[ field.key ] }
 							onChange={ ( newValue: string ) => {

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/types.ts

@@ -46,10 +46,10 @@ interface AddressFieldData {
 	value?: string | undefined;
 }
 
-export interface AddressFieldsProps< T >
+export interface AddressLineFieldsProps< T >
 	extends Omit< AddressFormProps< T >, 'fields' | 'values' | 'onChange' > {
 	// Overwriting the id for the fields.
-	id: string;
+	formId: string;
 	// Address 1 fields and value.
 	address1: AddressFieldData;
 	// Address 2 fields and value.
@@ -60,7 +60,7 @@ export interface AddressFieldsProps< T >
 	onChange: ( key: keyof T, value: string ) => void;
 }
 
-export interface AddressFieldProps< T > {
+export interface AddressLineFieldProps< T > {
 	// Form fields.
 	field: KeyedFormField;
 	// Props for the form field.

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/utils.ts

@@ -25,19 +25,22 @@ export interface FieldProps {
 }
 
 export const createFieldProps = (
-	address: KeyedFormField | undefined,
-	fieldId: string,
+	field: KeyedFormField,
+	formId: string,
 	fieldAddressType: string
 ): FieldProps => ( {
-	id: `${ fieldId }-${ address?.key }`,
-	errorId: `${ fieldAddressType }_${ address?.key }`,
-	label: address?.required ? address?.label : address?.optionalLabel,
-	autoCapitalize: address?.autocapitalize,
-	autoComplete: address?.autocomplete,
-	errorMessage: address?.errorMessage,
-	required: address?.required,
-	className: `wc-block-components-address-form__${ address?.key }`,
-	...address?.attributes,
+	id: `${ formId }-${ field?.key }`.replaceAll( '/', '-' ), // Replace all slashes with hyphens to avoid invalid HTML ID.
+	errorId: `${ fieldAddressType }_${ field?.key }`,
+	label: field?.required ? field?.label : field?.optionalLabel,
+	autoCapitalize: field?.autocapitalize,
+	autoComplete: field?.autocomplete,
+	errorMessage: field?.errorMessage,
+	required: field?.required,
+	className: `wc-block-components-address-form__${ field?.key }`.replaceAll(
+		'/',
+		'-'
+	), // Replace all slashes with hyphens to avoid invalid HTML classes.,
+	...field?.attributes,
 } );
 
 export const getFieldData = < T extends AddressFormValues | ContactFormValues >(

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/additional-checkout-fields.md

@@ -236,7 +236,7 @@ There are plans to expand this list, but for now these are the types available.
 
 To register additional checkout fields you must use the `woocommerce_register_additional_checkout_field` function.
 
-It is recommended to run this function after the `woocommerce_blocks_loaded` action.
+It is recommended to run this function after the `woocommerce_init` action.
 
 The registration function takes an array of options describing your field. Some field types take additional options.
 
@@ -312,7 +312,7 @@ Select fields can also be marked as required. If they are not (i.e. they are opt
 		'label' => 'Our New York Store'
 	]
 ]
-````
+```
 
 #### Options for `checkbox` fields
 
@@ -347,7 +347,7 @@ This example demonstrates rendering a text field in the address section:
 
 ```php
 add_action(
-	'woocommerce_blocks_loaded',
+	'woocommerce_init',
 	function() {
 		woocommerce_register_additional_checkout_field(
 			array(
@@ -377,7 +377,7 @@ This results in the following address form (the billing form will be the same):
 The rendered markup looks like this:
 
 ```html
-<input type="text" id="shipping-namespace/gov-id" autocapitalize="off"
+<input type="text" id="shipping-namespace-gov-id" autocapitalize="off"
        autocomplete="government-id" aria-label="custom aria label"
        aria-describedby="some-element" required="" aria-invalid="true"
        title="Title to show on hover" pattern="[A-Z0-9]{5}"
@@ -390,7 +390,7 @@ This example demonstrates rendering a checkbox field in the contact information
 
 ```php
 add_action(
-	'woocommerce_blocks_loaded',
+	'woocommerce_init',
 	function() {
 		woocommerce_register_additional_checkout_field(
 			array(
@@ -402,7 +402,7 @@ add_action(
 		);
 	}
 );
-````
+```
 
 This results in the following contact information section:
 
@@ -416,7 +416,7 @@ This example demonstrates rendering a select field in the order information sect
 
 ```php
 add_action(
-	'woocommerce_blocks_loaded',
+	'woocommerce_init',
 	function() {
 		woocommerce_register_additional_checkout_field(
 			array(
@@ -690,7 +690,7 @@ This example is just a combined version of the examples shared above.
 
 ```php
 add_action(
-	'woocommerce_blocks_loaded',
+	'woocommerce_init',
 	function() {
 		woocommerce_register_additional_checkout_field(
 			array(

plugins/woocommerce/changelog/47650-fix-id-in-additional-fields

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Replace forward slashes in additional fields IDs with hyphens.