0

I have 2 inputs on the product form working correctly and firing every time there is a change but any other input I access in the same way as the working 2 is firing onblur or when it loses focus. Is this expected behavior or a bug or is there something wrong with my code?

I have tried it on other inputs such as weight, inputs that have the same scope settings all with the same result.

Module/ModuleName/view/adminhtml/ui_component/product_form.xml

    <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
        <container name="container_price">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="sortOrder" xsi:type="number">1</item>
                    <item name="component" xsi:type="string">Module_ModuleName/js/components/product-form</item>
                </item>
            </argument>

        </container>
    </form>

Module/ModuleName/view/adminhtml/web/js/components/product-form.js

    define(
        [
            'underscore',
            'uiComponent',
            'ko',
            'jquery',
            'mage/translate',
        ],
        function (_, Component, ko, $, $t) {
            'use strict';
            return Component.extend(
                {
                    defaults: {
                        productName: '',
                        productDescription:'',
                        productSku:'',
                        imports: {
                            productName: '${ $.provider }:data.product.name',
                            productDescription: '${ $.provider }:data.product.description',
                            productSku: '${ $.provider }:data.product.sku',
                        }
                    },

                    /**
                     * execution starts
                     */
                    initialize: function (config) {
                        var self = this;
                        this._super(config);
                        self.initSubscribers();
                    },

                    /**
                     * init observers
                     */
                    initObservable: function () {
                        this._super().observe(
                            'productName productDescription productSku'
                        );
                        return this;
                    },

                    /**
                     * initialize subscribers
                     */
                    initSubscribers: function () {
                        var self = this;

                        //consoling the initial values of the product name and description after page loads
//works correctly 
                        console.log(self.productName());
                        console.log(self.productDescription());
                        console.log(self.productSku());

                       //creating a knockout subscriber to observe any changes in the product name
                        self.productName.subscribe(
                            function (productName) {
                                console.log(productName);
                            }
                        );
                        // creating a knockout subscriber to observe any changes in the product description
                        self.productDescription.subscribe(
                            function (productDescription) {
                                console.log(productDescription)
                            }
                        );
                        //creating a knockout subscriber to observe any changes in the product SKU
//Only fires when it loses focus. 
                        self.productSku.subscribe(
                            function (productSku) {
                                console.log(productSku)
                            }
                        );
                    },
                }
            );
        }
    );

I have also tried to override the subscribe function event by changing it to keyup or implicitly stating "change" but no luck

self.productSku.subscribe(
               function (productSku) {
                 console.log(productSku)
                },null,"change"
              );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.