[Solved] Is there a way to prevent the spreadsheet component from stealing focus when it renders?

[Doug]

I have a spreadsheet component with some other text boxes and such above it and the user is most likely to start by entering data in the stuff above before entering spreadsheet data but what happens is that when the screen loads the user can start typing into the boxes above and as they are typing the spreadsheet will complete its loading (since that take a little longer) and steal the focus and then all of a sudden the user is now unexpectedly typing in the spreadsheet. The AI tools have exhausted all options to combat this and have told me to just live with it but that's not ideal. Is there a workaround?

[Ivan Danchev]

Hello Doug,

I came up with the following workaround: https://blazorrepl.telerik.com/QgEmQgFA34jKbmtg24 

It relies on disabling initial interaction with the div container that wraps the Spreadsheet and then enabling it after it is loaded. However, be advised that it works differently in Firefox and Chrome: in Firefox you can continue typing while and after the Spreadsheet loads (the input does not lose focus). In Chrome, the input loses focus, but at least you don't suddenly start typing in the Spreadsheet. 

Regards,
Ivan Danchev
Progress Telerik

[Doug]

Thanks Ivan, however I'm not able to view your workaround. When I click your link I see a couple of errors saying "Unable to get snippet content" and in the browser console I see some CORS errors: Access to fetch at 'https://blazorrepl.blob.core.windows.net/snippets/26/02/2616/34jKbmtg24' from origin 'https://blazorrepl.telerik.com' has been blocked by CORS policy: Permission was denied for this request to access the `local` address space.

[Ivan Danchev]

Doug, 

That is unusual. If a REPL example fails on loading, reloading the example should work. Nevertheless, I'll post the suggested approach here as well:

<h4>Type while the Spreadsheet loads:</h4>
<input type="text" />

<div class="container" inert="@(!isInteractionEnabled)">
    <TelerikSpreadsheet Data="@FileData">
    </TelerikSpreadsheet>
</div>

@code {
    private byte[] FileData { get; set; }
        public const string SampleFileBase64 = "UEsDBAoAAAAAAMxshFgAAAAAAAAAAAAAAAAJAAAAZG9jUHJvcHMvUEsDBAoAAAAIAMxshFjMOtYqOwEAAIECAAARAAAAZG9jUHJvcHMvY29yZS54bWylkl1LwzAUhu8H/oeQ+zb9GDJD24HKQHQguKF4F5Kzrdh8kES7/XvTbisr7k7Izcn75jnnPaSY72WDfsC6WqsSp3GCESiuRa22JV6vFtEMI+eZEqzRCkp8AIfn1c0EFdxQri28Wm3A+hocCijlKDcl3nlvKCGO70AyFweHCuJGW8l8KO2WGMa/2BZIliS3RIJngnlGOmBkBiKeIHSiCj5QzbdteobgBBqQoLwjaZwSPHg9WOmuPugVMgLL2h8MXHWfxQG9d/VgbNs2bvPeGlKk5GP58tYHjmrVrYwDrro+heCUW2Be2+oZlNBo/VSQi8veFNbZMOeXYfWbGsT94cL7Vztx+zRHDggUhqPHKGflPX94XC1wlSXZNEq6s0pzms9oNo3vkvSzG2PEGIPlqeG/yGdINemDjP9M9QtQSwMECgAAAAgAzGyEWJWyKziJAQAAXQMAABAAAABkb2NQcm9wcy9hcHAueG1snVPBbtswDL0H6D8Iujeyu2IYAlnF0K7YYcMCJG3PmkzHQhXJEFkj2ddPsuskW5BLb9J75CMfKcm73daxHiLa4CtezgvOwJtQW7+p+NP68foLZ0ja19oFDxXfA/I7dTWTyxg6iGQBWZLwWPGWqFsIgaaFrcZ5on1imhC3mtI1bkRoGmvgIZi3LXgSN0XxWcCOwNdQX3cHQT4qLnr6qGgdTO4Pn9f7LumpGWPya9c5azQlo+qnNTFgaIh92xlwUpySOTjJrcC8RUt7VUhxes30ymgH96mCarRDkOIIZPo76DzApbYRM5CgnhY9GAqRof2T5njD2W+NkPureK+j1Z74GPsePWITNIKuQ4rqJcRXbAEIpTiAU6o4z70oZ29VOSSkw8X8ERl6H8yJ/93JtSUH+KtZ6kiX/JanfoeOuTo6WmU35Ymbs6JnNeQP61/xqVuHB00w7eFfcFhVqyPUaYGHVR2AYVWpoehy1n2r/QbqKeyceH9Ez+NnUeXtvPhUFMPbmbCZFMd/of4CUEsDBAoAAAAAAMxshFgAAAAAAAAAAAAAAAAGAAAAX3JlbHMvUEsDBAoAAAAIAMxshFgF3CTJ8gAAAJUCAAALAAAAX3JlbHMvLnJlbHOtks9KxDAQxu+C7xDmvp3uCiLSdi+LsDeR+gBjMv1D20xIonbf3nhyK6tUcG7JfPm+X4Yp9vM0qjf2oRdbwjbLQbHVYnrblvBcP2zuQIVI1tAolks4cYB9dX2lzqp44pFiMghd74JKjjaU0MXo7hGD7niikIljmzqN+IliOvoWHemBWsZdnt+iP/eAahHwPUMdTQn+aG5A1SfHa7KkaXrNB9GvE9t4IRJ5jmwNm43z6b2Pffqpqsm3HEswoh/TdUByLkvWgOsId+sJf54GThzJUCTU4vl3vk/FXwC3/znCpeKLbh7xXfzwIjJcYitwsUDVB1BLAwQKAAAAAADMbIRYAAAAAAAAAAAAAAAAAwAAAHhsL1BLAwQKAAAAAADMbIRYAAAAAAAAAAAAAAAACQAAAHhsL19yZWxzL1BLAwQKAAAACADMbIRYRuG7+eMAAABIAgAAGgAAAHhsL19yZWxzL3dvcmtib29rLnhtbC5yZWxzrZHNasMwDIDvhb2D0H1x0sEYI04vZdDr1j2AiZU4NLGNpf3k7edtEFIobIeCQUjCnz6kevc5jfBOiYfgNVZFiUC+DXbwvcbX49PtAwKL8daMwZPGmRh3zc2mfqbRSP7EbogMmeJZoxOJj0px62gyXIRIPne6kCYjOU29iqY9mZ7UtizvVVozsNkA5AdwxoaD1ZgOtkI4zpH+MyN03dDSPrRvE3m5MEp9hHRiRyQZalJPonEpsfoJVZGpCOrb6qLQ9ppCLPOYN7vY/OZ/KdxdVcGZRPZFUj792mRdXoRqdXb/5gtQSwMECgAAAAgAzGyEWEZ9GThgAQAAYQIAAA8AAAB4bC93b3JrYm9vay54bWyNUctuwjAQvCP1HyzfSx4ECigBqQ9UpKr00MLZxBti4diR7RD4+24ShcKtt53x7szOOl6eC0lOYKzQKqHB0KcEVKq5UIeE/nyvHqeUWMcUZ1IrSOgFLF0uHgZxrc1xr/WRoICyCc2dK+eeZ9McCmaHugSFL5k2BXMIzcGzpQHGbQ7gCumFvj/xCiYU7RTm5j8aOstECq86rQpQrhMxIJnD9W0uSksXA0LiTEjYdqEIK8tPVuDqZ0mJZNa9ceGAJ3SMUNdwR5iqfK6ERDAb+SNKvFauz/plCIeMVdJ944a9A54tjMJw0nc3nVsBtW3QzXTDkfNOKK7rhIYRnvrSowi967beCe5ylJwGsyv3DuKQu4Q+zRquc/HubOL2rDclUW3mldacbAwH036jQ+okrNhLQNz0rTFqgLnnAguz5sFV/0+xgSmTKcbPKilfsNyoD8260ealVYnGk7Abj70+8+IXUEsDBAoAAAAAAMxshFgAAAAAAAAAAAAAAAAOAAAAeGwvd29ya3NoZWV0cy9QSwMECgAAAAAAzGyEWAAAAAAAAAAAAAAAAAwAAAB4bC9kcmF3aW5ncy9QSwMECgAAAAAAzGyEWAAAAAAAAAAAAAAAABIAAAB4bC9kcmF3aW5ncy9fcmVscy9QSwMECgAAAAAAzGyEWAAAAAAAAAAAAAAAABQAAAB4bC93b3Jrc2hlZXRzL19yZWxzL1BLAwQKAAAACADMbIRYBk7YwNMFAACELwAAGAAAAHhsL3dvcmtzaGVldHMvc2hlZXQxLnhtbL2aW4+bOBzF30fa74B42iYqYLANREmqhou2D5VW2+3uM0OcBA2XCJjOzLevuSSZZoaYPyEdqZ3hdo6Nfz42mPmn5ySWfrC8iLJ0ISNFkyWWhtk6SrcL+fu//kdLlooySNdBnKVsIb+wQv60/ONu/pTlD8WOsVLiCmmxkHdluZ+pahHuWBIUSrZnKT+yyfIkKPlmvlWLfc6CdX1REqu6plE1CaJUbhRmSdhHJAnyh8f9xzBL9kEZ3UdxVL7UWgeZvI9KttlEIXOz8DFhadmUJWcxV8zSYhfti4PaM8LB23IlUZhnRbYpFV6OVuxt9WzVVoNQlpJw9mWbZnlwH/M7WCvKyztJkubriNtXt17K2WYhf0YzHxFZUpd39eFa67+IPRX16a/3SFIZ3H9jMQtLtuYNJ0tVg9xn2UN19AvfxVuyvaq9Vj1e3Jirr+VPfn59m/7Opbqgs/WLy4qQ3ySuqOi8cOFjUWbJXyza7sraeM02wWNc/pM9HXcSufFsDzlZ/H+0LncL2VY0UycYU6xbxERYP1a2LWSYxYfKHvY1ezmFL9XtQ1g+7D77SaK0Lk8SPNe/m4K2xqjrqqf2OFZ0RLCGzKZcFq1KBjDWW2MdaGxoCsWGbRo6au4JARobrbEBrTFVDGLpxLLbpjCBxrg1xr/bmLTG5Hcb09aYAo11/V3s61PmaoP8qQO6QRn80nPr0/LsScprrt/vl2clONuseiW2FPOd/ru867xsHlaWn7lnUTvz84tfz3/HSpr/WGpz9cfZebye53tq9VWjrh/Tqlu4n6AztqA7tqA3tqA/juBc5ZC9Cd8Te/pw9tBQ9vS6ZgaAPQRgD66u91d34OpGf3UXro77q3twddJf3YerU5G6CF5jGLxiQo26LriuS9qPIUT5aA/AtLEggNtlAjCFVwBQdrdRpxB1XTFsAKoCh/lm6RgT15jw1p6rm7fHeYMo2LQA+PZ0nHpGhyGfbVpU6ChCGt8KaVzXzwS0GcHUsgHQrRoLC4A0oIEceAUAue426jZAnY9+EKIFBhVfeOLiC0QbCkHCyDw5+j0dpx7u6kJI0eyrQ5rcimgCzjhMqG5AQpqAQxqAhAOvACSkCTykDcWGIC1wqAAjE5dcDGnThoR0T8epR7pCmiqmdXVI01shTcEZhwmxTMAUc0XBIY0AT34OvAYQpik4pW0FQ5AWGFSA0YlLLyCNFAuEdE/HqUe7DJFiXI+0eSukzSEpbdmAsXtlglMaAaBz4DWAPPKZ8JhGMKYFDhVh5sQ1LzBNOdOAB02/p+PUMzsMMWeaCh1FTFu3YtoaMpcm4gqdLFYWPKYhrzHgNYDEtAWOaaTBph4Ch4owa+JaF6ceCJTTPR2nntWV04aCrs9p+1ZM2+CUM3koEMAbopUNz2lAkjrwGgAK79rgnKYwpAUGFWD2xLUvxrRta69+AF3W7+k+9ezuyBaPESK6kXYrvCtlaOLphqZB5iGtByi0AWOCM6AOAHm3lYfENoYhLnKoKEPahJfk4msQGzI79PubTr3qUef90YK7EqGrEO+BK3098Ebw8KPYEr/dOXmsWg9QfgMS1hlQB8hEu5WHJDiGTbRFDjVpiJOGLs5LKGiu3d+U4426X4ug6+fbaOBiYg+89UOyCputL8xjKzqjK7qjK3qjK/ojKQrRutlSHzouxI2G1tiKzuiK7uiK3uiK/kiKQrQGLrld9QkEahZnkDYidqNLOuNLuuNLegdJyMdMoIW0g4F+YYz99v3rn74x48PxBz64d42zuqZoJr76JQAauKZW0WmYyjBiyfjEji7pHCRBHxcB1rjdgwEekd/RJf2DJOlDLP7QRSvH1dL1Abi23yE3Xz1WO17911ySsHzLHBbHhRRmjxW/+qmUp6OvvqGW1eX5ft7cs+r2nb67PMme+873wZZ9DfJtlBZSzDZ1j+GP0nnTBeq/y2xf/8Vv231W8g5y2NqxYM3yaouDtcmy8rjRWNf/5urx+/nlT1BLAwQKAAAACADMbIRYkzjJee8DAAA3JQAADQAAAHhsL3N0eWxlcy54bWztWl1zmzgUfc9M/wND9nEbwAk4ztjupNl4pg/t7EyzM30VILCm+mCEnLX76yshDLKxDU03trfFD7HEvTr36CA7R8Ljd0uCrWfIc8ToxPauXNuCNGIxounE/udp9vbWtnIBaAwwo3Bir2Buv5u+uRjnYoXh5zmE4sKSLwlD84k9FyK7c5w8mkMC8iuWQSojCeMECNnlqZNnHII4VwMJdgauGzgEIGrXKHck6gJEAP+6yN5GjGRAoBBhJFYFnoYi0d2HlDIOQixpL70bEJk1iguNMgRFnOUsEVcS1mFJgiLYZDxyRo5Em0q4MV2QGRG5FbEFFRP7prha1ClDlub8wGJJ44/LPy8v3StXqqyjH2IpeuDbljP90UHBSwYNXzLothw0dsrZFp2E0XrenmRTSHr3lbJ/6UzF5FW7rKVydVP18m/WM8Ay7FVs1OWIYcYtIe8EVEPNEAUE6jEPAKOQo41oAgjCKx0fbESK+1qOJEiuhnr6Ts2pyXHnW8V7YJIrafM0nNiz8mWE11TMOdxzBLDJc/8UGlx/kuYOdU/IcLRXR9e9fhz6PcueZc+yZ9mzPC+W43C7zrkyPczS8/8XNHeIeez/4+13/HRa6lZpShHGtSn17YqQCkzHcqcgIKcz2bHK9tMqk0JSubmxnamEUnkdB6UcrLyBvzWuMUcTsriwFzBnGMW2masB0gdTzsB970uP6WxgOgaoIeHGfF6d2f3wr+A8mZW+vGf2SzB79GfXPbNfhdmD9zjomfXMzpmZvqA9Rsh4DHntMtaHXPr6dIxhIqQl4Cidq3fBMvk3ZEIwIhsxAimjACvTUI64qIqU0EWZCGL8WR2yfkmatZaJpXPVCZ1rW4rduinNUNksT+1MpAraRA0M2PrgbxPLqLBReZmYxWpfKKHWIUPvNaA0riDL8EodFKqemVIWGqxTZH8rxWgWKfcYpZTABpTRrO9tfZPBepiRN2ccfZOklOeMZAhyE/AZcoGi3TFz9Tk7yq2FcZbJjyg12K/UcRQ57fSv2xfK9RkulNcX5qZdmJvfUhi/XRi/kzCdZXgh0aCdaLCf6NbzoyLt04KEkM+KJzqd5vXfTWbYPpnhb7kcb9uFuT2L5ThqJzrqthyD0y9Hz22fTZ1zUt29Dl6ozjnZZ6ews7u9kPa2RzAD3gEzVEl1wDduPQlvW6RHcVLHE6+DlfJO76Ua6+wIyhzwUif6TuhgYrwD9m7r1xuv+m2s95fm1rLYazb3rFXIUqf+E/uTooKNHWS4QFggqnvbe1cNHy/rbWu1wRXqNz6bRWUshglYYPFUBSd23f4IY7Qggyrrb/TMRJlVt3WWfvwydupfPE2/A1BLAwQKAAAACADMbIRYsFtJ6UsBAABVBAAAFAAAAHhsL3NoYXJlZFN0cmluZ3MueG1slZLRSsMwFIbvB77DIV5vqXWKjLbDTiZeCOrmAxzbYxtMk5qczs2nN1MQ70whBJL83/lzkj9b7jsNO3JeWZOLs1kigExla2WaXDxv19MrAZ7R1KitoVwcyItlcTLJvGcIrPG5aJn7hZS+aqlDP7M9mXDyal2HHJaukb53hLVvibjTMk2SS9mhMgIqOxgOvsFlMOp9oNXvRjEBCAMg86rIvs0WvscqXCJU8+R2JIo7s7OqIji9SGEKyVym56F8Os8kF5kM4P8VbuK1D87WQ8XxwOOAhhUfxliEduLlW9zHi6+74+PG61eoP8OnxwP36Bp0inFEv1ZrC+tjVppG2Xjw1hG9wQY11vHQplcGqxZCnqHUA8EqRNKP6PBJNVYT84iLrhx1BKUbNI0xwppeyDXkoCRy8WA51B+k/Ghuq/rFCLVl1PATqD9YmD0XX1BLAwQKAAAACADMbIRYeJcMlXoBAABIBQAAEwAAAFtDb250ZW50X1R5cGVzXS54bWytlF1LwzAUhu8H/oeQW2mzeSEi7Xbh9FIHzh8Qm9M2W/NBTvb17006HUPaDnFQCM3J875vT5Jms71qyBYcSqNzOknHlIAujJC6yunH8iV5oAQ914I3RkNOD4B0Nr0ZZcuDBSSB1pjT2nv7yBgWNSiOqbGgQ6U0TnEfXl3FLC/WvAJ2Nx7fs8JoD9onPmrQ6YiQbA4l3zSePO9D5RjG6oqSp+PS6JZTqaJEnGd9UCXLTijO90Ir2+20sjBg5aDBXxi3tpEF96HOtlr8akTy3YQ0kO0arKXF27CAkl6XttprMsxuB9mOgKYsZQHCFBsVkDTwc8d38tTwt3BSnBRAFtz5V66CIts3bGfc+tOYdToc9rIhWgdcYA3gVZO2Y6q41Oc96smA/tAAXjtBK9q6D5vX3IF49y606uoZzrUvR4l70aLI2mFy5Tgn/bM9OT6diYLKwhmL4c47+HuUnxsT6cQGIXBeAl46DyfXIP/v74d4oQSILv+Mtf/B6RdQSwECFAAKAAAAAADMbIRYAAAAAAAAAAAAAAAACQAAAAAAAAAAABAAAAAAAAAAZG9jUHJvcHMvUEsBAhQACgAAAAgAzGyEWMw61io7AQAAgQIAABEAAAAAAAAAAAAAAAAAJwAAAGRvY1Byb3BzL2NvcmUueG1sUEsBAhQACgAAAAgAzGyEWJWyKziJAQAAXQMAABAAAAAAAAAAAAAAAAAAkQEAAGRvY1Byb3BzL2FwcC54bWxQSwECFAAKAAAAAADMbIRYAAAAAAAAAAAAAAAABgAAAAAAAAAAABAAAABIAwAAX3JlbHMvUEsBAhQACgAAAAgAzGyEWAXcJMnyAAAAlQIAAAsAAAAAAAAAAAAAAAAAbAMAAF9yZWxzLy5yZWxzUEsBAhQACgAAAAAAzGyEWAAAAAAAAAAAAAAAAAMAAAAAAAAAAAAQAAAAhwQAAHhsL1BLAQIUAAoAAAAAAMxshFgAAAAAAAAAAAAAAAAJAAAAAAAAAAAAEAAAAKgEAAB4bC9fcmVscy9QSwECFAAKAAAACADMbIRYRuG7+eMAAABIAgAAGgAAAAAAAAAAAAAAAADPBAAAeGwvX3JlbHMvd29ya2Jvb2sueG1sLnJlbHNQSwECFAAKAAAACADMbIRYRn0ZOGABAABhAgAADwAAAAAAAAAAAAAAAADqBQAAeGwvd29ya2Jvb2sueG1sUEsBAhQACgAAAAAAzGyEWAAAAAAAAAAAAAAAAA4AAAAAAAAAAAAQAAAAdwcAAHhsL3dvcmtzaGVldHMvUEsBAhQACgAAAAAAzGyEWAAAAAAAAAAAAAAAAAwAAAAAAAAAAAAQAAAAowcAAHhsL2RyYXdpbmdzL1BLAQIUAAoAAAAAAMxshFgAAAAAAAAAAAAAAAASAAAAAAAAAAAAEAAAAM0HAAB4bC9kcmF3aW5ncy9fcmVscy9QSwECFAAKAAAAAADMbIRYAAAAAAAAAAAAAAAAFAAAAAAAAAAAABAAAAD9BwAAeGwvd29ya3NoZWV0cy9fcmVscy9QSwECFAAKAAAACADMbIRYBk7YwNMFAACELwAAGAAAAAAAAAAAAAAAAAAvCAAAeGwvd29ya3NoZWV0cy9zaGVldDEueG1sUEsBAhQACgAAAAgAzGyEWJM4yXnvAwAANyUAAA0AAAAAAAAAAAAAAAAAOA4AAHhsL3N0eWxlcy54bWxQSwECFAAKAAAACADMbIRYsFtJ6UsBAABVBAAAFAAAAAAAAAAAAAAAAABSEgAAeGwvc2hhcmVkU3RyaW5ncy54bWxQSwECFAAKAAAACADMbIRYeJcMlXoBAABIBQAAEwAAAAAAAAAAAAAAAADPEwAAW0NvbnRlbnRfVHlwZXNdLnhtbFBLBQYAAAAAEQARAAoEAAB6FQAAAAA=";

    private bool isInteractionEnabled = false;
    
    protected override async Task OnInitializedAsync()
    {
        //simulate slower loading of the Spreadsheet
        await Task.Delay(3000);
        FileData = Convert.FromBase64String(SampleFileBase64);
        
        // Force render so Spreadsheet starts rendering
        StateHasChanged();

        // Wait for Spreadsheet to fully initialize, then enable interaction
        await Task.Delay(2000);
        isInteractionEnabled = true;

        await base.OnInitializedAsync();

    }
}