Localization to field placeholder make hint inset-line-end set incorrect

[NegativeDearc]

Edit page https://bryntum.com/products/schedulerpro/examples/taskeditor/

reproduce steps:

1. make customized localization
2. apply the localization
3. change field placeholder to localized

import { LocaleManager, LocaleHelper, EventModel, ResourceModel, SchedulerPro, StringHelper } from '../../build/schedulerpro.module.js?479193';
import shared from '../_shared/shared.module.js?479193';
//region "lib/ProEvent.js"

// Custom event model with multiple additional fields and a reconfigured default field
class ProEvent extends EventModel {
    static get fields() {
        return [
            { name : 'durationUnit', defaultValue : 'hour' },
            { name : 'order',  defaultValue : 'New order' },
            'cost',
            'contact',
            'phone'
        ];
    }
}

//endregion
//region "lib/Resource.js"

// Custom resource model with an additional field
class Resource extends ResourceModel {
    static get fields() {
        return [
            'type'
        ];
    }

    get percentAllocated() {
        const duration = this.events.reduce((total, task) => total += task.duration, 0);
        return Math.round((duration / 40) * 100);
    }
}

//endregionimport '../_shared/shared.js?479193'; // not required, our example styling etc.

// customized code start
const enExend = {
    "orderField": {
        "placeholder": "afhalksf"
    } 
}

LocaleHelper.publishLocale('En', enExend)
LocaleManager.applyLocale('En')
// customized code end

const scheduler = new SchedulerPro({
    project : {
        autoLoad : true,
        loadUrl  : './data/data.json',

        // Custom model classes that have additional fields
        resourceModelClass : Resource,
        eventModelClass    : ProEvent,

        // Display the editor when data is loaded
        listeners : {
            async load() {
                // Await initial calculations
                await scheduler.project.commitAsync();

                // Show the editor with 500 ms delay
                this.setTimeout(() => scheduler.editEvent(scheduler.eventStore.first, scheduler.resourceStore.getById('weld')), 500);
            }
        }
    },

    appendTo   : 'container',
    startDate  : new Date(2020, 3, 6),
    endDate    : new Date(2020, 3, 11),
    rowHeight  : 50,
    barMargin  : 0,
    eventStyle : null,

    viewPreset : {
        base      : 'hourAndDay',
        tickWidth : 20,
        headers   : [
            {
                unit       : 'day',
                dateFormat : 'dddd' // Monday
            },
            {
                unit       : 'hour',
                dateFormat : 'HH' // 00-23
            }
        ]
    },

    columns : [
        {
            text  : 'Resource',
            field : 'name',
            width : 200
        },
        {
            text   : 'Type',
            field  : 'type',
            hidden : true
        },
        {
            text   : 'Tasks',
            field  : 'events.length',
            width  : 70,
            align  : 'right',
            editor : false
        },
        {
            text      : 'Allocation',
            type      : 'percent',
            field     : 'percentAllocated', // A custom getter defined in .lib/Resource.js
            editor    : false,
            sortable  : false,
            groupable : false,
            align     : 'center',
            renderer(renderData) {
                const
                    { record: resource } = renderData,
                    domConfig            = this.defaultRenderer(renderData);

                // If overlapping, inject a warning icon before the progress bar to alert user
                if (resource.events.some(task =>
                    task.isScheduled && !scheduler.eventStore.isDateRangeAvailable(task.startDate, task.endDate, task, resource))
                ) {
                    return [{
                        tag       : 'i',
                        className : 'b-fa b-fa-exclamation-triangle',
                        style     : 'color : red',
                        dataset   : {
                            btip : 'Overlap!'
                        }
                    }, domConfig];
                }

                return domConfig;
            }
        }
    ],

    features : {
        group : 'type',

        percentBar : true,

        taskEdit : {
            // Change editor title
            editorConfig : {
                title : 'Edit '
            },

            // Customize its contents
            items : {
                generalTab : {
                    // Customize the title of the general tab
                    title : 'Common',
                    items : {
                        // Hide the end date field
                        endDateField : null,
                        // Add a field to edit order name
                        orderField   : {
                            type   : 'number', // customized code end
                            name   : 'order',
                            label  : 'Order',  
                            hint   :  'test', // customized code end
                            placeholder: 'L{orderField.placeholder}', // customized code end
                            // Place after name field
                            weight : 150
                        },
                        priority : {
                            type       : 'radiogroup',
                            name       : 'priority',
                            label      : 'Priority',
                            labelWidth : '6em',
                            flex       : '1 0 100%',
                            weight     : 150,  // Place before resources field
                            options    : {
                                high : 'High',
                                med  : 'Medium',
                                low  : 'Low'
                            }
                        }
                    }
                },
                // Hide the notes tab
                notesTab  : null,
                // Add a custom tab with some fields
                customTab : {
                    defaults : {
                        labelWidth : '5em'
                    },
                    title : 'Job',
                    items : {
                        noteField : {
                            type  : 'text',
                            name  : 'note',
                            label : 'Note'
                        },
                        costField : {
                            type  : 'number',
                            name  : 'cost',
                            label : 'Cost'
                        },
                        contactField : {
                            type  : 'text',
                            name  : 'contact',
                            label : 'Contact'
                        },
                        phoneField : {
                            type  : 'text',
                            name  : 'phone',
                            label : 'Phone'
                        }
                    },
                    // Show it after generalTab, which has weight 100
                    weight : 150
                }
            }
        }
    },

    timeAxis : {
        filters : tick => tick.startDate.getHours() > 6 && tick.startDate.getHours() < 17
    },

    eventRenderer({ eventRecord : task, resourceRecord, renderData }) {
        renderData.eventColor = {
            'Order 1'   : '#ffefd5',
            'Order 2'   : '#87cefa',
            'New order' : '#ffa500'
        }[task.order];

        // Highlight overlapping tasks within a resource
        if (!scheduler.eventStore.isDateRangeAvailable(task.startDate, task.endDate, task, resourceRecord)) {
            renderData.eventColor = '#f08080';
        }

        renderData.style = `border-color: ${renderData.eventColor}; color: ${renderData.eventColor}`;

        return [
            {
                className : 'desc',
                children  : [
                    StringHelper.encodeHtml(task.name),
                    {
                        tag       : 'div',
                        className : 'order',
                        html      : `${task.order}, ${task.percentDone}%`
                    }
                ]
            },
            task.note ? {
                tag       : 'i',
                className : 'b-fa b-fa-sticky-note b-last',
                dataset   : {
                    btip : task.note
                }
            } : null
        ];
    }
});