clearイベントを処理する場合、clearイベントをトリガーするための絶対位置要素が右側に追加されます。
また、フォーカスを失ったときにクリアボタンを隠す必要があります。
onBlur={/*** ****/}
すると、クリアボタンのzIndexがどんなに高くても、ぼかしイベントだけがトリガーされ、クリアボタンのクリックイベントはトリガーされないことがわかりました。Blurイベントの呼び出し解除がトリガーになります。
そこで思いついたのですが、アプレットのネイティブフォームにはパススルーがあります。つまり、zIndexがどのように設定されていても、イベントの優先順位はinputが一番高いのです。
blurイベントが最初に発生し、clearボタンshowClear ? <img src={../XXX/clear} /> : nullイベントがトリガされません。
それを発動させるには2つの方法があります：
1) ボタンを非表示にする場合visibility: !showClear ? 'hidden': 'visible'
2) ボタンを隠すdisplay: !showClear ? 'none' : 'block'
ブラーイベントは非同期でトリガーされます：
onBlur = { => { /*/ }) }.
