string with html entities as labels does not work

[rabol]

Describe the bug When working with multi language web sites I use __('') to do translation of texts.

In the french language there is a lot of apostrophes accents etc. like this:

Créer un ticket d'assistance

and if one uses html entities to display strings

"Create support ticket": "Créer un ticket d'assistance",

them the label / slot does not look correct.

To Reproduce Steps to reproduce the behavior:

1. create a button like this <x-button primary type="submit" >{{ __("Create support ticket") }} </x-button>
2. have a translation file e.g. /lang/fr.json with this entry "Create support ticket": "Créer un ticket d'assistance",
3. render
4. See error

Expected behavior That the label is correct.

Screenshots or Videos If applicable, add screenshots or videos to help explain your problem.

Dependencies

• WireUI Version: 1.17.9
• Laravel Version: 10.11.0
• Alpine.js Version: 3.12.1
• Livewire Version: 2.12.3
• Lang: ca, da, de, en, es, fr, lt

[rabol]

I most have been sleeping.... second time I tried it worked - sorry

[rabol]

<x-select
            label="{!! __('Select subscription') !!}"
            :options="$subscriptions"
            option-value="id"
            option-label="name"
            placeholder="Select subscription"
            wire:model="selectedSubscription"
            id="subscriptions"
        />

this does not work

[joaopalopes24]

Good morning. I tested it locally and it worked normally. Thank you very much in advance.

[rabol]

Not sure why you close this issue

How did you test ?

<x-button label="Créer un ticket d&#39;assistance" />

will give you a button like this:

but this write the text correct

<span>Créer un ticket d&#39;assistance</span>

[joaopalopes24]

This is not a bug in WireUI. Try rendering this directly on your blade and see what the result is.

{{ 'Créer un ticket d'assistance' }}

[joaopalopes24]

You are not handling HTML.

[rabol]

this works: html button

<button class="border border-gray-500 p-4">{{__('Create support ticket')}}</button>

this does not: wireui button

<x-button label="{{__('Create support ticket')}}" />

[joaopalopes24]

This isn't work:

<button class="border border-gray-500 p-4">{{ __('Create support ticket') }}</button>

Bus this is work:

<button class="border border-gray-500 p-4">{!! __('Create support ticket') !!}</button>

[joaopalopes24]

Via label it is just treated as string, not as HTML. This is a limitation of Components within Laravel.

[rabol]

for the future:

<div class="grid grid-cols-1">
    <div class="mt-2">
        <x-button red label="{!! __('Create support ticket')!!}" />
    </div>
    <div class="mt-2">
        <x-button red >{{ __('Create support ticket') }}</x-button>
    </div>
    <div class="mt-2">
        <x-button green>{!! __('Create support ticket') !!}</x-button>
    </div>

    <div class="mt-2">
        <button class="bg-green-500 border border-gray-500 p-4">{!! __('Create support ticket') !!}</button>
    </div>
    <div class="mt-2">
        <x-test class="bg-green-500" label="{{ __('Create support ticket') }}" />
    </div>
    <div class="mt-2">
        <x-test class="bg-green-500" >{!! __('Create support ticket') !!}</x-test>
    </div>
</div>

and the component that can handle html

@props(['label'])
<div  {{ $attributes->merge(['class' => '']) }}>
    @if(isset($label))
        {!! html_entity_decode($label) !!}
    @else
        {{ $slot }}
    @endif
</div>

and the fr.json

{
    "Create support ticket": "Créer un ticket d'assistance"
}

the result:

[joaopalopes24]

One way is decoding to HTML, but this can be done before assigning to the label.