JSFiddle - React, Tailwind, and code Playground

HTML

<!-- div.box でのみバグあり -->
<input type="text"          class="box">
<div contenteditable="true" class="box"></div>

<!-- _wpemojiSettings -->
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/ja.wordpress.org\/support\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.1-alpha-54185"}};
/*! This file is auto-generated */
!function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){var a=String.fromCharCode,e=(p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0),i.toDataURL());return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return...

CSS

.box {
	width: 100px;
	height: 2rem;
	padding: 0;
	margin: 0;
	font-size: 1rem;
	border: 1px solid black;
	border-radius: 0.3rem;
	display: flex;
	align-items: center;
}
.box img {
	width: 1em;
	height: 1em;
}

JavaScript

/*
	当JavaScriptの概要は次の通りです

	1) 主な関数
	- insertEmoji()
	  input.box と div.box に
	  絵文字(targetEmoji) を入力します

	- checkInsertedEmoji()
	  入力する絵文字(targetEmoji) と
	  入力された絵文字(insertedEmoji) を比較します

	2) 確認されるバグ
	- checkInsertedEmoji() を2回実行すると
	  2回目の div.box だけが targetEmoji === insertedEmoji となりません
	  コンソール画面の赤字でご確認ください
	  
	3) バグの条件
  - 6.0.1, 6.0.2 にて確認され、5.9.4 ではこのバグは生じません
	- window._wpemojiSettings.source.concatemoji に
	  アクセス可能なファイルパスがないとき、このバグは生じません
*/

// concatemoji を確認
// この値は ja.wordpress.org さんからお借りしています
const concatemoji = window?._wpemojiSettings?.source?.concatemoji;
console.log( 'concatemoji = ' + concatemoji );

// バイトを取得
String.prototype.bytes = function(){
	return(encodeURIComponent(this).replace(/%../g,"x").length);
}

// 入力する絵文字
const targetEmoji = "🏴󠁧󠁢󠁥󠁮";
const targetEmojiBytes = targetEmoji.bytes();

// 2つの入力ボックスを処理
const boxes = document.querySelectorAll('.box');
boxes.forEach(function(box) {
	// 絵文字を入力
	insertEmoji(box);

	// 入力された絵文字が勝手に変化することを確認
	checkInsertedEmoji(box,'1回目');
	setTimeout(()=>checkInsertedEmoji(box,'2回目'), 1000);
});  

// 絵文字を入力
function insertEmoji(box){
	const boxTagName = box.tagName;
	if( boxTagName === 'INPUT' ){
		box.value = targetEmoji;
	}else if( boxTagName === 'DIV' ){
		box.innerText = targetEmoji;
	}
}

// 入力された絵文字が勝手に変化することを確認
function checkInsertedEmoji(box,time){
	const boxTagName = box.tagName;

	// 入力された絵文字
	let insertedEmoji;
	if( boxTagName === 'INPUT' ){
		insertedEmoji = box.value;
	}else if( boxTagName === 'DIV' ){
		insertedEmoji = box.innerText;
	}
	const insertedEmojiBytes = insertedEmoji.bytes();
  
	// 1回目と2回目の値を比較
	const isMatchEmoji = targetEmoji === insertedEmoji;

	// コンソールの内容
	const logBytes = 'bytes = %c' + insertedEmojiBytes;
	const logMatch = 'match = %c' + isMatchEmoji;
	const logStyle = isMatchEmoji ? 'color:green;' : 'color:red;';
  
	// コンソールを出力
	const consoleGroupName = time + boxTagName;
	console.group(consoleGroupName);
	console.log( logBytes, logStyle );
	console.log( logMatch,...