Typeahead component issue

[pbodlev]

Hello,

I am configuring a typeahead component in UI builder.

I have issues with mapping the Item selected event to a client script function. After I select an item - nothing changes.

Please check my config..may be I am missing something.

[lauri457]

Nothing looks off in the props but I would check the macroponent record for weird stuff. The ui isn't always perfect and you can sometimes get left with malformed compositions

        "eventMappings": [
            {
                "eventMappingId": "NpklEPMUCUFhheeddIoGcWoFgUHk",
                "isConfiguration": false,
                "offRowStorageId": null,
                "sourceEventApiName": "sn_typeahead.NOW_TYPEAHEAD#SELECTED_ITEM_SET",
                "sourceEventCorrelationId": null,
                "sourceEventDefinition": {
                    "apiName": "sn_typeahead.NOW_TYPEAHEAD#SELECTED_ITEM_SET",
                    "id": null,
                    "type": "UXEVENT"
                },
                "sourceEventSysId": null,
                "targets": [
                    {
                        "broker": null,
                        "clientScript": {
                            "payload": {
                                "type": "JSON_LITERAL",
                                "value": {}
                            },
                            "sysId": "28e8e732831c0f50557ff0d6feaad389"
                        },
                        "clientTransformScript": "",
                        "conditional": null,
                        "declarativeAction": null,
                        "event": null,
                        "operation": null,
                        "targetId": "QudDuPddcAUccsjjdwLaabRWddAGQ",
                        "type": "CLIENT_SCRIPT"
                    }
                ]
            }
        ],

[pbodlev]

Found the issue..

Seems that this component doesn't work inside Node Map component.

Little bit background info - in Node Map component you have placeholders for other components on top-right corner. I have placed there buttons (which worked perfectly) and also I wanted to put typeahead component there.

Once I moved typeahead component outside Node Map container - everything works fine.

[Dinesh Chilaka]

@pbodlev ,

Can I Know how did you place the typeahead component inside the Node map component?

Thanks,

Dinesh

[pbodlev]

check image...previously Typeahead 1 was under slot-one and it wasnt working.

seems that the issue is exactly what lauri mentioned..inside node map component there is event.stopPropagation which cause this issue.

[lauri457]

Not too familiar with the component but it looks like there is a typeahead component already in the component itself so could you use that instead?

I had a look at the minified code of the node map component and it looks like there is an action handler for the event and you can see that there is a action.stopPropagation() call in there. This I'd imagine is what stops the event from reaching the event handler.

    wv = {
        "NOW_TYPEAHEAD#VALUE_SET": K((e) => {
            const {
                action: t,
                action: { payload: o },
                state: { findState: n },
                dispatch: a,
                updateState: i,
            } = e;
            t.stopPropagation(), vv.log("_findRequested-payload", o);
            const { value: r } = o,
                d = r.toLowerCase().trimStart(),
                { term: l } = n;
            if (d !== l) {
                const e = { id: "", type: "", term: d };
                vv.debug("_findRequested-updateState", e), i(_t({ findState: e })), bv(a, e);
            }
        }),
        "NOW_TYPEAHEAD#SELECTED_ITEM_SET": K((e) => {
            const {
                action: t,
                action: { payload: o },
                updateState: n,
                dispatch: a,
            } = e;
            t.stopPropagation(), vv.log("_findSpecificElementRequested-payload", o);
            const {
                item: { id: i, label: r, type: d, actionSource: l },
            } = o,
                s = r.toLowerCase().trim();
            if (i && s && "autoselect" !== l) {
                const e = { term: s, id: i, type: d };
                vv.debug("_findSpecificElementRequested-updateState", e), n(_t({ findState: e })), bv(a, e);
            }
        }),
        "SN_NODE_MAP#FIND_REQUESTED": yv,
    },

xv = { applyFind: bv, applyNonManageFind: yv, actionHandlers: wv },

@Dinesh Chilaka you might need to update your node map component. I was on v25.x.x and didn't have the containers but updated to 27.3.0 and they appeared.