Skip to content

Magento 2 custom checkout input field based on custom component

I am trying to add new select field that will have certain values when city is changed. To do that I need my custom js component because it does the adding/removing options from select.
Below is my layout process plugin in which I have added my custom field:

public function afterProcess(
    MagentoCheckoutBlockCheckoutLayoutProcessor $subject,
    array $jsLayout
) { 
    $this->_logger->info('***************** LayoutProcessor Plugin is called *****************');

    $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
    ['shippingAddress']['children']['before-form']['children']['dealer'] = [
        'component' => 'SmSoftware_PostShip/js/form/element/dealer-id',
        'config' => [
            'customScope' => 'shippingAddress',
            'template' => 'ui/form/field',
            'elementTmpl' => 'ui/form/element/select',
            'options' => [],
            'id' => 'dealer'
        ],
        'dataScope' => 'shippingAddress.dealer',
        'label' => __('Dealer'),
        'provider' => 'checkoutProvider',
        'visible' => true,
        'validation' => [
            'required-entry' => true
        ],
        'sortOrder' => 200,
        'id' => 'dealer'
    ];


    return $jsLayout;
}

Now, the field is not displayed on checkout_index_index.xml at all, but when I change the component value to Magento_Ui/js/form/element/select it shows.

require([
    'ko',
    'Magento_Ui/js/form/element/select',
    'jquery'
    ], function (ko, Select, $) {
        'use strict';

        console.log("City field is being observed....");
        return Select.extend({});

and its placed in view/frontend/web/js/form/element.

My custom component has the following value:

If anyone have any idea what the problem is please explain to me.
Magento version is 2.4.2