woocommerce
woocommerce copied to clipboard
Migrate StateInput, CountryInput and custom fields to native `<select>`
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:
- State Input in Billing and Shipping forms
- Country Input in Billing and Shipping forms
- 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' ),
),
),
)
);
}
);
- Shipping calculator:
- Go to
WooCommerce -> Settings -> Shipping -> Shipping Settings
and check theEnable 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.
- 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