chtest.js

export default function createExternalRoot(rootElement) {
	const inputSelector = "input[data-testid*=searchbox]";
	return {
		render(props) {
			rootElement.innerHTML = `<style>
				.inputBoxHelpText {
				  display: none;
				  color: #FFF;
				  background: #4B4B4B;
				  border-radius: 6px !important;
				  border: 1px solid #4B4B4B;
			      padding: 0 5px 0 5px;
				  margin-top: 5px;
				}

				${inputSelector}:focus + .inputBoxHelpText {
				  display: block;
				}
				button[class*=button-searchIcon] { height:40px; }
			</style>`;

			let intervalForSearchInputBox = setTimeout(function () {
				if (document.querySelector(inputSelector) != null) {
					document.querySelectorAll(inputSelector).forEach(function (e) {
						console.log('placeholder text updated to ' + props.config.placeholderText);
						e.setAttribute("placeholder", props.config.placeholderText);
						if (window.location.href.toLowerCase().indexOf('/assets') > 0 && props.config.helpText) {
							e.insertAdjacentHTML('afterend', `<div class="inputBoxHelpText">${props.config.helpText}</div>`);
							/*
							e.parentElement.parentElement.parentElement.insertAdjacentHTML('afterend', `<div id="helpTextDiv" style="order:2;margin-left:-6px;">

<button style="min-width: 0px !important;" class="MuiButtonBase-root-299 MuiButton-root-272 MuiButton-text-274 css-khfl80-button-searchHelpButton MuiButton-textSizeSmall-285 MuiButton-sizeSmall-291 MuiButton-disableElevation-283" tabindex="0" type="button" role="button" data-testid="set-search-help" id="search-help-icon" aria-label="Reverse sort direction" data-tip="" data-for="toolTipComponent" data-place="top" currentitem="false">

<span class="MuiButton-label-107"><i class="m-icon m-icon-information-outline" aria-label="m-icon-information-outline" data-testid="m-icon-information-outline"></i></span></button>
							</div>`);*/
						}
					});
				}
			}, 500);

		},
		unmount() {
			rootElement.innerHTML = "";
		}
	}
};