cursive writing/font not supported on dropdown

[YacoubBelaoura]

This is a bug ?.

Prerequisites

• [x] Are you running the latest version?
• [x] Are you reporting to the correct repository? (enso is made of many specialized packages: https://github.com/laravel-enso)
• [x] Did you check the documentation?
• [x] Did you perform a cursory search?

Description

the vue-select dropdown dont suport cursive writing fonts and languages like 'arabic' example screenshots

Steps to Reproduce

1. visit Edit Permission and change language to arabic "use cursive writing" and click on type select dropdown menu, you will notice it separate characters.

Expected behavior

for cursive fonts it should keep it like it is

Actual behavior

reason ?

the <b> tag around RegExp text

        highlight(label) {
            return label.replace(
                new RegExp(`(${this.query})`, 'gi'), '<b>$1</b>',
            );
        },

[aocneanu]

If we remove the <b> how do we highlight the matched string from an option?

[YacoubBelaoura]

my solution is to use this Zero-width joiner add ‍ after <b> tag

        highlight(label) {
            return label.replace(
                new RegExp(`(${this.query})`, 'gi'), '&#x200d;<b>$1</b>',
            );

here is the output.

[aocneanu]

you mean before the <b> tag?

So just to be clear, doing this fixes the reported problem?

[YacoubBelaoura]

the problem is that this function will inject empty <b> tags in select options.

        highlight(label) {
            return label.replace(
                new RegExp(`(${this.query})`, 'gi'), '<b>$1</b>',
            );
        },

like here:

<span>‍<b></b>ق‍<b></b>ر‍<b></b>ا‍<b></b>ء‍<b></b>ة‍<b></b></span>

so the fix is only to inject <b> tag when there is a query. so here is the working fix:

        highlight(label) {
            if (this.query.length > 0) {
                return label.replace(
                    new RegExp(`(${this.query})`, 'gi'), '<b>$1</b>',
                );
            } else {
                return label;
            }
        },

i will make a PR if you approve.

[aocneanu]

@YacoubBelaoura, I forgot about this, do a PR.

Thanks.

PS use a ternary instead of if else.