Bootstrap 4.3 form avec placeholder sur un input file

Bonjour à tous,
j'ai un soucis sur lequel je bute depuis plusieurs heures :
J'ai fait un formulaire avec bootstrap 4.3, et j'ai utilisé les placeholder pour présenter les labels.
Cela fonctionne bien sur tous les input (quand je saisis du contenu, le placeholder disparait et laisse la place au texte saisi),
sauf sur les input de type file...
car lorsque je sélectionne le fichier, le texte du placeholder reste visible, au lieu d'être remplacé par le nom du fichier sélectionné... ce qui n’empêche pas le fonctionnement, mais peut laisser penser à l'utilisateur que le chargement n'a pas fonctionné...
voila l'exemple :
https://codepen.io/jpbond/pen/pXdOXa

ce que je ne comprends pas, c'est que si je regarde le code de l'exemple du site officiel :
https://getbootstrap.com/docs/4.3/components/input-group/#custom-file-input
si je charge un fichier, le nom du fichier apparait bien à la place du label de départ...

Si vous avez une idée... merci de votre aide

merci beaucoup pour ta réponse ! Je vais étudier cela...
Je suis juste surpris qu'il faille ajouter une couche de JS pour cela car je pensais que c’était le comportement normal d'un input de type file en HTML et qu'il y avait un bug de CSS dans Bootstrap... ?