[VUE] does not html encode when a search match

[artigat1]

I have a search box to find matches within the grid. It's setup as follows:

    searchText(value) {
        this.$refs.grid.gridInstance.features.search.search(value, true, true)
        if (value) {
            this.$emit('searchCount', this.$refs.grid.gridInstance.features.search.foundCount)
        } else {
            this.$emit('searchCount', 0)
        }
    },

I have an id number that is a link to another part of my app in one of the table columns

 {
        text: 'Title Number',
        field: 'titleNumber',
        width: 150,
        htmlEncode: false,
        locked: true,
        cellCls: 'grid-title-number',
        renderer: ({ isExport, record, value }) => {
            const url = `/titles/${ value }`

        if (!isExport) {
            return value ? `<a href="${ url }" target="_blank" >${ value }</a>` : '-'
        }

        return value
    },
},

When this is a search match though, the html is displayed as part of the link.

Annotation 2020-08-05 125015.png (8.09 KiB) Viewed 1829 times

I can see in the html that Bryntum has added a span tag into the middle of the anchor tag!

 <a href="/titles/NYK4<span class=" b-search-hit-text"="">12139" target="_blank" &gt;NYK412139</a>

Is this a known issue? And how do I stop it happening?

[fabio.mazza]

Hi artigat1,

I just changed the "search demo" adding renderer in the column:

...
{
    text: 'First name',
    field: 'firstName',
    flex: 1,
    htmlEncode: false,
    renderer: ({ isExport, record, value }) => `<a href="https://google.com" target="_blank" >${ value }</a>`
},
...

And the example works fine, no span added:

[artigat1]

My example has the ${value} in the url. I think that is what causes the problem. In your example above, the renderer only renders the value as the text of the anchor tag. Add the value to the url so that it is in the rendered html twice and I think that is the problem.

[fabio.mazza]

I have changed the example:

{
    text: 'First name',
    field: 'firstName',
    flex: 1,
    htmlEncode: false,
    renderer: ({ isExport, record, value }) => {
        const url = `/titles/${ value }`;

    return `<a href="${ url }" target="_blank" >${ value }</a>`;
}
}

And working good.

[artigat1]

Actually, I simplified it too much. I have another div around the anchor tag so that I can apply a container class. So my renderer actually looks like this:

renderer: ({ isExport, record, value }) => {
            const url = location.href.replace('analysis', `titles/${ value }`)

        if (!isExport) {
            return value ? `
                <div class="${ record.otherValue? record.otherValue.includes('text1') ? 'class1' : record?.otherValue.includes('text2') ? 'class2' : 'classOther' : '' }">
                    <a href="${ url }" target="_blank" >${ value }</a>
                </div>
            ` : '-'
        }

        return value
    },

Without the surrounding div I believe it works as expected. With the div is when it fails (on your search example too:

                { text : 'First name', field : 'firstName', flex : 1, renderer: ({value}) => `<div><a href="https://google.com/${value}" target="_blank">${value}</a></div>`, htmlEncode: false},

[fabio.mazza]

{
    text: 'First name',
    field: 'firstName',
    flex: 1,
    htmlEncode: false,
    renderer: ({ isExport, record, value }) => {
        const url = location.href.replace('analysis', `titles/${ value }`)

    if (!isExport) {
        return value ? `
            <div class="${ record.otherValue? record.otherValue.includes('text1') ? 'class1' : record?.otherValue.includes('text2') ? 'class2' : 'classOther' : '' }">
                <a href="${ url }" target="_blank" >${ value }</a>
            </div>
        ` : '-'
    }

    return value
}
},

Sorry I cannot reproduce your problem.

[fabio.mazza]

Which grid version are you using?

[artigat1]

It's Grid 3.1.7

[artigat1]

I just changed added the render function to your search (https://www.bryntum.com/examples/grid/search/) and it's doing the same thing as I'm seeing

{ text : 'First name', field : 'firstName', flex : 1, renderer: ({value}) => `<span><a href="https://google.com/${value}" target="_blank">${value}</a></span>`, htmlEncode: false},

Annotation 2020-08-05 174221.png (203.35 KiB) Viewed 1814 times

[fabio.mazza]

artigat1, really when search "Don" it works but when type "Jan" the error happens.

Thank you for your report, here is the bug issue to you track: https://github.com/bryntum/support/issues/1300