Event for add option

[amersi90]

Description:

Is there any event fired that I can catch and modify data before returning when user clicks on Add Option (Something like onAddField in formBuilder)

I would like to use this to autogenerate Value.

I tried to search in docs but could not find anything related.

Environment Details:

• formBuilder Version: 3.4.1
• Browser: Chrome
• OS: Windows 10

Expected Behavior

Actual Behavior

Steps to Reproduce

Screenshot - (optional)

[happymachines]

From what I can tell after poking through the source there do not seem to be any events fired when adding or removing options. However, it's possible to workaround this using a MutationObserver which essentially watches the options DOM tree for additions or removals, basically accomplishing the same thing.

The following is something I implemented recently and should give you a general idea of how to go about it. The function can be used as the handler for the for the onadd typeUserEvent in the form builder, see https://formbuilder.online/docs/formBuilder/options/typeUserEvents/

Also worth noting the formBuilderRendered event in the code below is a custom event that I dispatch in my application after the formBuilder promise completes, so you may need to remove that.

 define([
    'jquery',
    'underscore',
], function ($, _) {

    /**
     * DOM Mutation handler for field select option
     * add or removal
     * @param mutationsList
     */
    var selectOptionAddedHandler = function(mutationsList) {
        _.each(mutationsList, function(mutation) {
            /**
             * A select option has been added or removed
             */
            if (mutation.type === 'childList') {
                var $newOption = $(mutation.addedNodes[0]);

                // Do what you need to here with the new option

            }
        })
    }

    /**
     * Form builder does not provide events for select options being
     * add or removed from a field, so we setup a dom mutation observer
     * @private
     */
    return function(field) {
        var $fieldOptions = $(field).find('.field-options ol'),
            mutationConfig = {attributes: true, childList: true, subtree: true},
            observer = new MutationObserver(selectOptionAddedHandler);

        $(document).on('formBuilderRendered fieldAdded fieldRemoved', $(field).selector, function fieldSelectHandler(event) {
            if (event.type === "fieldRemoved") {
                $(document).off('fieldAdded fieldRemoved', fieldSelectHandler);
                observer.disconnect();
            }

            if (event.type === 'fieldAdded' || event.type === 'fieldRendered' || event.type === 'formBuilderRendered') {
                observer.observe($fieldOptions.get(0), mutationConfig);
            }
        })
    };
})

[kevinchappell]

🎉 This issue has been resolved in version 3.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀