Html 更改React组件中选定选项的文本

基本上，问题是我有一些标签太长，以至于它们填充了我拥有的自定义选择组件，并覆盖了下拉V形。目标是显示所选选项的修剪版本。当用户展开下拉列表时，他们应该看到没有任何修剪的选项

我做了一个简化的尝试，除了在Firefox中，它似乎大部分都能工作

我是新的反应，所以任何指导将是最感激的

谢谢

函数选择（{list}）{
函数标签（数组）{
returnarray.map（entry=>{return{value:entry.value，label:entry.label.substring（1,10）}）；
}
const[listToRender，updateList]=React.useState（trimLabel（list））；
const[currentValue，updateValue]=React.useState（）；
函数onBlur（）{
更新列表（trimLabel（列表））；
}
函数onFocus（）{
更新列表（列表）；
}
函数onChange（事件）{
updateValue（event.target.value）；
}
返回(
你好
{listToRender.map（（{value，label}）=>{label}）
);
}
常数myList=[
{值：1，标签：“1111111111”}，
{值：2，标签：“22222”}，
{值：3，标签：“3333”}，
{值：4，标签：“4444”}，
{值：5，标签：“55555555”}，
];
ReactDOM.render(
,
document.getElementById（'root'））
);

我没有注意到firefox有什么不同，bug在哪里？我也没有看到chrome/firefox/ieYeah有什么不同。它现在似乎在工作：哦，它不是昨晚在Windows上出现的