[LWC] Combo box's result is still showing

[syless]

Hi

The modal display and selection are normal, but if you select and cancelEditing(), the result appears to remain

Below is the code for lightning-modal

Thank you.

await modal.open({
        size: 'small',
        description: 'Search Road Name Address of modal',
        header: 'Search Road Name Address',
        keyword: evt.source.input.value,
        record: productGrid.record,
        // Modal에서 넘어온 이벤트
        onselect: (e) => {
            e.stopPropagation();
            console.log('select', e.detail);
            console.log('selected row', selected.data.parentIndex);
        }
    }).then((result) => {
        console.log('modal!!', result);
        if (result) {
            const selected = productGrid.selectedRecord;
            console.log('selected row', selected.data);
            selected.set({
                ProductName: 'TEST'
            });
            console.log(productGrid.store.json);

        // todo ??? 
        productGrid.cancelEditing();
    } else {
        productGrid.cancelEditing();
    }

[alex.l]

Hi,

cancelEditing won't revert changes because internally updated value will be applied only before finish cell edit and not while editing.
In you code you applied changes during edit. In this case you need to revert changes by your own.
https://bryntum.com/products/grid/docs/api/Core/data/Model#function-revertChanges

[syless]

Hi,

Thank you for the answer.

Sorry for the lack of explanation.

What I want is to exit the editor while updating the record without returning the value.

Thank you.

[alex.l]

Try to use https://bryntum.com/products/grid/docs/api/Grid/feature/CellEdit#function-finishEditing , this is for succeed finishing.

[syless]

With finishEditing, the value was upadted as I expected.

But the combo has showing the old value. Text column is updated successfully.
Should I refresh the store explicitly?

const selected = productGrid.selectedRecord;
            console.log('selected row', selected.data);
            selected.set({
                ProductName: 'TEST',
                ProductCode: 'TEST',
            });
            console.log(productGrid.store.json);

        productGrid.finishEditing();

[alex.l]

But the combo has showing the old value.

Could you please share how did you update the value? I supposed you set value in the editor (combo), which triggers record update, not vice versa. If you manually updated record, it won't automatically update your custom input, you need to take care of it.
For more detailed answer, I need to see the code, best of all, the code that I can run and debug.

[syless]

Hi, I added the code

I've update the record directly.

const selected = productGrid.selectedRecord;
            selected.set({
                ProductName: 'TEST',
                ProductCode: 'TEST',
            });
            productGrid.finishEditing();

Thank you for your help.

// One of columns
{
        text: 'Product Name',
        field: 'ProductName',
        autoWidth: true,
        type: 'tree',
        editor: {
            type: 'dropdown',
            triggers: {
                search: {
                    cls: 'b-fa-search',
                    align: 'end',
                }
            },
            onTrigger: async (evt) => {
                await showSearchModal(evt);
            },
            listeners: {
                keyup: async (evt) => {
                    const isEnterKey = evt.event.keyCode === 13;
                    if (!isEnterKey) return;
                    await showSearchModal(evt);
                }
            }
        },
        locked: true,
    },

const showSearchModal = async (evt) => {
    await modal.open({
        size: 'small',
        description: 'product',
        header: 'product',
        keyword: evt.source.input.value,
        record: productGrid.record,
        onselect: (e) => {
            e.stopPropagation();
        }
    }).then((result) => {
        if (result) {
            const selected = productGrid.selectedRecord;
            selected.set({
                ProductName: 'TEST',
                ProductCode: 'TEST',
            });
            productGrid.finishEditing();
        } else {
            productGrid.cancelEditing();
        }
    }).catch((error) => {
        console.error(error.stack);
    });
}

[alex.l]

Hi, thank you for the code snippet.
I don't see you set any data or store for your combobox editor. Editor combo will use data from it's store. Initial value will be set on editor open. After that you need to update value manually by managing productGrid.feature.cellEdit.editor.value or productGrid.feature.cellEdit.editor.store.

[syless]

Hi,

Thank you for the answer.

It works well as expected.

Thank you.

[syless]

Hi,

Sorry, but I have one more question.

When executing the image below, if I do not escape by forcibly pressing esc,

the value will not be displayed normally.

However, if you forcefully escape, you can see that the value is entered normally.

The code that runs when the button is pressed is as follows:

Any good way?

Thank you.

const [item] = result.selectedItem;
const selected = productGrid.selectedRecord;

selected.set({
                PricebookEntryId: item.Id,
                ProductName: item.Name,
                ProductCode: item.ProductCode,
                ListPrice: item.UnitPrice,
                UnitPrice: item.UnitPrice
});
productGrid.finishEditing();