woocommerce icon indicating copy to clipboard operation
woocommerce copied to clipboard

Migrate StateInput, CountryInput and custom fields to native `<select>`

Open samueljseay opened this issue 2 months ago • 7 comments

Changes proposed in this Pull Request:

Closes https://github.com/woocommerce/woocommerce/issues/47757 Closes https://github.com/woocommerce/woocommerce/issues/44653

This migrates the use of @wordpress/components Combobox to a native select instead. The rationale is that the Combobox does not work well for autofill and also by moving to a native select it will be more performant.

Even without testing runtime performance this shrinks the bundle size by 40KB total while also removing the dependency on lodash in checkout, saving an additional 46KB.

How to test the changes in this Pull Request:

There are 4 usages to test:

  1. State Input in Billing and Shipping forms
  2. Country Input in Billing and Shipping forms
  3. Custom fields as were implemented in https://github.com/woocommerce/woocommerce/issues/42758

To test custom fields, you'll need a snippet like:

add_action(
	'woocommerce_blocks_loaded',
	function() {
		woocommerce_register_additional_checkout_field(
			array(
				'id'             => 'plugin-namespace/road-type',
				'label'          => __( 'Road type', 'woo-gutenberg-products-block' ),
				'optionalLabel'  => __( 'Road type (optional)', 'woo-gutenberg-products-block' ),
				'autocomplete'   => 'road-type',
				'required'       => 'true',
				'autocapitalize' => 'characters',
				'location'       => 'address',
				'type'           => 'select',
				'options'        => array(
					array(
						'value' => 'alleyway',
						'label' => __( 'Alleyway', 'woo-gutenberg-products-block' ),
					),
					array(
						'value' => 'avenue',
						'label' => __( 'Avenue', 'woo-gutenberg-products-block' ),
					),
					array(
						'value' => 'boulevard',
						'label' => __( 'Boulevard', 'woo-gutenberg-products-block' ),
					),
					array(
						'value' => 'cul-de-sac',
						'label' => __( 'Cul-de-sac', 'woo-gutenberg-products-block' ),
					),
					array(
						'value' => 'street',
						'label' => __( 'Street', 'woo-gutenberg-products-block' ),
					),
				),
			)
		);
	}
);
  1. Shipping calculator:
  • Go to WooCommerce -> Settings -> Shipping -> Shipping Settings and check the Enable the shipping calculator on the cart page option.
  • On the front-end, add an item to your cart and go to the Cart block.
  • In the sidebar, under "Shipping" click "Change address"
  • Use the country input to select various countries, ensure for countries with States (e.g. USA) the state field shows and functions correctly too.
  1. Keyboard navigation smoke testing

Changelog entry

  • [ ] Automatically create a changelog entry from the details below.
  • [ ] This Pull Request does not require a changelog entry. (Comment required below)
Changelog Entry Details

Significance

  • [ ] Patch
  • [ ] Minor
  • [ ] Major

Type

  • [ ] Fix - Fixes an existing bug
  • [ ] Add - Adds functionality
  • [ ] Update - Update existing functionality
  • [ ] Dev - Development related task
  • [ ] Tweak - A minor adjustment to the codebase
  • [ ] Performance - Address performance issues
  • [ ] Enhancement - Improvement to existing functionality

Message

Changelog Entry Comment

Comment

samueljseay avatar Jun 05 '24 12:06 samueljseay